@speakapbv/dough-component-library 10.12.2 → 10.12.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.es.js +42 -33
  2. package/dist/index.js +42 -33
  3. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1393,7 +1393,7 @@ var DropArea = function (props) {
1393
1393
  var updateReferencePosition = function () {
1394
1394
  var _a;
1395
1395
  if (dropAreaContainerRef.current && props.referenceElement.current) {
1396
- var overlayRect = {
1396
+ var overlayRect_1 = {
1397
1397
  top: 0,
1398
1398
  left: 0,
1399
1399
  width: windowWidth,
@@ -1403,47 +1403,56 @@ var DropArea = function (props) {
1403
1403
  var realyOverlayItemRect = (_a = document
1404
1404
  .querySelector(props.overlaySelector)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
1405
1405
  if (realyOverlayItemRect) {
1406
- overlayRect = realyOverlayItemRect;
1406
+ overlayRect_1 = realyOverlayItemRect;
1407
1407
  }
1408
1408
  }
1409
1409
  var dropAreaContentHeight = dropAreaContainerRef.current.getBoundingClientRect()
1410
1410
  .height;
1411
- var rect = props.referenceElement.current.getBoundingClientRect();
1412
- var leftPosition = rect.left;
1411
+ var rect_1 = props.referenceElement.current.getBoundingClientRect();
1412
+ var leftPosition = rect_1.left;
1413
1413
  if (props.alignToCenter && typeof props.width === "number") {
1414
- leftPosition = rect.left + 20 - props.width / 2;
1414
+ leftPosition = rect_1.left + 20 - props.width / 2;
1415
1415
  }
1416
1416
  var rightPosition = 0;
1417
1417
  if (props.alignFromRight && !props.alignToCenter) {
1418
1418
  rightPosition =
1419
- overlayRect.width - (rect.left + rect.width + rightShift);
1419
+ overlayRect_1.width - (rect_1.left + rect_1.width + rightShift);
1420
1420
  }
1421
- var widthPercentage = (rect.width * 100) / overlayRect.width;
1421
+ var widthPercentage = (rect_1.width * 100) / overlayRect_1.width;
1422
1422
  var topPosition = props.alwaysTop
1423
- ? rect.top - dropAreaContentHeight - TOP_MARGIN + topShift
1424
- : rect.top +
1423
+ ? rect_1.top - dropAreaContentHeight - TOP_MARGIN + topShift
1424
+ : rect_1.top +
1425
1425
  topShift +
1426
- rect.height +
1426
+ rect_1.height +
1427
1427
  TOP_MARGIN +
1428
1428
  (props.showCaret ? 8 : 0);
1429
1429
  var bottomPosition = void 0;
1430
+ var calculateBottomPosition = function () {
1431
+ return overlayRect_1.height -
1432
+ (rect_1.top - overlayRect_1.top) +
1433
+ TOP_MARGIN +
1434
+ (props.showCaret ? 8 : 0) -
1435
+ topShift;
1436
+ };
1430
1437
  if (props.alwaysTop) {
1438
+ bottomPosition = calculateBottomPosition();
1431
1439
  setDirection(TOUP);
1432
1440
  }
1433
1441
  else if (topPosition + dropAreaContentHeight >
1434
- overlayRect.height) {
1435
- bottomPosition =
1436
- overlayRect.height -
1437
- rect.top +
1438
- TOP_MARGIN +
1439
- (props.showCaret ? 8 : 0);
1440
- if (overlayRect.height -
1441
- bottomPosition -
1442
- dropAreaContentHeight <=
1443
- 20) {
1442
+ overlayRect_1.height) {
1443
+ var spaceAboveInOverlay = rect_1.top - overlayRect_1.top;
1444
+ var requiredSpace = dropAreaContentHeight +
1445
+ TOP_MARGIN +
1446
+ (props.showCaret ? 8 : 0);
1447
+ var spaceAbove = rect_1.top -
1448
+ dropAreaContentHeight -
1449
+ TOP_MARGIN -
1450
+ (props.showCaret ? 8 : 0);
1451
+ if (spaceAboveInOverlay < requiredSpace || spaceAbove < 20) {
1444
1452
  bottomPosition = null;
1445
1453
  }
1446
1454
  else {
1455
+ bottomPosition = calculateBottomPosition();
1447
1456
  setDirection(TOUP);
1448
1457
  }
1449
1458
  }
@@ -1452,23 +1461,23 @@ var DropArea = function (props) {
1452
1461
  }
1453
1462
  setPositionStyle({
1454
1463
  bottom: bottomPosition
1455
- ? "".concat(bottomPosition + overlayRect.top, "px")
1464
+ ? "".concat(bottomPosition + overlayRect_1.top, "px")
1456
1465
  : "initial!important",
1457
1466
  left: props.alignFromRight
1458
1467
  ? null
1459
- : "".concat(leftPosition - overlayRect.left, "px"),
1468
+ : "".concat(leftPosition - overlayRect_1.left, "px"),
1460
1469
  minWidth: props.strictToReferenceWidth === false &&
1461
1470
  props.width !== undefined
1462
1471
  ? "".concat(props.width, "px")
1463
- : "".concat(rect.width, "px"),
1472
+ : "".concat(rect_1.width, "px"),
1464
1473
  right: props.alignFromRight && !props.alignToCenter
1465
- ? "".concat(rightPosition + overlayRect.left, "px")
1474
+ ? "".concat(rightPosition + overlayRect_1.left, "px")
1466
1475
  : null,
1467
1476
  top: bottomPosition
1468
1477
  ? "initial!important"
1469
- : "".concat(topPosition - overlayRect.top, "px"),
1478
+ : "".concat(topPosition - overlayRect_1.top, "px"),
1470
1479
  width: props.strictToReferenceWidth
1471
- ? "".concat(rect.width, "px")
1480
+ ? "".concat(rect_1.width, "px")
1472
1481
  : props.width
1473
1482
  ? typeof props.width === "string"
1474
1483
  ? props.width
@@ -1477,15 +1486,15 @@ var DropArea = function (props) {
1477
1486
  }, dropAreaContainerRef);
1478
1487
  setPositionStyle({
1479
1488
  bottom: bottomPosition
1480
- ? "".concat(bottomPosition + overlayRect.top, "px")
1489
+ ? "".concat(bottomPosition + overlayRect_1.top, "px")
1481
1490
  : "initial!important",
1482
- left: "".concat(rect.left -
1491
+ left: "".concat(rect_1.left -
1483
1492
  12 +
1484
- rect.width / 2 -
1485
- overlayRect.left, "px"),
1486
- top: topPosition
1487
- ? "".concat(topPosition - overlayRect.top, "px")
1488
- : "initial!important",
1493
+ rect_1.width / 2 -
1494
+ overlayRect_1.left, "px"),
1495
+ top: bottomPosition
1496
+ ? "initial!important"
1497
+ : "".concat(topPosition - overlayRect_1.top, "px"),
1489
1498
  }, dropAreaArrowRef);
1490
1499
  }
1491
1500
  };
package/dist/index.js CHANGED
@@ -1377,7 +1377,7 @@ var DropArea = function (props) {
1377
1377
  var updateReferencePosition = function () {
1378
1378
  var _a;
1379
1379
  if (dropAreaContainerRef.current && props.referenceElement.current) {
1380
- var overlayRect = {
1380
+ var overlayRect_1 = {
1381
1381
  top: 0,
1382
1382
  left: 0,
1383
1383
  width: windowWidth,
@@ -1387,47 +1387,56 @@ var DropArea = function (props) {
1387
1387
  var realyOverlayItemRect = (_a = document
1388
1388
  .querySelector(props.overlaySelector)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
1389
1389
  if (realyOverlayItemRect) {
1390
- overlayRect = realyOverlayItemRect;
1390
+ overlayRect_1 = realyOverlayItemRect;
1391
1391
  }
1392
1392
  }
1393
1393
  var dropAreaContentHeight = dropAreaContainerRef.current.getBoundingClientRect()
1394
1394
  .height;
1395
- var rect = props.referenceElement.current.getBoundingClientRect();
1396
- var leftPosition = rect.left;
1395
+ var rect_1 = props.referenceElement.current.getBoundingClientRect();
1396
+ var leftPosition = rect_1.left;
1397
1397
  if (props.alignToCenter && typeof props.width === "number") {
1398
- leftPosition = rect.left + 20 - props.width / 2;
1398
+ leftPosition = rect_1.left + 20 - props.width / 2;
1399
1399
  }
1400
1400
  var rightPosition = 0;
1401
1401
  if (props.alignFromRight && !props.alignToCenter) {
1402
1402
  rightPosition =
1403
- overlayRect.width - (rect.left + rect.width + rightShift);
1403
+ overlayRect_1.width - (rect_1.left + rect_1.width + rightShift);
1404
1404
  }
1405
- var widthPercentage = (rect.width * 100) / overlayRect.width;
1405
+ var widthPercentage = (rect_1.width * 100) / overlayRect_1.width;
1406
1406
  var topPosition = props.alwaysTop
1407
- ? rect.top - dropAreaContentHeight - TOP_MARGIN + topShift
1408
- : rect.top +
1407
+ ? rect_1.top - dropAreaContentHeight - TOP_MARGIN + topShift
1408
+ : rect_1.top +
1409
1409
  topShift +
1410
- rect.height +
1410
+ rect_1.height +
1411
1411
  TOP_MARGIN +
1412
1412
  (props.showCaret ? 8 : 0);
1413
1413
  var bottomPosition = void 0;
1414
+ var calculateBottomPosition = function () {
1415
+ return overlayRect_1.height -
1416
+ (rect_1.top - overlayRect_1.top) +
1417
+ TOP_MARGIN +
1418
+ (props.showCaret ? 8 : 0) -
1419
+ topShift;
1420
+ };
1414
1421
  if (props.alwaysTop) {
1422
+ bottomPosition = calculateBottomPosition();
1415
1423
  setDirection(TOUP);
1416
1424
  }
1417
1425
  else if (topPosition + dropAreaContentHeight >
1418
- overlayRect.height) {
1419
- bottomPosition =
1420
- overlayRect.height -
1421
- rect.top +
1422
- TOP_MARGIN +
1423
- (props.showCaret ? 8 : 0);
1424
- if (overlayRect.height -
1425
- bottomPosition -
1426
- dropAreaContentHeight <=
1427
- 20) {
1426
+ overlayRect_1.height) {
1427
+ var spaceAboveInOverlay = rect_1.top - overlayRect_1.top;
1428
+ var requiredSpace = dropAreaContentHeight +
1429
+ TOP_MARGIN +
1430
+ (props.showCaret ? 8 : 0);
1431
+ var spaceAbove = rect_1.top -
1432
+ dropAreaContentHeight -
1433
+ TOP_MARGIN -
1434
+ (props.showCaret ? 8 : 0);
1435
+ if (spaceAboveInOverlay < requiredSpace || spaceAbove < 20) {
1428
1436
  bottomPosition = null;
1429
1437
  }
1430
1438
  else {
1439
+ bottomPosition = calculateBottomPosition();
1431
1440
  setDirection(TOUP);
1432
1441
  }
1433
1442
  }
@@ -1436,23 +1445,23 @@ var DropArea = function (props) {
1436
1445
  }
1437
1446
  setPositionStyle({
1438
1447
  bottom: bottomPosition
1439
- ? "".concat(bottomPosition + overlayRect.top, "px")
1448
+ ? "".concat(bottomPosition + overlayRect_1.top, "px")
1440
1449
  : "initial!important",
1441
1450
  left: props.alignFromRight
1442
1451
  ? null
1443
- : "".concat(leftPosition - overlayRect.left, "px"),
1452
+ : "".concat(leftPosition - overlayRect_1.left, "px"),
1444
1453
  minWidth: props.strictToReferenceWidth === false &&
1445
1454
  props.width !== undefined
1446
1455
  ? "".concat(props.width, "px")
1447
- : "".concat(rect.width, "px"),
1456
+ : "".concat(rect_1.width, "px"),
1448
1457
  right: props.alignFromRight && !props.alignToCenter
1449
- ? "".concat(rightPosition + overlayRect.left, "px")
1458
+ ? "".concat(rightPosition + overlayRect_1.left, "px")
1450
1459
  : null,
1451
1460
  top: bottomPosition
1452
1461
  ? "initial!important"
1453
- : "".concat(topPosition - overlayRect.top, "px"),
1462
+ : "".concat(topPosition - overlayRect_1.top, "px"),
1454
1463
  width: props.strictToReferenceWidth
1455
- ? "".concat(rect.width, "px")
1464
+ ? "".concat(rect_1.width, "px")
1456
1465
  : props.width
1457
1466
  ? typeof props.width === "string"
1458
1467
  ? props.width
@@ -1461,15 +1470,15 @@ var DropArea = function (props) {
1461
1470
  }, dropAreaContainerRef);
1462
1471
  setPositionStyle({
1463
1472
  bottom: bottomPosition
1464
- ? "".concat(bottomPosition + overlayRect.top, "px")
1473
+ ? "".concat(bottomPosition + overlayRect_1.top, "px")
1465
1474
  : "initial!important",
1466
- left: "".concat(rect.left -
1475
+ left: "".concat(rect_1.left -
1467
1476
  12 +
1468
- rect.width / 2 -
1469
- overlayRect.left, "px"),
1470
- top: topPosition
1471
- ? "".concat(topPosition - overlayRect.top, "px")
1472
- : "initial!important",
1477
+ rect_1.width / 2 -
1478
+ overlayRect_1.left, "px"),
1479
+ top: bottomPosition
1480
+ ? "initial!important"
1481
+ : "".concat(topPosition - overlayRect_1.top, "px"),
1473
1482
  }, dropAreaArrowRef);
1474
1483
  }
1475
1484
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@speakapbv/dough-component-library",
3
- "version": "10.12.2",
3
+ "version": "10.12.3",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",