@kaizen/components 1.43.0 → 1.45.0

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 (30) hide show
  1. package/dist/cjs/Button/IconButton/IconButton.cjs +5 -3
  2. package/dist/cjs/Modal/ConfirmationModal/ConfirmationModal.cjs +4 -2
  3. package/dist/cjs/Modal/ContextModal/ContextModal.cjs +4 -2
  4. package/dist/cjs/Modal/GenericModal/GenericModal.cjs +12 -9
  5. package/dist/cjs/Modal/InputEditModal/InputEditModal.cjs +4 -2
  6. package/dist/cjs/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.cjs +5 -1
  7. package/dist/cjs/index.css +1 -1
  8. package/dist/esm/Button/IconButton/IconButton.mjs +6 -4
  9. package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.mjs +4 -2
  10. package/dist/esm/Modal/ContextModal/ContextModal.mjs +4 -2
  11. package/dist/esm/Modal/GenericModal/GenericModal.mjs +12 -9
  12. package/dist/esm/Modal/InputEditModal/InputEditModal.mjs +4 -2
  13. package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.mjs +5 -1
  14. package/dist/esm/index.css +1 -1
  15. package/dist/styles.css +1 -1
  16. package/dist/types/Button/IconButton/IconButton.d.ts +3 -13
  17. package/dist/types/Modal/ConfirmationModal/ConfirmationModal.d.ts +4 -1
  18. package/dist/types/Modal/ContextModal/ContextModal.d.ts +4 -1
  19. package/dist/types/Modal/GenericModal/GenericModal.d.ts +4 -1
  20. package/dist/types/Modal/InputEditModal/InputEditModal.d.ts +4 -1
  21. package/package.json +3 -3
  22. package/src/Button/IconButton/IconButton.tsx +6 -3
  23. package/src/Modal/ConfirmationModal/ConfirmationModal.tsx +5 -0
  24. package/src/Modal/ContextModal/ContextModal.tsx +5 -0
  25. package/src/Modal/GenericModal/GenericModal.tsx +18 -10
  26. package/src/Modal/GenericModal/_docs/GenericModal.spec.stories.tsx +124 -0
  27. package/src/Modal/InputEditModal/InputEditModal.tsx +5 -0
  28. package/src/Modal/InputEditModal/_docs/InputEditModal.mdx +11 -0
  29. package/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx +63 -1
  30. package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.tsx +1 -0
package/dist/cjs/Button/IconButton/IconButton.cjs CHANGED
@@ -14,11 +14,13 @@ var React__default = /*#__PURE__*/_interopDefault(React);
14
14
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
15
15
  * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
16
16
  */
