@deque/cauldron-react 6.4.2-canary.eaeac9f4 → 6.4.2-canary.eb0a056f

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.
@@ -35,6 +35,9 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
35
35
  close(): void;
36
36
  handleClickOutside(): void;
37
37
  focusHeading(): void;
38
+ private handleEscape;
39
+ private attachEventListeners;
40
+ private removeEventListeners;
38
41
  }
39
42
  interface DialogAlignmentProps {
40
43
  align?: 'left' | 'center' | 'right';
@@ -5,6 +5,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
5
5
  totalItems: number;
6
6
  itemsPerPage?: number;
7
7
  currentPage?: number;
8
+ hideStartEndPagination?: boolean;
8
9
  statusLabel?: ContentNode;
9
10
  firstPageLabel?: ContentNode;
10
11
  previousPageLabel?: ContentNode;
package/lib/index.js CHANGED
@@ -1386,6 +1386,9 @@ var AriaIsolate = /** @class */ (function () {
1386
1386
  return AriaIsolate;
1387
1387
  }());
1388
1388
 
1389
+ var isEscape = function (event) {
1390
+ return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
1391
+ };
1389
1392
  var noop = function () {
1390
1393
  //not empty
1391
1394
  };
@@ -1397,24 +1400,29 @@ var Dialog = /** @class */ (function (_super) {
1397
1400
  _this.close = _this.close.bind(_this);
1398
1401
  _this.focusHeading = _this.focusHeading.bind(_this);
1399
1402
  _this.handleClickOutside = _this.handleClickOutside.bind(_this);
1403
+ _this.handleEscape = _this.handleEscape.bind(_this);
1400
1404
  _this.state = {};
1401
1405
  return _this;
1402
1406
  }
1403
1407
  Dialog.prototype.componentDidMount = function () {
1404
1408
  var _this = this;
1405
1409
  if (this.props.show) {
1410
+ this.attachEventListeners();
1406
1411
  this.attachIsolator(function () { return setTimeout(_this.focusHeading); });
1407
1412
  }
1408
1413
  };
1409
1414
  Dialog.prototype.componentWillUnmount = function () {
1410
1415
  var isolator = this.state.isolator;
1411
1416
  isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
1417
+ this.removeEventListeners();
1412
1418
  };
1413
1419
  Dialog.prototype.componentDidUpdate = function (prevProps) {
1414
1420
  if (!prevProps.show && this.props.show) {
1415
1421
  this.attachIsolator(this.focusHeading);
1422
+ this.attachEventListeners();
1416
1423
  }
1417
1424
  else if (prevProps.show && !this.props.show) {
1425
+ this.removeEventListeners();
1418
1426
  this.close();
1419
1427
  }
1420
1428
  };
@@ -1438,8 +1446,7 @@ var Dialog = /** @class */ (function (_super) {
1438
1446
  : 2);
1439
1447
  var Dialog = (React__default["default"].createElement(FocusTrap__default["default"], { focusTrapOptions: {
1440
1448
  allowOutsideClick: true,
1441
- onDeactivate: this.close,
1442
- escapeDeactivates: !forceAction,
1449
+ escapeDeactivates: false,
1443
1450
  fallbackFocus: '.Dialog__heading'
1444
1451
  } },
1445
1452
  React__default["default"].createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside },
@@ -1481,6 +1488,24 @@ var Dialog = /** @class */ (function (_super) {
1481
1488
  }
1482
1489
  (_a = this.state.isolator) === null || _a === void 0 ? void 0 : _a.activate();
1483
1490
  };
1491
+ Dialog.prototype.handleEscape = function (keyboardEvent) {
1492
+ if (!keyboardEvent.defaultPrevented && isEscape(keyboardEvent)) {
1493
+ this.close();
1494
+ }
1495
+ };
1496
+ Dialog.prototype.attachEventListeners = function () {
1497
+ var forceAction = this.props.forceAction;
1498
+ if (!forceAction) {
1499
+ var portal = this.props.portal || document.body;
1500
+ var targetElement = portal instanceof HTMLElement ? portal : portal.current;
1501
+ targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('keyup', this.handleEscape);
1502
+ }
1503
+ };
1504
+ Dialog.prototype.removeEventListeners = function () {
1505
+ var portal = this.props.portal || document.body;
1506
+ var targetElement = portal instanceof HTMLElement ? portal : portal.current;
1507
+ targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('keyup', this.handleEscape);
1508
+ };
1484
1509
  Dialog.defaultProps = {
1485
1510
  onClose: noop,
1486
1511
  forceAction: false,
@@ -1733,6 +1758,7 @@ function Tooltip(_a) {
1733
1758
  if (event.key === 'Escape' ||
1734
1759
  event.key === 'Esc' ||
1735
1760
  event.keyCode === 27) {
1761
+ event.preventDefault();
1736
1762
  setShowTooltip(false);
1737
1763
  }
1738
1764
  };
@@ -2906,7 +2932,7 @@ var AddressCityStateZip = function (_a) {
2906
2932
  AddressCityStateZip.displayName = 'AddressCityStateZip';
2907
2933
 
2908
2934
  var Pagination = React__default["default"].forwardRef(function (_a, ref) {
2909
- var totalItems = _a.totalItems, _b = _a.itemsPerPage, itemsPerPage = _b === void 0 ? 10 : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, statusLabel = _a.statusLabel, _d = _a.firstPageLabel, firstPageLabel = _d === void 0 ? 'First page' : _d, _e = _a.previousPageLabel, previousPageLabel = _e === void 0 ? 'Previous page' : _e, _f = _a.nextPageLabel, nextPageLabel = _f === void 0 ? 'Next page' : _f, _g = _a.lastPageLabel, lastPageLabel = _g === void 0 ? 'Last page' : _g, _h = _a.tooltipPlacement, tooltipPlacement = _h === void 0 ? 'bottom' : _h, onNextPageClick = _a.onNextPageClick, onPreviousPageClick = _a.onPreviousPageClick, onFirstPageClick = _a.onFirstPageClick, onLastPageClick = _a.onLastPageClick, className = _a.className, _j = _a.thin, thin = _j === void 0 ? false : _j, other = tslib.__rest(_a, ["totalItems", "itemsPerPage", "currentPage", "statusLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "tooltipPlacement", "onNextPageClick", "onPreviousPageClick", "onFirstPageClick", "onLastPageClick", "className", "thin"]);
2935
+ var totalItems = _a.totalItems, _b = _a.itemsPerPage, itemsPerPage = _b === void 0 ? 10 : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, _d = _a.hideStartEndPagination, hideStartEndPagination = _d === void 0 ? false : _d, statusLabel = _a.statusLabel, _e = _a.firstPageLabel, firstPageLabel = _e === void 0 ? 'First page' : _e, _f = _a.previousPageLabel, previousPageLabel = _f === void 0 ? 'Previous page' : _f, _g = _a.nextPageLabel, nextPageLabel = _g === void 0 ? 'Next page' : _g, _h = _a.lastPageLabel, lastPageLabel = _h === void 0 ? 'Last page' : _h, _j = _a.tooltipPlacement, tooltipPlacement = _j === void 0 ? 'bottom' : _j, onNextPageClick = _a.onNextPageClick, onPreviousPageClick = _a.onPreviousPageClick, onFirstPageClick = _a.onFirstPageClick, onLastPageClick = _a.onLastPageClick, className = _a.className, _k = _a.thin, thin = _k === void 0 ? false : _k, other = tslib.__rest(_a, ["totalItems", "itemsPerPage", "currentPage", "hideStartEndPagination", "statusLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "tooltipPlacement", "onNextPageClick", "onPreviousPageClick", "onFirstPageClick", "onLastPageClick", "className", "thin"]);
2910
2936
  var itemStart = currentPage * itemsPerPage - itemsPerPage + 1;
2911
2937
  var itemEnd = Math.min(itemStart + itemsPerPage - 1, totalItems);
2912
2938
  var isLastPage = itemEnd === totalItems;
@@ -2915,8 +2941,8 @@ var Pagination = React__default["default"].forwardRef(function (_a, ref) {
2915
2941
  'Pagination--thin': thin
2916
2942
  }) }, other),
2917
2943
  React__default["default"].createElement("ul", null,
2918
- React__default["default"].createElement("li", null,
2919
- React__default["default"].createElement(IconButton, { icon: "chevron-double-left", tooltipProps: { placement: tooltipPlacement }, label: firstPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onFirstPageClick })),
2944
+ !hideStartEndPagination && (React__default["default"].createElement("li", null,
2945
+ React__default["default"].createElement(IconButton, { icon: "chevron-double-left", tooltipProps: { placement: tooltipPlacement }, label: firstPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onFirstPageClick }))),
2920
2946
  React__default["default"].createElement("li", null,
2921
2947
  React__default["default"].createElement(IconButton, { icon: "chevron-left", tooltipProps: { placement: tooltipPlacement }, label: previousPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onPreviousPageClick })),
2922
2948
  React__default["default"].createElement("li", null,
@@ -2930,8 +2956,8 @@ var Pagination = React__default["default"].forwardRef(function (_a, ref) {
2930
2956
  React__default["default"].createElement("strong", null, totalItems))))),
2931
2957
  React__default["default"].createElement("li", null,
2932
2958
  React__default["default"].createElement(IconButton, { icon: "chevron-right", tooltipProps: { placement: tooltipPlacement }, label: nextPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onNextPageClick })),
2933
- React__default["default"].createElement("li", null,
2934
- React__default["default"].createElement(IconButton, { icon: "chevron-double-right", tooltipProps: { placement: tooltipPlacement }, label: lastPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onLastPageClick })))));
2959
+ !hideStartEndPagination && (React__default["default"].createElement("li", null,
2960
+ React__default["default"].createElement(IconButton, { icon: "chevron-double-right", tooltipProps: { placement: tooltipPlacement }, label: lastPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onLastPageClick }))))));
2935
2961
  });
2936
2962
  Pagination.displayName = 'Pagination';
2937
2963
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deque/cauldron-react",
3
- "version": "6.4.2-canary.eaeac9f4",
3
+ "version": "6.4.2-canary.eb0a056f",
4
4
  "license": "MPL-2.0",
5
5
  "description": "Fully accessible react components library for Deque Cauldron",
6
6
  "homepage": "https://cauldron.dequelabs.com/",