@kaizen/components 1.79.7 → 1.79.8

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/dist/cjs/src/Modal/GenericModal/GenericModal.cjs +11 -1
  2. package/dist/esm/src/Modal/GenericModal/GenericModal.mjs +11 -1
  3. package/dist/styles.css +20 -20
  4. package/package.json +1 -1
  5. package/src/Modal/GenericModal/GenericModal.tsx +18 -1
package/dist/cjs/src/Modal/GenericModal/GenericModal.cjs CHANGED
@@ -5,6 +5,7 @@ var ReactDOM = require('react-dom');
5
5
  var react = require('@headlessui/react');
6
6
  var classnames = require('classnames');
7
7
  var FocusLock = require('react-focus-lock');
8
+ var useIsClientReady = require('../../utils/useIsClientReady/useIsClientReady.cjs');
8
9
  var console = require('../util/console.cjs');
9
10
  var ModalContext = require('./context/ModalContext.cjs');
10
11
  var GenericModal_module = require('./GenericModal.module.scss.cjs');
@@ -31,6 +32,7 @@ var GenericModal = function (_a) {
31
32
  var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
32
33
  var labelledByID = React.useId();
33
34
  var describedByID = React.useId();
35
+ var isClientReady = useIsClientReady.useIsClientReady();
34
36
  var _c = React.useState(null),
35
37
  scrollLayer = _c[0],
36
38
  setScrollLayer = _c[1];
@@ -52,6 +54,7 @@ var GenericModal = function (_a) {
52
54
  }
53
55
  };