17
- var IconButton = function (props) {
17
+ var IconButton = React.forwardRef(function (props, ref) {
18
18
  return React__default.default.createElement(GenericButton.GenericButton, tslib.__assign({
19
19
  iconButton: true
20
- }, props));
21
- };
20
+ }, props, {
21
+ ref: ref
22
+ }));
23
+ });
22
24
  IconButton.defaultProps = {
23
25
  primary: false,
24
26
  destructive: false,
package/dist/cjs/Modal/ConfirmationModal/ConfirmationModal.cjs CHANGED
@@ -70,6 +70,7 @@ var ConfirmationModal = function (_a) {
70
70
  title = _a.title,
71
71
  onConfirm = _a.onConfirm,
72
72
  onAfterLeave = _a.onAfterLeave,
73
+ onAfterEnter = _a.onAfterEnter,
73
74
  _d = _a.confirmLabel,
74
75
  confirmLabel = _d === void 0 ? "Confirm" : _d,
75
76
  _e = _a.dismissLabel,
@@ -77,7 +78,7 @@ var ConfirmationModal = function (_a) {
77
78
  confirmWorking = _a.confirmWorking,
78
79
  propsOnDismiss = _a.onDismiss,
79
80
  children = _a.children,
80
- props = tslib.__rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "title", "onConfirm", "onAfterLeave", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
81
+ props = tslib.__rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "title", "onConfirm", "onAfterLeave", "onAfterEnter", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
81
82
  var onDismiss = confirmWorking ? undefined : propsOnDismiss;
82
83
  var footerActions = [];
83
84
  if (onConfirm) {
@@ -101,7 +102,8 @@ var ConfirmationModal = function (_a) {
101
102
  isOpen: isOpen,
102
103
  onEscapeKeyup: onDismiss,
103
104
  onOutsideModalClick: onDismiss,
104
- onAfterLeave: onAfterLeave
105
+ onAfterLeave: onAfterLeave,
106
+ onAfterEnter: onAfterEnter
105
107
  }, React__default.default.createElement("div", tslib.__assign({
106
108
  className: ConfirmationModal_module.modal,
107
109
  "data-modal": true
package/dist/cjs/Modal/ContextModal/ContextModal.cjs CHANGED
@@ -34,6 +34,7 @@ var ContextModal = function (_a) {
34
34
  onConfirm = _a.onConfirm,
35
35
  propsOnDismiss = _a.onDismiss,
36
36
  onAfterLeave = _a.onAfterLeave,
37
+ onAfterEnter = _a.onAfterEnter,
37
38
  _d = _a.confirmLabel,
38
39
  confirmLabel = _d === void 0 ? "Confirm" : _d,
39
40
  confirmWorking = _a.confirmWorking,
@@ -43,7 +44,7 @@ var ContextModal = function (_a) {
43
44
  image = _a.image,
44
45
  secondaryLabel = _a.secondaryLabel,
45
46
  onSecondaryAction = _a.onSecondaryAction,
46
- props = tslib.__rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction"]);
47
+ props = tslib.__rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "onAfterEnter", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction"]);
47
48
  var onDismiss = confirmWorking ? undefined : propsOnDismiss;
48
49
  var footerActions = [];
49
50
  var workingProps = confirmWorking ? {
@@ -69,7 +70,8 @@ var ContextModal = function (_a) {
69
70
  isOpen: isOpen,
70
71
  onEscapeKeyup: onDismiss,
71
72
  onOutsideModalClick: onDismiss,
72
- onAfterLeave: onAfterLeave
73
+ onAfterLeave: onAfterLeave,
74
+ onAfterEnter: onAfterEnter
73
75
  }, React__default.default.createElement("div", tslib.__assign({
74
76
  className: ContextModal_module.modal,
75
77
  "data-modal": true
package/dist/cjs/Modal/GenericModal/GenericModal.cjs CHANGED
@@ -22,6 +22,7 @@ var GenericModal = function (_a) {
22
22
  focusLockDisabled = _a.focusLockDisabled,
23
23
  onEscapeKeyup = _a.onEscapeKeyup,
24
24
  onOutsideModalClick = _a.onOutsideModalClick,
25
+ onAfterEnter = _a.onAfterEnter,
25
26
  propsOnAfterLeave = _a.onAfterLeave;
26
27
  var reactId = React.useId();
27
28
  var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
@@ -47,16 +48,15 @@ var GenericModal = function (_a) {
47
48
  onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(event);
48
49
  }
49
50
  };
50
- var focusAccessibleLabel = function () {
51
- if (modalLayer) {
52
- var labelElement = document.getElementById(labelledByID);
53
- if (labelElement) {
54
- labelElement.focus();
55
- }
51
+ var focusOnAccessibleLabel = function () {
52
+ // Check if focus already exists within the modal
53
+ if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
54
+ return;
56
55
  }
56
+ var labelElement = document.getElementById(labelledByID);
57
+ labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
57
58
  };
58
59
  var a11yWarn = function () {
59
- if (!modalLayer) return;
60
60
  // Ensure that consumers have provided an element that labels the modal
61
61
  // to meet ARIA accessibility guidelines.
62
62
  if (!document.getElementById(labelledByID)) {
@@ -74,8 +74,11 @@ var GenericModal = function (_a) {
74
74
  };
75
75
  var onAfterEnterHandler = function () {
76
76
  scrollModalToTop();
77
- focusAccessibleLabel();
78
- a11yWarn();
77
+ if (modalLayer) {
78
+ onAfterEnter === null || onAfterEnter === void 0 ? void 0 : onAfterEnter();
79
+ focusOnAccessibleLabel();
80
+ a11yWarn();
81
+ }
79
82
  };
80
83
  var onBeforeEnterHandler = function () {
81
84
  preventBodyScroll();
package/dist/cjs/Modal/InputEditModal/InputEditModal.cjs CHANGED
@@ -43,7 +43,8 @@ var InputEditModal = function (_a) {
43
43
  _e = _a.unpadded,
44
44
  unpadded = _e === void 0 ? false : _e,
45
45
  propsOnDismiss = _a.onDismiss,
46
- props = tslib.__rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss"]);
46
+ onAfterEnter = _a.onAfterEnter,
47
+ props = tslib.__rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss", "onAfterEnter"]);
47
48
  var onDismiss = submitWorking ? undefined : propsOnDismiss;
48
49
  var submitAction = {
49
50
  label: submitLabel,
@@ -63,7 +64,8 @@ var InputEditModal = function (_a) {
63
64
  return React__default.default.createElement(GenericModal.GenericModal, {
64
65
  isOpen: isOpen,
65
66
  onEscapeKeyup: onDismiss,
66
- onAfterLeave: onAfterLeave
67
+ onAfterLeave: onAfterLeave,
68
+ onAfterEnter: onAfterEnter
67
69
  }, React__default.default.createElement("div", tslib.__assign({
68
70
  className: InputEditModal_module.modal,
69
71
  dir: localeDirection,
package/dist/cjs/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.cjs CHANGED
@@ -51,7 +51,11 @@ var LinkModal = function (_a) {
51
51
  title: defaultHref ? "Edit link" : "Add link",
52
52
  onSubmit: handleSubmit,
53
53
  onDismiss: onDismiss,
54
- onAfterLeave: onAfterLeave
54
+ onAfterLeave: onAfterLeave,
55
+ onAfterEnter: function () {
56
+ var _a;
57
+ return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
58
+ }
55
59
  }, React__default.default.createElement(TextField.TextField, {
56
60
  id: "href",
57
61
  type: "text",
package/dist/cjs/index.css CHANGED
@@ -2,10 +2,10 @@
2
2
  .Main-module_main__hMyB1{z-index:0}
3
3
  .Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
4
4
  .FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
5
+ .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
5
6
  .FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
6
7
  .Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
7
8
  .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
8
- .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
9
9
  .ProgressStepper-module_stepsContainer__WMxXN{grid-area:stepper;width:100%}.ProgressStepper-module_stepList__b1wWX{align-items:flex-end;display:none;justify-content:center;list-style:none;margin:0;padding:0}@media (min-width:768px){.ProgressStepper-module_stepList__b1wWX{display:flex}}.ProgressStepper-module_step__-Ep19{container:step/inline-size;display:flex;flex-basis:100%;flex-grow:1;justify-content:center;max-width:var(--spacing-96,6rem);overflow-wrap:break-word;position:relative}.ProgressStepper-module_stepContent__B4uFS{align-items:center;display:flex;flex-direction:column}.ProgressStepper-module_stepIndicator__-qEWT{height:1.25rem;position:relative;width:1.25rem}.ProgressStepper-module_stepName__hS4lp{display:none;font-weight:var(--typography-paragraph-bold-font-weight,600);margin-bottom:var(--spacing-12,.75rem);text-align:center}.ProgressStepper-module_stepIcon__0Kh4y{color:var(--color-white,#fff);height:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem}.ProgressStepper-module_stepDivider__KEZPU{border:var(--spacing-1,.0625rem) solid var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);display:flex;flex-grow:1;height:0;left:100%;margin:0;min-width:calc(100% - var(--spacing-24, 1.5rem));position:absolute;top:calc(100% - .625rem);transform:translateX(-50%)}[dir=rtl] .ProgressStepper-module_stepDivider__KEZPU{left:unset;right:100%;transform:translateX(50%)}.ProgressStepper-module_stepperDescription__B00hX{display:flex;justify-content:center}@media (min-width:768px){.ProgressStepper-module_stepperDescription__B00hX{height:0;overflow:hidden;position:absolute;width:0}}@container step (min-width: 4.5rem){.ProgressStepper-module_stepName__hS4lp{display:inline}}
10
10
  .Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
11
11
  .SVG-module_icon__8J5Ev{display:inline-block;height:20px;width:20px}.SVG-module_icon__8J5Ev>use{pointer-events:none}@media screen and (-ms-high-contrast:active){.SVG-module_icon__8J5Ev{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__8J5Ev{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__8J5Ev{color:#000}}.SVG-module_inheritSize__Q8iam{display:block;height:inherit;width:inherit}
package/dist/esm/Button/IconButton/IconButton.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __assign } from 'tslib';
2
- import React from 'react';
2
+ import React, { forwardRef } from 'react';
3
3
  import { GenericButton } from '../GenericButton/GenericButton.mjs';
4
4
 
5
5
  /**
@@ -7,11 +7,13 @@ import { GenericButton } from '../GenericButton/GenericButton.mjs';
7
7
  * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
8
8
  */
9
9
  const IconButton = /*#__PURE__*/function () {
10
- const IconButton = function (props) {
10
+ const IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
11
11
  return /*#__PURE__*/React.createElement(GenericButton, __assign({
12
12
  iconButton: true
13
- }, props));
14
- };
13
+ }, props, {
14
+ ref: ref
15
+ }));
16
+ });
15
17
  IconButton.defaultProps = {
16
18
  primary: false,
17
19
  destructive: false,
package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.mjs CHANGED
@@ -62,6 +62,7 @@ const ConfirmationModal = /*#__PURE__*/function () {
62
62
  title = _a.title,
63
63
  onConfirm = _a.onConfirm,
64
64
  onAfterLeave = _a.onAfterLeave,
65
+ onAfterEnter = _a.onAfterEnter,
65
66
  _d = _a.confirmLabel,
66
67
  confirmLabel = _d === void 0 ? "Confirm" : _d,
67
68
  _e = _a.dismissLabel,
@@ -69,7 +70,7 @@ const ConfirmationModal = /*#__PURE__*/function () {
69
70
  confirmWorking = _a.confirmWorking,
70
71
  propsOnDismiss = _a.onDismiss,
71
72
  children = _a.children,
72
- props = __rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "title", "onConfirm", "onAfterLeave", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
73
+ props = __rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "title", "onConfirm", "onAfterLeave", "onAfterEnter", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
73
74
  var onDismiss = confirmWorking ? undefined : propsOnDismiss;
74
75
  var footerActions = [];
75
76
  if (onConfirm) {
@@ -93,7 +94,8 @@ const ConfirmationModal = /*#__PURE__*/function () {
93
94
  isOpen: isOpen,
94
95
  onEscapeKeyup: onDismiss,
95
96
  onOutsideModalClick: onDismiss,
96
- onAfterLeave: onAfterLeave
97
+ onAfterLeave: onAfterLeave,
98
+ onAfterEnter: onAfterEnter
97
99
  }, /*#__PURE__*/React.createElement("div", __assign({
98
100
  className: styles.modal,
99
101
  "data-modal": true
package/dist/esm/Modal/ContextModal/ContextModal.mjs CHANGED
@@ -26,6 +26,7 @@ const ContextModal = /*#__PURE__*/function () {
26
26
  onConfirm = _a.onConfirm,
27
27
  propsOnDismiss = _a.onDismiss,
28
28
  onAfterLeave = _a.onAfterLeave,
29
+ onAfterEnter = _a.onAfterEnter,
29
30
  _d = _a.confirmLabel,
30
31
  confirmLabel = _d === void 0 ? "Confirm" : _d,
31
32
  confirmWorking = _a.confirmWorking,
@@ -35,7 +36,7 @@ const ContextModal = /*#__PURE__*/function () {
35
36
  image = _a.image,
36
37
  secondaryLabel = _a.secondaryLabel,
37
38
  onSecondaryAction = _a.onSecondaryAction,
38
- props = __rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction"]);
39
+ props = __rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "onAfterEnter", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction"]);
39
40
  var onDismiss = confirmWorking ? undefined : propsOnDismiss;
40
41
  var footerActions = [];
41
42
  var workingProps = confirmWorking ? {
@@ -61,7 +62,8 @@ const ContextModal = /*#__PURE__*/function () {
61
62
  isOpen: isOpen,
62
63
  onEscapeKeyup: onDismiss,
63
64
  onOutsideModalClick: onDismiss,
64
- onAfterLeave: onAfterLeave
65
+ onAfterLeave: onAfterLeave,
66
+ onAfterEnter: onAfterEnter
65
67
  }, /*#__PURE__*/React.createElement("div", __assign({
66
68
  className: styles.modal,
67
69
  "data-modal": true
package/dist/esm/Modal/GenericModal/GenericModal.mjs CHANGED
@@ -14,6 +14,7 @@ const GenericModal = /*#__PURE__*/function () {
14
14
  focusLockDisabled = _a.focusLockDisabled,
15
15
  onEscapeKeyup = _a.onEscapeKeyup,
16
16
  onOutsideModalClick = _a.onOutsideModalClick,
17
+ onAfterEnter = _a.onAfterEnter,
17
18
  propsOnAfterLeave = _a.onAfterLeave;
18
19
  var reactId = useId();
19
20
  var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
@@ -39,16 +40,15 @@ const GenericModal = /*#__PURE__*/function () {
39
40
  onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(event);
40
41
  }
41
42
  };
42
- var focusAccessibleLabel = function () {
43
- if (modalLayer) {
44
- var labelElement = document.getElementById(labelledByID);
45
- if (labelElement) {
46
- labelElement.focus();
47
- }
43
+ var focusOnAccessibleLabel = function () {
44
+ // Check if focus already exists within the modal
45
+ if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
46
+ return;
48
47
  }
48
+ var labelElement = document.getElementById(labelledByID);
49
+ labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
49
50
  };
50
51
  var a11yWarn = function () {
51
- if (!modalLayer) return;
52
52
  // Ensure that consumers have provided an element that labels the modal
53
53
  // to meet ARIA accessibility guidelines.
54
54
  if (!document.getElementById(labelledByID)) {
@@ -66,8 +66,11 @@ const GenericModal = /*#__PURE__*/function () {
66
66
  };
67
67
  var onAfterEnterHandler = function () {
68
68
  scrollModalToTop();
69
- focusAccessibleLabel();
70
- a11yWarn();
69
+ if (modalLayer) {
70
+ onAfterEnter === null || onAfterEnter === void 0 ? void 0 : onAfterEnter();
71
+ focusOnAccessibleLabel();
72
+ a11yWarn();
73
+ }
71
74
  };
72
75
  var onBeforeEnterHandler = function () {
73
76
  preventBodyScroll();
package/dist/esm/Modal/InputEditModal/InputEditModal.mjs CHANGED
@@ -35,7 +35,8 @@ const InputEditModal = /*#__PURE__*/function () {
35
35
  _e = _a.unpadded,
36
36
  unpadded = _e === void 0 ? false : _e,
37
37
  propsOnDismiss = _a.onDismiss,
38
- props = __rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss"]);
38
+ onAfterEnter = _a.onAfterEnter,
39
+ props = __rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss", "onAfterEnter"]);
39
40
  var onDismiss = submitWorking ? undefined : propsOnDismiss;
40
41
  var submitAction = {
41
42
  label: submitLabel,
@@ -55,7 +56,8 @@ const InputEditModal = /*#__PURE__*/function () {
55
56
  return /*#__PURE__*/React.createElement(GenericModal, {
56
57
  isOpen: isOpen,
57
58
  onEscapeKeyup: onDismiss,
58
- onAfterLeave: onAfterLeave
59
+ onAfterLeave: onAfterLeave,
60
+ onAfterEnter: onAfterEnter
59
61
  }, /*#__PURE__*/React.createElement("div", __assign({
60
62
  className: styles.modal,
61
63
  dir: localeDirection,
package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.mjs CHANGED
@@ -44,7 +44,11 @@ const LinkModal = /*#__PURE__*/function () {
44
44
  title: defaultHref ? "Edit link" : "Add link",
45
45
  onSubmit: handleSubmit,
46
46
  onDismiss: onDismiss,
47
- onAfterLeave: onAfterLeave
47
+ onAfterLeave: onAfterLeave,
48
+ onAfterEnter: function () {
49
+ var _a;
50
+ return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
51
+ }
48
52
  }, /*#__PURE__*/React.createElement(TextField, {
49
53
  id: "href",
50
54
  type: "text",
package/dist/esm/index.css CHANGED
@@ -2,10 +2,10 @@
2
2
  .Main-module_main__hMyB1{z-index:0}
3
3
  .Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
4
4
  .FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
5
+ .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
5
6
  .FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
6
7
  .Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
7
8
  .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
8
- .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
9
9
  .ProgressStepper-module_stepsContainer__WMxXN{grid-area:stepper;width:100%}.ProgressStepper-module_stepList__b1wWX{align-items:flex-end;display:none;justify-content:center;list-style:none;margin:0;padding:0}@media (min-width:768px){.ProgressStepper-module_stepList__b1wWX{display:flex}}.ProgressStepper-module_step__-Ep19{container:step/inline-size;display:flex;flex-basis:100%;flex-grow:1;justify-content:center;max-width:var(--spacing-96,6rem);overflow-wrap:break-word;position:relative}.ProgressStepper-module_stepContent__B4uFS{align-items:center;display:flex;flex-direction:column}.ProgressStepper-module_stepIndicator__-qEWT{height:1.25rem;position:relative;width:1.25rem}.ProgressStepper-module_stepName__hS4lp{display:none;font-weight:var(--typography-paragraph-bold-font-weight,600);margin-bottom:var(--spacing-12,.75rem);text-align:center}.ProgressStepper-module_stepIcon__0Kh4y{color:var(--color-white,#fff);height:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem}.ProgressStepper-module_stepDivider__KEZPU{border:var(--spacing-1,.0625rem) solid var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);display:flex;flex-grow:1;height:0;left:100%;margin:0;min-width:calc(100% - var(--spacing-24, 1.5rem));position:absolute;top:calc(100% - .625rem);transform:translateX(-50%)}[dir=rtl] .ProgressStepper-module_stepDivider__KEZPU{left:unset;right:100%;transform:translateX(50%)}.ProgressStepper-module_stepperDescription__B00hX{display:flex;justify-content:center}@media (min-width:768px){.ProgressStepper-module_stepperDescription__B00hX{height:0;overflow:hidden;position:absolute;width:0}}@container step (min-width: 4.5rem){.ProgressStepper-module_stepName__hS4lp{display:inline}}
10
10
  .Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
11
11
  .SVG-module_icon__8J5Ev{display:inline-block;height:20px;width:20px}.SVG-module_icon__8J5Ev>use{pointer-events:none}@media screen and (-ms-high-contrast:active){.SVG-module_icon__8J5Ev{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__8J5Ev{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__8J5Ev{color:#000}}.SVG-module_inheritSize__Q8iam{display:block;height:inherit;width:inherit}