@citygross/components 0.17.11 → 0.17.12

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 (5) hide show
  1. package/build/cjs/components/src/components/Modal/Modal.js +17 -5
  2. package/build/cjs/components/src/components/Modal/Modal.js.map +1 -1
  3. package/build/es/components/src/components/Modal/Modal.js +19 -7
  4. package/build/es/components/src/components/Modal/Modal.js.map +1 -1
  5. package/package.json +2 -2
package/build/cjs/components/src/components/Modal/Modal.js CHANGED
@@ -37,18 +37,21 @@ var Modal = function (_a) {
37
37
  var _b, _c, _d;
38
38
  var children = _a.children, inertSelectors = _a.inertSelectors, _e = _a.labelCancel, labelCancel = _e === void 0 ? 'Avbryt' : _e, _f = _a.labelCta, labelCta = _f === void 0 ? 'Okej' : _f, _g = _a.noOverlay, noOverlay = _g === void 0 ? false : _g, onClose = _a.onClose, onConfirm = _a.onConfirm, portalHostSelector = _a.portalHostSelector, _h = _a.size, size = _h === void 0 ? exports.EModalSize.medium : _h, title = _a.title, variant = _a.variant;
39
39
  var titleId = React.useId();
40
+ var dialogRef = React.useRef(null);
40
41
  var previouslyFocusedElement = React.useRef(null);
42
+ var onCloseRef = React.useRef(onClose);
43
+ onCloseRef.current = onClose;
41
44
  var portalRoot = React.useMemo(function () { return getPortalRoot(portalHostSelector); }, [portalHostSelector]);
42
- React.useEffect(function () {
45
+ React.useLayoutEffect(function () {
43
46
  if (typeof document === 'undefined')
44
47
  return;
48
+ previouslyFocusedElement.current = document.activeElement;
45
49
  var inertElements = Array.from(new Set(inertSelectors.flatMap(function (id) {
46
50
  var element = document.getElementById(id);
47
51
  return element ? [element] : [];
48
52
  })));
49
53
  var body = document.body;
50
54
  var html = document.documentElement;
51
- previouslyFocusedElement.current = document.activeElement;
52
55
  var restoreInert = utils.toggleInert({
53
56
  elements: inertElements,
54
57
  isInert: true
@@ -58,8 +61,17 @@ var Modal = function (_a) {
58
61
  body.style.overflow = 'hidden';
59
62
  html.style.overflow = 'hidden';
60
63
  var handleEscape = function (event) {
61
- return utils.escapeKeyboardEventHandler({ event: event, onEscape: onClose });
64
+ return utils.escapeKeyboardEventHandler({
65
+ event: event,
66
+ onEscape: function () {
67
+ var _a;
68
+ (_a = onCloseRef.current) === null || _a === void 0 ? void 0 : _a.call(onCloseRef);
69
+ }
70
+ });
62
71
  };
72
+ var root = dialogRef.current;
73
+ var first = root === null || root === void 0 ? void 0 : root.querySelector(utils.focusableSelectors);
74
+ first === null || first === void 0 ? void 0 : first.focus();
63
75
  document.addEventListener('keydown', handleEscape);
64
76
  return function () {
65
77
  restoreInert();
@@ -70,7 +82,7 @@ var Modal = function (_a) {
70
82
  previouslyFocusedElement.current.focus();
71
83
  }
72
84
  };
73
- }, [inertSelectors, onClose]);
85
+ }, [inertSelectors]);
74
86
  if (!portalRoot)
75
87
  return null;
76
88
  var cancelButton = (React__default["default"].createElement(CgButton.CgButton, { onClick: onClose, variant: CgButton_types.EButtonVariant.secondary }, labelCancel));
@@ -80,7 +92,7 @@ var Modal = function (_a) {
80
92
  }
81
93
  };
82
94
  return reactDom.createPortal(React__default["default"].createElement(Modal_styles.Overlay, { noOverlay: noOverlay, onMouseDown: handleBackdropMouseDown },
83
- React__default["default"].createElement(Modal_styles.Frame, { "aria-labelledby": titleId, "aria-modal": "true", role: variant === exports.EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
95
+ React__default["default"].createElement(Modal_styles.Frame, { ref: dialogRef, "aria-labelledby": titleId, "aria-modal": "true", role: variant === exports.EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
84
96
  React__default["default"].createElement(Modal_styles.Header, null,
85
97
  React__default["default"].createElement(Modal_styles.Title, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
86
98
  variant !== exports.EModalVariant.destructive && (React__default["default"].createElement(CgButton.CgButton, { "aria-label": labelCancel, circle: true, onClick: onClose, variant: CgButton_types.EButtonVariant.ghost },
package/build/cjs/components/src/components/Modal/Modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/Modal/Modal.js CHANGED
@@ -1,8 +1,8 @@
1
- import React, { useId, useRef, useMemo, useEffect } from 'react';
1
+ import React, { useId, useRef, useMemo, useLayoutEffect } from 'react';
2
2
  import { createPortal } from 'react-dom';
3
3
  import { theme } from '@citygross/design-tokens';
4
4
  import { Icons } from '@citygross/icons';
5
- import { toggleInert, escapeKeyboardEventHandler } from '@citygross/utils';
5
+ import { toggleInert, focusableSelectors, escapeKeyboardEventHandler } from '@citygross/utils';
6
6
  import { CgButton } from '../CgButton/CgButton.js';
7
7
  import { Overlay, Frame, Header, Title, Footer } from './Modal.styles.js';
8
8
  import { EButtonVariant } from '../CgButton/CgButton.types.js';
@@ -29,18 +29,21 @@ var Modal = function (_a) {
29
29
  var _b, _c, _d;
30
30
  var children = _a.children, inertSelectors = _a.inertSelectors, _e = _a.labelCancel, labelCancel = _e === void 0 ? 'Avbryt' : _e, _f = _a.labelCta, labelCta = _f === void 0 ? 'Okej' : _f, _g = _a.noOverlay, noOverlay = _g === void 0 ? false : _g, onClose = _a.onClose, onConfirm = _a.onConfirm, portalHostSelector = _a.portalHostSelector, _h = _a.size, size = _h === void 0 ? EModalSize.medium : _h, title = _a.title, variant = _a.variant;
31
31
  var titleId = useId();
32
+ var dialogRef = useRef(null);
32
33
  var previouslyFocusedElement = useRef(null);
34
+ var onCloseRef = useRef(onClose);
35
+ onCloseRef.current = onClose;
33
36
  var portalRoot = useMemo(function () { return getPortalRoot(portalHostSelector); }, [portalHostSelector]);
34
- useEffect(function () {
37
+ useLayoutEffect(function () {
35
38
  if (typeof document === 'undefined')
36
39
  return;
40
+ previouslyFocusedElement.current = document.activeElement;
37
41
  var inertElements = Array.from(new Set(inertSelectors.flatMap(function (id) {
38
42
  var element = document.getElementById(id);
39
43
  return element ? [element] : [];
40
44
  })));
41
45
  var body = document.body;
42
46
  var html = document.documentElement;
43
- previouslyFocusedElement.current = document.activeElement;
44
47
  var restoreInert = toggleInert({
45
48
  elements: inertElements,
46
49
  isInert: true
@@ -50,8 +53,17 @@ var Modal = function (_a) {
50
53
  body.style.overflow = 'hidden';
51
54
  html.style.overflow = 'hidden';
52
55
  var handleEscape = function (event) {
53
- return escapeKeyboardEventHandler({ event: event, onEscape: onClose });
56
+ return escapeKeyboardEventHandler({
57
+ event: event,
58
+ onEscape: function () {
59
+ var _a;
60
+ (_a = onCloseRef.current) === null || _a === void 0 ? void 0 : _a.call(onCloseRef);
61
+ }
62
+ });
54
63
  };
64
+ var root = dialogRef.current;
65
+ var first = root === null || root === void 0 ? void 0 : root.querySelector(focusableSelectors);
66
+ first === null || first === void 0 ? void 0 : first.focus();
55
67
  document.addEventListener('keydown', handleEscape);
56
68
  return function () {
57
69
  restoreInert();
@@ -62,7 +74,7 @@ var Modal = function (_a) {
62
74
  previouslyFocusedElement.current.focus();
63
75
  }
64
76
  };
65
- }, [inertSelectors, onClose]);
77
+ }, [inertSelectors]);
66
78
  if (!portalRoot)
67
79
  return null;
68
80
  var cancelButton = (React.createElement(CgButton, { onClick: onClose, variant: EButtonVariant.secondary }, labelCancel));
@@ -72,7 +84,7 @@ var Modal = function (_a) {
72
84
  }
73
85
  };
74
86
  return createPortal(React.createElement(Overlay, { noOverlay: noOverlay, onMouseDown: handleBackdropMouseDown },
75
- React.createElement(Frame, { "aria-labelledby": titleId, "aria-modal": "true", role: variant === EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
87
+ React.createElement(Frame, { ref: dialogRef, "aria-labelledby": titleId, "aria-modal": "true", role: variant === EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
76
88
  React.createElement(Header, null,
77
89
  React.createElement(Title, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
78
90
  variant !== EModalVariant.destructive && (React.createElement(CgButton, { "aria-label": labelCancel, circle: true, onClick: onClose, variant: EButtonVariant.ghost },
package/build/es/components/src/components/Modal/Modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.17.11",
3
+ "version": "0.17.12",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
76
76
  "react-slick": "^0.30.1",
77
77
  "slick-carousel": "^1.8.1"
78
78
  },
79
- "gitHead": "d1224ee4e015cf7efc3739beefc37e5f6132d63b"
79
+ "gitHead": "3d6105e54543744d45aef0c455fbf83ce788d1e4"
80
80
  }