54
56
  var focusOnAccessibleLabel = function () {
57
+ if (!isClientReady) return;
55
58
  // Check if focus already exists within the modal
56
59
  if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
57
60
  return;
@@ -60,6 +63,7 @@ var GenericModal = function (_a) {
60
63
  labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
61
64
  };
62
65
  var a11yWarn = function () {
66
+ if (!isClientReady) return;
63
67
  // Ensure that consumers have provided an element that labels the modal
64
68
  // to meet ARIA accessibility guidelines.
65
69
  if (!document.getElementById(labelledByID)) {
@@ -68,6 +72,7 @@ var GenericModal = function (_a) {
68
72
  };
69
73
  var preventBodyScroll = function () {
70
74
  var _a;
75
+ if (!isClientReady) return;
71
76
  var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
72
77
  var scrollStyles = [GenericModal_module.unscrollable];
73
78
  if (hasScrollbar) {
@@ -90,11 +95,12 @@ var GenericModal = function (_a) {
90
95
  }, [onEscapeKeyup]);
91
96
  var onBeforeEnterHandler = function () {
92
97
  preventBodyScroll();
93
- if (onEscapeKeyup) {
98
+ if (onEscapeKeyup && isClientReady) {
94
99
  document.addEventListener('keyup', escapeKeyHandler);
95
100
  }
96
101
  };
97
102
  var cleanUpAfterClose = function () {
103
+ if (!isClientReady) return;
98
104
  document.documentElement.classList.remove(GenericModal_module.unscrollable, GenericModal_module.pseudoScrollbar);
99
105
  if (onEscapeKeyup) {
100
106
  document.removeEventListener('keyup', escapeKeyHandler);
@@ -112,6 +118,10 @@ var GenericModal = function (_a) {
112
118
  cleanUpAfterClose();
113
119
  propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();
114
120
  };
121
+ // Don't render portal during SSR
122
+ if (!isClientReady) {
123
+ return React__default.default.createElement(React__default.default.Fragment, null);
124
+ }
115
125
  return ReactDOM.createPortal(React__default.default.createElement(react.Transition, {
116
126
  appear: true,
117
127
  show: isOpen,
package/dist/esm/src/Modal/GenericModal/GenericModal.mjs CHANGED
@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
3
3
  import { Transition } from '@headlessui/react';
4
4
  import classnames from 'classnames';
5
5
  import FocusLock from 'react-focus-lock';
6
+ import { useIsClientReady } from '../../utils/useIsClientReady/useIsClientReady.mjs';
6
7
  import { warn } from '../util/console.mjs';
7
8
  import { ModalContext } from './context/ModalContext.mjs';
8
9
  import styles from './GenericModal.module.scss.mjs';
@@ -22,6 +23,7 @@ const GenericModal = /*#__PURE__*/function () {
22
23
  var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
23
24
  var labelledByID = useId();
24
25
  var describedByID = useId();
26
+ var isClientReady = useIsClientReady();
25
27
  var _c = useState(null),
26
28
  scrollLayer = _c[0],
27
29
  setScrollLayer = _c[1];
@@ -43,6 +45,7 @@ const GenericModal = /*#__PURE__*/function () {
43
45
  }
44
46
  };
45
47
  var focusOnAccessibleLabel = function () {
48
+ if (!isClientReady) return;
46
49
  // Check if focus already exists within the modal
47
50
  if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
48
51
  return;
@@ -51,6 +54,7 @@ const GenericModal = /*#__PURE__*/function () {
51
54
  labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
52
55
  };
53
56
  var a11yWarn = function () {
57
+ if (!isClientReady) return;
54
58
  // Ensure that consumers have provided an element that labels the modal
55
59
  // to meet ARIA accessibility guidelines.
56
60
  if (!document.getElementById(labelledByID)) {
@@ -59,6 +63,7 @@ const GenericModal = /*#__PURE__*/function () {
59
63
  };
60
64
  var preventBodyScroll = function () {
61
65
  var _a;
66
+ if (!isClientReady) return;
62
67
  var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
63
68
  var scrollStyles = [styles.unscrollable];
64
69
  if (hasScrollbar) {
@@ -81,11 +86,12 @@ const GenericModal = /*#__PURE__*/function () {
81
86
  }, [onEscapeKeyup]);
82
87
  var onBeforeEnterHandler = function () {
83
88
  preventBodyScroll();
84
- if (onEscapeKeyup) {
89
+ if (onEscapeKeyup && isClientReady) {
85
90
  document.addEventListener('keyup', escapeKeyHandler);
86
91
  }
87
92
  };
88
93
  var cleanUpAfterClose = function () {
94
+ if (!isClientReady) return;
89
95
  document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar);
90
96
  if (onEscapeKeyup) {
91
97
  document.removeEventListener('keyup', escapeKeyHandler);
@@ -103,6 +109,10 @@ const GenericModal = /*#__PURE__*/function () {
103
109
  cleanUpAfterClose();
104
110
  propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();
105
111
  };
112
+ // Don't render portal during SSR
113
+ if (!isClientReady) {
114
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
115
+ }
106
116
  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Transition, {
107
117
  appear: true,
108
118
  show: isOpen,
package/dist/styles.css CHANGED
@@ -10,10 +10,22 @@
10
10
  }
11
11
 
12
12
  @layer kz-components {
13
- .List-module_list__bbFPn {
14
- display: flex;
15
- flex-direction: column;
16
- gap: var(--spacing-16);
13
+ .ListSection-module_listSectionHeader__bptHg {
14
+ font-family: var(--typography-heading-5-font-family);
15
+ font-weight: var(--typography-heading-5-font-weight);
16
+ font-size: var(--typography-heading-5-font-size);
17
+ line-height: var(--typography-heading-5-line-height);
18
+ letter-spacing: var(--typography-heading-5-letter-spacing);
19
+ }
20
+ }
21
+
22
+ @layer kz-components {
23
+ .ListItem-module_listItem__xGr6A {
24
+ font-family: var(--typography-paragraph-body-font-family);
25
+ font-weight: var(--typography-paragraph-body-font-weight);
26
+ font-size: var(--typography-paragraph-body-font-size);
27
+ line-height: var(--typography-paragraph-body-line-height);
28
+ letter-spacing: var(--typography-paragraph-body-letter-spacing);
17
29
  }
18
30
  }
19
31
 
@@ -37,22 +49,10 @@
37
49
  }
38
50
 
39
51
  @layer kz-components {
40
- .ListItem-module_listItem__xGr6A {
41
- font-family: var(--typography-paragraph-body-font-family);
42
- font-weight: var(--typography-paragraph-body-font-weight);
43
- font-size: var(--typography-paragraph-body-font-size);
44
- line-height: var(--typography-paragraph-body-line-height);
45
- letter-spacing: var(--typography-paragraph-body-letter-spacing);
46
- }
47
- }
48
-
49
- @layer kz-components {
50
- .ListSection-module_listSectionHeader__bptHg {
51
- font-family: var(--typography-heading-5-font-family);
52
- font-weight: var(--typography-heading-5-font-weight);
53
- font-size: var(--typography-heading-5-font-size);
54
- line-height: var(--typography-heading-5-line-height);
55
- letter-spacing: var(--typography-heading-5-letter-spacing);
52
+ .List-module_list__bbFPn {
53
+ display: flex;
54
+ flex-direction: column;
55
+ gap: var(--spacing-16);
56
56
  }
57
57
  }
58
58
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "1.79.7",
3
+ "version": "1.79.8",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
package/src/Modal/GenericModal/GenericModal.tsx CHANGED
@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'
3
3
  import { Transition } from '@headlessui/react'
4
4
  import classnames from 'classnames'
5
5
  import FocusLock from 'react-focus-lock'
6
+ import { useIsClientReady } from '../../utils/useIsClientReady'
6
7
  import { warn } from '../util/console'
7
8
  import { ModalContext } from './context/ModalContext'
8
9
  import styles from './GenericModal.module.scss'
@@ -38,6 +39,8 @@ export const GenericModal = ({
38
39
  const labelledByID = useId()
39
40
  const describedByID = useId()
40
41
 
42
+ const isClientReady = useIsClientReady()
43
+
41
44
  const [scrollLayer, setScrollLayer] = useState<HTMLDivElement | null>(null)
42
45
  const [modalLayer, setModalLayer] = useState<HTMLDivElement | null>(null)
43
46
 
@@ -58,6 +61,8 @@ export const GenericModal = ({
58
61
  }
59
62
 
60
63
  const focusOnAccessibleLabel = (): void => {
64
+ if (!isClientReady) return
65
+
61
66
  // Check if focus already exists within the modal
62
67
  if (modalLayer?.contains(document.activeElement)) {
63
68
  return
@@ -69,6 +74,8 @@ export const GenericModal = ({
69
74
  }
70
75
 
71
76
  const a11yWarn = (): void => {
77
+ if (!isClientReady) return
78
+
72
79
  // Ensure that consumers have provided an element that labels the modal
73
80
  // to meet ARIA accessibility guidelines.
74
81
  if (!document.getElementById(labelledByID)) {
@@ -80,6 +87,8 @@ export const GenericModal = ({
80
87
  }
81
88
 
82
89
  const preventBodyScroll = (): void => {
90
+ if (!isClientReady) return
91
+
83
92
  const hasScrollbar = window.innerWidth > document.documentElement.clientWidth
84
93
  const scrollStyles = [styles.unscrollable]
85
94
 
@@ -111,12 +120,14 @@ export const GenericModal = ({
111
120
  const onBeforeEnterHandler = (): void => {
112
121
  preventBodyScroll()
113
122
 
114
- if (onEscapeKeyup) {
123
+ if (onEscapeKeyup && isClientReady) {
115
124
  document.addEventListener('keyup', escapeKeyHandler)
116
125
  }
117
126
  }
118
127
 
119
128
  const cleanUpAfterClose = (): void => {
129
+ if (!isClientReady) return
130
+
120
131
  document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar)
121
132
 
122
133
  if (onEscapeKeyup) {
@@ -133,6 +144,12 @@ export const GenericModal = ({
133
144
  cleanUpAfterClose()
134
145
  propsOnAfterLeave?.()
135
146
  }
147
+
148
+ // Don't render portal during SSR
149
+ if (!isClientReady) {
150
+ return <></>
151
+ }
152
+
136
153
  return createPortal(
137
154
  <Transition
138
155
  appear={true}