@carbon/ibm-products 2.92.1 → 2.93.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 (152) hide show
  1. package/css/index-full-carbon.css +99 -20
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +70 -20
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +99 -20
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +70 -20
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Coachmark/next/Coachmark/Coachmark.d.ts +9 -12
  18. package/es/components/Coachmark/next/Coachmark/Coachmark.d.ts.map +1 -1
  19. package/es/components/Coachmark/next/Coachmark/Coachmark.js +16 -27
  20. package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts +1 -1
  21. package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts.map +1 -1
  22. package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.js +3 -4
  23. package/es/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts +8 -4
  24. package/es/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts.map +1 -1
  25. package/es/components/Coachmark/next/Coachmark/CoachmarkContent.js +19 -5
  26. package/es/components/Coachmark/next/Coachmark/{ContentBody.d.ts → CoachmarkContentBody.d.ts} +5 -5
  27. package/es/components/Coachmark/next/Coachmark/CoachmarkContentBody.d.ts.map +1 -0
  28. package/es/components/Coachmark/next/Coachmark/{ContentBody.js → CoachmarkContentBody.js} +10 -6
  29. package/{lib/components/Coachmark/next/Coachmark/ContentHeader.d.ts → es/components/Coachmark/next/Coachmark/CoachmarkContentHeader.d.ts} +7 -3
  30. package/es/components/Coachmark/next/Coachmark/CoachmarkContentHeader.d.ts.map +1 -0
  31. package/es/components/Coachmark/next/Coachmark/{ContentHeader.js → CoachmarkContentHeader.js} +55 -12
  32. package/es/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.d.ts.map +1 -1
  33. package/es/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.js +2 -2
  34. package/es/components/Coachmark/next/Coachmark/index.d.ts +5 -4
  35. package/es/components/Coachmark/next/Coachmark/index.d.ts.map +1 -1
  36. package/es/components/ExpressiveCard/ExpressiveCard.d.ts +3 -3
  37. package/es/components/ExpressiveCard/ExpressiveCard.d.ts.map +1 -1
  38. package/es/components/ExpressiveCard/ExpressiveCard.js +3 -15
  39. package/es/components/InterstitialScreen/InterstitialScreenBody.js +1 -1
  40. package/es/components/PageHeader/next/PageHeader.d.ts.map +1 -1
  41. package/es/components/PageHeader/next/PageHeader.js +6 -2
  42. package/es/components/PageHeader/next/PageHeaderTabBar.d.ts +4 -0
  43. package/es/components/PageHeader/next/PageHeaderTabBar.d.ts.map +1 -1
  44. package/es/components/PageHeader/next/PageHeaderTabBar.js +7 -2
  45. package/es/components/PageHeader/next/context.d.ts +2 -0
  46. package/es/components/PageHeader/next/context.d.ts.map +1 -1
  47. package/es/components/PageHeader/next/context.js +3 -1
  48. package/es/components/ProductiveCard/ProductiveCard.d.ts +3 -3
  49. package/es/components/ProductiveCard/ProductiveCard.d.ts.map +1 -1
  50. package/es/components/ProductiveCard/ProductiveCard.js +3 -15
  51. package/es/components/Tearsheet/TearsheetShell.d.ts.map +1 -1
  52. package/es/components/Tearsheet/TearsheetShell.js +17 -8
  53. package/es/components/Tearsheet/next/Tearsheet.d.ts.map +1 -1
  54. package/es/components/Tearsheet/next/Tearsheet.js +21 -2
  55. package/es/components/Tearsheet/next/TearsheetBody.d.ts +16 -0
  56. package/es/components/Tearsheet/next/TearsheetBody.d.ts.map +1 -1
  57. package/es/components/Tearsheet/next/TearsheetBody.js +22 -4
  58. package/es/components/Tearsheet/next/TearsheetFooter.js +1 -1
  59. package/es/components/Tearsheet/next/TearsheetHeader.d.ts.map +1 -1
  60. package/es/components/Tearsheet/next/TearsheetHeader.js +3 -1
  61. package/es/components/Tearsheet/next/TearsheetHeaderActions.d.ts +1 -1
  62. package/es/components/Tearsheet/next/TearsheetHeaderActions.d.ts.map +1 -1
  63. package/es/components/Tearsheet/next/TearsheetHeaderActions.js +6 -3
  64. package/es/components/Tearsheet/next/TearsheetHeaderContent.d.ts.map +1 -1
  65. package/es/components/Tearsheet/next/TearsheetHeaderContent.js +9 -3
  66. package/es/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts.map +1 -1
  67. package/es/components/Tearsheet/next/context.d.ts +1 -0
  68. package/es/components/Tearsheet/next/context.d.ts.map +1 -1
  69. package/es/components/Tearsheet/usePresence.d.ts.map +1 -1
  70. package/es/components/Tearsheet/usePresence.js +3 -2
  71. package/es/global/js/package-settings.d.ts +1 -0
  72. package/es/global/js/package-settings.d.ts.map +1 -1
  73. package/es/global/js/package-settings.js +1 -0
  74. package/es/global/js/utils/makeDraggable/makeDraggable.d.ts +8 -2
  75. package/es/global/js/utils/makeDraggable/makeDraggable.d.ts.map +1 -1
  76. package/es/global/js/utils/makeDraggable/makeDraggable.js +87 -17
  77. package/es/settings.d.ts +1 -0
  78. package/es/settings.d.ts.map +1 -1
  79. package/lib/components/Coachmark/next/Coachmark/Coachmark.d.ts +9 -12
  80. package/lib/components/Coachmark/next/Coachmark/Coachmark.d.ts.map +1 -1
  81. package/lib/components/Coachmark/next/Coachmark/Coachmark.js +16 -27
  82. package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts +1 -1
  83. package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts.map +1 -1
  84. package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.js +3 -4
  85. package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts +8 -4
  86. package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts.map +1 -1
  87. package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.js +19 -5
  88. package/lib/components/Coachmark/next/Coachmark/{ContentBody.d.ts → CoachmarkContentBody.d.ts} +5 -5
  89. package/lib/components/Coachmark/next/Coachmark/CoachmarkContentBody.d.ts.map +1 -0
  90. package/lib/components/Coachmark/next/Coachmark/{ContentBody.js → CoachmarkContentBody.js} +10 -6
  91. package/{es/components/Coachmark/next/Coachmark/ContentHeader.d.ts → lib/components/Coachmark/next/Coachmark/CoachmarkContentHeader.d.ts} +7 -3
  92. package/lib/components/Coachmark/next/Coachmark/CoachmarkContentHeader.d.ts.map +1 -0
  93. package/lib/components/Coachmark/next/Coachmark/{ContentHeader.js → CoachmarkContentHeader.js} +54 -11
  94. package/lib/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.d.ts.map +1 -1
  95. package/lib/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.js +2 -2
  96. package/lib/components/Coachmark/next/Coachmark/index.d.ts +5 -4
  97. package/lib/components/Coachmark/next/Coachmark/index.d.ts.map +1 -1
  98. package/lib/components/ExpressiveCard/ExpressiveCard.d.ts +3 -3
  99. package/lib/components/ExpressiveCard/ExpressiveCard.d.ts.map +1 -1
  100. package/lib/components/ExpressiveCard/ExpressiveCard.js +3 -15
  101. package/lib/components/InterstitialScreen/InterstitialScreenBody.js +1 -1
  102. package/lib/components/PageHeader/next/PageHeader.d.ts.map +1 -1
  103. package/lib/components/PageHeader/next/PageHeader.js +6 -2
  104. package/lib/components/PageHeader/next/PageHeaderTabBar.d.ts +4 -0
  105. package/lib/components/PageHeader/next/PageHeaderTabBar.d.ts.map +1 -1
  106. package/lib/components/PageHeader/next/PageHeaderTabBar.js +6 -1
  107. package/lib/components/PageHeader/next/context.d.ts +2 -0
  108. package/lib/components/PageHeader/next/context.d.ts.map +1 -1
  109. package/lib/components/PageHeader/next/context.js +3 -1
  110. package/lib/components/ProductiveCard/ProductiveCard.d.ts +3 -3
  111. package/lib/components/ProductiveCard/ProductiveCard.d.ts.map +1 -1
  112. package/lib/components/ProductiveCard/ProductiveCard.js +3 -15
  113. package/lib/components/Tearsheet/TearsheetShell.d.ts.map +1 -1
  114. package/lib/components/Tearsheet/TearsheetShell.js +15 -6
  115. package/lib/components/Tearsheet/next/Tearsheet.d.ts.map +1 -1
  116. package/lib/components/Tearsheet/next/Tearsheet.js +21 -2
  117. package/lib/components/Tearsheet/next/TearsheetBody.d.ts +16 -0
  118. package/lib/components/Tearsheet/next/TearsheetBody.d.ts.map +1 -1
  119. package/lib/components/Tearsheet/next/TearsheetBody.js +22 -4
  120. package/lib/components/Tearsheet/next/TearsheetFooter.js +1 -1
  121. package/lib/components/Tearsheet/next/TearsheetHeader.d.ts.map +1 -1
  122. package/lib/components/Tearsheet/next/TearsheetHeader.js +3 -1
  123. package/lib/components/Tearsheet/next/TearsheetHeaderActions.d.ts +1 -1
  124. package/lib/components/Tearsheet/next/TearsheetHeaderActions.d.ts.map +1 -1
  125. package/lib/components/Tearsheet/next/TearsheetHeaderActions.js +5 -2
  126. package/lib/components/Tearsheet/next/TearsheetHeaderContent.d.ts.map +1 -1
  127. package/lib/components/Tearsheet/next/TearsheetHeaderContent.js +9 -3
  128. package/lib/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts.map +1 -1
  129. package/lib/components/Tearsheet/next/context.d.ts +1 -0
  130. package/lib/components/Tearsheet/next/context.d.ts.map +1 -1
  131. package/lib/components/Tearsheet/usePresence.d.ts.map +1 -1
  132. package/lib/components/Tearsheet/usePresence.js +2 -1
  133. package/lib/global/js/package-settings.d.ts +1 -0
  134. package/lib/global/js/package-settings.d.ts.map +1 -1
  135. package/lib/global/js/package-settings.js +1 -0
  136. package/lib/global/js/utils/makeDraggable/makeDraggable.d.ts +8 -2
  137. package/lib/global/js/utils/makeDraggable/makeDraggable.d.ts.map +1 -1
  138. package/lib/global/js/utils/makeDraggable/makeDraggable.js +87 -17
  139. package/lib/settings.d.ts +1 -0
  140. package/lib/settings.d.ts.map +1 -1
  141. package/package.json +7 -7
  142. package/scss/components/Coachmark/_carbon-imports.scss +2 -1
  143. package/scss/components/Coachmark/_coachmark_next.scss +53 -0
  144. package/scss/components/Coachmark/_index.scss +4 -1
  145. package/scss/components/PageHeader/_page-header.scss +44 -8
  146. package/scss/components/Tearsheet/_tearsheet.scss +26 -2
  147. package/scss/components/Tearsheet/_tearsheet_next.scss +5 -0
  148. package/telemetry.yml +11 -3
  149. package/es/components/Coachmark/next/Coachmark/ContentBody.d.ts.map +0 -1
  150. package/es/components/Coachmark/next/Coachmark/ContentHeader.d.ts.map +0 -1
  151. package/lib/components/Coachmark/next/Coachmark/ContentBody.d.ts.map +0 -1
  152. package/lib/components/Coachmark/next/Coachmark/ContentHeader.d.ts.map +0 -1
@@ -1,14 +1,14 @@
1
1
  /**
2
- * Copyright IBM Corp. 2024, 2025
2
+ * Copyright IBM Corp. 2024, 2026
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- import { FC, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject } from 'react';
7
+ import { FC, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
8
8
  import { CoachmarkContentProps } from './CoachmarkContent';
9
9
  import { NewPopoverAlignment } from '@carbon/react';
10
- import { ContentHeaderProps } from './ContentHeader';
11
- import { ContentBodyProps } from './ContentBody';
10
+ import { CoachmarkContentHeaderProps } from './CoachmarkContentHeader';
11
+ import { CoachmarkContentBodyProps } from './CoachmarkContentBody';
12
12
  export interface CoachmarkPropsNext {
13
13
  /**
14
14
  * Provide the contents of the Coachmark.
@@ -59,16 +59,14 @@ export interface CoachmarkPropsNext {
59
59
  */
60
60
  selectorPrimaryFocus?: string;
61
61
  /**
62
- * Optional ref for an external trigger element, used when the trigger is not part of the coachmark.
62
+ * Prevents the Coachmark from closing when clicking outside of it.
63
63
  */
64
- triggerRef?: RefObject<HTMLElement>;
64
+ preventCloseOnClickOutside?: boolean;
65
65
  }
66
- type CoachmarkContentComponent = FC<CoachmarkContentProps> & {
67
- Header: FC<ContentHeaderProps>;
68
- Body: FC<ContentBodyProps>;
69
- };
70
66
  export type CoachmarkComponent = ForwardRefExoticComponent<CoachmarkPropsNext & RefAttributes<HTMLDivElement>> & {
71
- Content: CoachmarkContentComponent;
67
+ Content: FC<CoachmarkContentProps>;
68
+ ContentHeader: FC<CoachmarkContentHeaderProps>;
69
+ ContentBody: FC<CoachmarkContentBodyProps>;
72
70
  };
73
71
  /**
74
72
  * Coachmarks are used to call out specific functionality or concepts
@@ -76,5 +74,4 @@ export type CoachmarkComponent = ForwardRefExoticComponent<CoachmarkPropsNext &
76
74
  * user to gain understanding of the product's main value and discover new use cases.
77
75
  */
78
76
  export declare const Coachmark: CoachmarkComponent;
79
- export {};
80
77
  //# sourceMappingURL=Coachmark.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Coachmark.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/Coachmark.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAc,EACZ,EAAE,EACF,yBAAyB,EACzB,SAAS,EACT,aAAa,EACb,SAAS,EAKV,MAAM,OAAO,CAAC;AAOf,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAW,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAiB9D,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACrC;AAED,KAAK,yBAAyB,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG;IAC3D,MAAM,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAC;IAC/B,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CACxD,kBAAkB,GAAG,aAAa,CAAC,cAAc,CAAC,CACnD,GAAG;IACF,OAAO,EAAE,yBAAyB,CAAC;CACpC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAwJjB,kBAAkB,CAAC"}
1
+ {"version":3,"file":"Coachmark.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/Coachmark.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAc,EACZ,EAAE,EACF,yBAAyB,EACzB,SAAS,EACT,aAAa,EAMd,MAAM,OAAO,CAAC;AAOf,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAW,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAEL,2BAA2B,EAC5B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAEL,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAiBhC,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAGD,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CACxD,kBAAkB,GAAG,aAAa,CAAC,cAAc,CAAC,CACnD,GAAG;IACF,OAAO,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IACnC,aAAa,EAAE,EAAE,CAAC,2BAA2B,CAAC,CAAC;IAC/C,WAAW,EAAE,EAAE,CAAC,yBAAyB,CAAC,CAAC;CAC5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EA4IjB,kBAAkB,CAAC"}
@@ -11,14 +11,14 @@ import { useIsomorphicEffect } from "../../../../global/js/hooks/useIsomorphicEf
11
11
  import { getDevtoolsProps } from "../../../../global/js/utils/devtools.js";
12
12
  import { CoachmarkContext, blockClass } from "./context.js";
13
13
  import CoachmarkContent from "./CoachmarkContent.js";
14
- import { ContentHeader } from "./ContentHeader.js";
15
- import ContentBody from "./ContentBody.js";
14
+ import { CoachmarkContentHeader } from "./CoachmarkContentHeader.js";
15
+ import CoachmarkContentBody from "./CoachmarkContentBody.js";
16
16
  import React, { forwardRef, useEffect, useRef, useState } from "react";
17
17
  import PropTypes from "prop-types";
18
18
  import { Popover } from "@carbon/react";
19
19
  //#region src/components/Coachmark/next/Coachmark/Coachmark.tsx
20
20
  /**
21
- * Copyright IBM Corp. 2024, 2025
21
+ * Copyright IBM Corp. 2024, 2026
22
22
  *
23
23
  * This source code is licensed under the Apache-2.0 license found in the
24
24
  * LICENSE file in the root directory of this source tree.
@@ -34,12 +34,12 @@ const Coachmark = forwardRef((props, ref) => {
34
34
  const { children, className, onClose, align = "bottom", open, position = {
35
35
  x: 0,
36
36
  y: 0
37
- }, floating, dropShadow, highContrast, caret, selectorPrimaryFocus, triggerRef: triggerRefProp, ...rest } = props;
38
- const internalTriggerRef = useRef(null);
39
- const triggerRef = triggerRefProp ?? internalTriggerRef;
37
+ }, floating, dropShadow, highContrast, caret, selectorPrimaryFocus, preventCloseOnClickOutside, ...rest } = props;
38
+ const triggerRef = useRef(null);
40
39
  const internalRef = useRef(null);
41
40
  const [contentRef, setContentRef] = useState(null);
42
41
  const [openState, setOpenState] = useState(false);
42
+ const shouldPreventClose = preventCloseOnClickOutside !== void 0 ? preventCloseOnClickOutside : floating === true;
43
43
  const setOpen = (value) => {
44
44
  if (!value) onClose?.();
45
45
  if (open === void 0) setOpenState(value);
@@ -47,16 +47,11 @@ const Coachmark = forwardRef((props, ref) => {
47
47
  const currentOpen = open ?? openState;
48
48
  const caretValue = caret !== void 0 ? caret : floating === true ? false : true;
49
49
  useEffect(() => {
50
- if (triggerRefProp?.current) return;
51
50
  const container = internalRef.current;
52
51
  if (!container) return;
53
52
  const firstFocusable = Array.from(container.querySelectorAll("*")).find((el) => el.tabIndex >= 0 && !el.hasAttribute("disabled"));
54
53
  if (firstFocusable) triggerRef.current = firstFocusable;
55
- }, [
56
- children,
57
- triggerRef,
58
- triggerRefProp
59
- ]);
54
+ }, [children, triggerRef]);
60
55
  useEffect(() => {
61
56
  const el = triggerRef.current;
62
57
  if (el) el.setAttribute("aria-expanded", String(!!open));
@@ -82,8 +77,8 @@ const Coachmark = forwardRef((props, ref) => {
82
77
  if (typeof ref === "function") ref(node);
83
78
  else if (ref) ref.current = node;
84
79
  };
85
- const handleRequestClose = (event) => {
86
- if (floating) return;
80
+ const handleRequestClose = () => {
81
+ if (shouldPreventClose) return;
87
82
  onClose?.();
88
83
  setOpen(false);
89
84
  };
@@ -110,17 +105,11 @@ const Coachmark = forwardRef((props, ref) => {
110
105
  caret: caretValue,
111
106
  highContrast: highContrast ?? true,
112
107
  dropShadow
113
- }, triggerRefProp?.current ? /* @__PURE__ */ React.createElement("span", {
114
- "aria-hidden": "true",
115
- style: { display: "contents" },
116
- ref: (node) => {
117
- if (node && triggerRefProp.current) node.replaceWith(triggerRefProp.current);
118
- }
119
- }) : null, children)));
108
+ }, children)));
120
109
  });
121
110
  Coachmark.Content = CoachmarkContent;
122
- Coachmark.Content.Header = ContentHeader;
123
- Coachmark.Content.Body = ContentBody;
111
+ Coachmark.ContentHeader = CoachmarkContentHeader;
112
+ Coachmark.ContentBody = CoachmarkContentBody;
124
113
  Coachmark.displayName = componentName;
125
114
  Coachmark.propTypes = {
126
115
  /**
@@ -167,13 +156,13 @@ Coachmark.propTypes = {
167
156
  y: PropTypes.number
168
157
  }),
169
158
  /**
170
- * CSS selector for the element that should receive focus when the coachmark opens.
159
+ * Prevents the Coachmark from closing when clicking outside of it.
171
160
  */
172
- selectorPrimaryFocus: PropTypes.string,
161
+ preventCloseOnClickOutside: PropTypes.bool,
173
162
  /**
174
- * Optional ref for an external trigger element, used when the trigger is not part of the coachmark.
163
+ * CSS selector for the element that should receive focus when the coachmark opens.
175
164
  */
176
- triggerRef: PropTypes.shape({ current: PropTypes.any })
165
+ selectorPrimaryFocus: PropTypes.string
177
166
  };
178
167
  //#endregion
179
168
  export { Coachmark };
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2024, 2025
2
+ * Copyright IBM Corp. 2024, 2026
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -1 +1 @@
1
- {"version":3,"file":"CoachmarkBeacon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,WAAW,EAAU,MAAM,eAAe,CAAC;AAMpD;;GAEG;AACH,oBAAY,WAAW;IACrB,OAAO,YAAY;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,WAAW,CAAC,WAAW,CAAC;IACpE,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,aAAa,CAAC,IAAI,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,eAAe,CAAC,CAAC,EAAE,OAAO,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AACD,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACpC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,iGA6B1B,CAAC"}
1
+ {"version":3,"file":"CoachmarkBeacon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,WAAW,EAAU,MAAM,eAAe,CAAC;AAMpD;;GAEG;AACH,oBAAY,WAAW;IACrB,OAAO,YAAY;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,WAAW,CAAC,WAAW,CAAC;IACpE,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,aAAa,CAAC,IAAI,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,eAAe,CAAC,CAAC,EAAE,OAAO,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AACD,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACpC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,iGA8B1B,CAAC"}
@@ -14,7 +14,7 @@ import PropTypes from "prop-types";
14
14
  import { Button } from "@carbon/react";
15
15
  //#region src/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.tsx
16
16
  /**
17
- * Copyright IBM Corp. 2024, 2025
17
+ * Copyright IBM Corp. 2024, 2026
18
18
  *
19
19
  * This source code is licensed under the Apache-2.0 license found in the
20
20
  * LICENSE file in the root directory of this source tree.
@@ -36,7 +36,8 @@ const CoachmarkBeacon = forwardRef((props, ref) => {
36
36
  type: "button",
37
37
  ...buttonProps,
38
38
  className: `${blockClass}__target`,
39
- "aria-label": label
39
+ "aria-label": label,
40
+ title: label
40
41
  }, /* @__PURE__ */ React.createElement("svg", {
41
42
  className: `${blockClass}__center`,
42
43
  "aria-hidden": "true",
@@ -53,9 +54,7 @@ CoachmarkBeacon.propTypes = {
53
54
  * button props
54
55
  */
55
56
  buttonProps: PropTypes.shape({
56
- /**@ts-ignore*/
57
57
  ...Button.propTypes,
58
- /**@ts-ignore*/
59
58
  id: PropTypes.string,
60
59
  onClick: PropTypes.func,
61
60
  onDoubleClick: PropTypes.func,
@@ -5,8 +5,8 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import { FC, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes } from 'react';
8
- import { ContentHeaderProps } from './ContentHeader';
9
- import { ContentBodyProps } from './ContentBody';
8
+ import { CoachmarkContentHeaderProps } from './CoachmarkContentHeader';
9
+ import { CoachmarkContentBodyProps } from './CoachmarkContentBody';
10
10
  export interface CoachmarkContentProps {
11
11
  /**
12
12
  * Provide an optional class to be applied to the containing node.
@@ -17,10 +17,14 @@ export interface CoachmarkContentProps {
17
17
  * It can be a single child or an array of children depending on your need
18
18
  */
19
19
  children: ReactElement | ReactNode;
20
+ /**
21
+ * Accessible label for the coachmark content region.
22
+ */
23
+ 'aria-label': string;
20
24
  }
21
25
  export type CoachmarkContentComponent = ForwardRefExoticComponent<CoachmarkContentProps & RefAttributes<HTMLDivElement>> & {
22
- Header: FC<ContentHeaderProps>;
23
- Body: FC<ContentBodyProps>;
26
+ Header: FC<CoachmarkContentHeaderProps>;
27
+ Body: FC<CoachmarkContentBodyProps>;
24
28
  };
25
29
  declare const CoachmarkContent: CoachmarkContentComponent;
26
30
  export default CoachmarkContent;
@@ -1 +1 @@
1
- {"version":3,"file":"CoachmarkContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/CoachmarkContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAc,EACZ,EAAE,EAEF,yBAAyB,EACzB,YAAY,EACZ,SAAS,EACT,aAAa,EAId,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKjD,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,MAAM,yBAAyB,GAAG,yBAAyB,CAC/D,qBAAqB,GAAG,aAAa,CAAC,cAAc,CAAC,CACtD,GAAG;IACF,MAAM,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAC;IAC/B,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAgGjB,yBAAyB,CAAC;AAE/B,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"CoachmarkContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/CoachmarkContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAc,EACZ,EAAE,EAEF,yBAAyB,EACzB,YAAY,EACZ,SAAS,EACT,aAAa,EAId,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAMnE,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,yBAAyB,GAAG,yBAAyB,CAC/D,qBAAqB,GAAG,aAAa,CAAC,cAAc,CAAC,CACtD,GAAG;IACF,MAAM,EAAE,EAAE,CAAC,2BAA2B,CAAC,CAAC;IACxC,IAAI,EAAE,EAAE,CAAC,yBAAyB,CAAC,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAwHjB,yBAAyB,CAAC;AAE/B,eAAe,gBAAgB,CAAC"}
@@ -8,6 +8,7 @@
8
8
  import { __toESM } from "../../../../_virtual/_rolldown/runtime.js";
9
9
  import { require_classnames } from "../../../../node_modules/classnames/index.js";
10
10
  import { carbon } from "../../../../settings.js";
11
+ import { getDevtoolsProps } from "../../../../global/js/utils/devtools.js";
11
12
  import { CoachmarkContext, blockClass } from "./context.js";
12
13
  import React, { forwardRef, useContext, useEffect, useRef } from "react";
13
14
  import PropTypes from "prop-types";
@@ -21,7 +22,7 @@ import { PopoverContent } from "@carbon/react";
21
22
  */
22
23
  var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
23
24
  const CoachmarkContent = forwardRef((props, ref) => {
24
- const { className = "", children, ...rest } = props;
25
+ const { className = "", children, "aria-label": ariaLabel, ...rest } = props;
25
26
  const coachmarkContentBlockClass = `${blockClass}--coachmark-content`;
26
27
  const { open, setContentRef, onClose, setOpen, triggerRef, selectorPrimaryFocus } = useContext(CoachmarkContext);
27
28
  const handleRef = useRef(null);
@@ -67,20 +68,33 @@ const CoachmarkContent = forwardRef((props, ref) => {
67
68
  setOpen
68
69
  ]);
69
70
  useEffect(() => {
70
- if (open && selectorPrimaryFocus) setTimeout(() => {
71
+ if (open) setTimeout(() => {
71
72
  requestAnimationFrame(() => {
72
- const elementToFocus = document.querySelector(selectorPrimaryFocus);
73
+ let elementToFocus = null;
74
+ if (selectorPrimaryFocus) elementToFocus = document.querySelector(selectorPrimaryFocus);
75
+ if (!elementToFocus && contentRef && "current" in contentRef && contentRef.current) elementToFocus = contentRef.current.querySelector(`.${blockClass}--content-header--close-button`);
73
76
  if (elementToFocus) elementToFocus.focus();
74
77
  });
75
78
  }, 100);
76
- }, [open, selectorPrimaryFocus]);
79
+ }, [
80
+ open,
81
+ selectorPrimaryFocus,
82
+ contentRef
83
+ ]);
77
84
  return /* @__PURE__ */ React.createElement(PopoverContent, {
78
85
  ref: contentRef,
79
86
  className: (0, import_classnames.default)(coachmarkContentBlockClass, className) || "",
80
- ...rest
87
+ role: "region",
88
+ "aria-label": ariaLabel,
89
+ ...rest,
90
+ ...getDevtoolsProps("CoachmarkContent")
81
91
  }, children);
82
92
  });
83
93
  CoachmarkContent.propTypes = {
94
+ /**
95
+ * Accessible label for the coachmark content region.
96
+ */
97
+ "aria-label": PropTypes.string.isRequired,
84
98
  /**
85
99
  * This is a required callback that has to return the content to render in the body section.
86
100
  * It can be a single child or an array of children depending on your need
@@ -1,11 +1,11 @@
1
1
  /**
2
- * Copyright IBM Corp. 2024, 2025
2
+ * Copyright IBM Corp. 2024, 2026
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import React, { ReactNode } from 'react';
8
- export interface ContentBodyProps {
8
+ export interface CoachmarkContentBodyProps {
9
9
  /**
10
10
  * Provide the optional content for header section and will be render after header titles and before progress indicator.
11
11
  * People can make use of this if they want to have custom header.
@@ -19,6 +19,6 @@ export interface ContentBodyProps {
19
19
  export type EnrichedChildren = {
20
20
  children: ReactNode;
21
21
  };
22
- export declare const ContentBody: React.ForwardRefExoticComponent<ContentBodyProps & React.RefAttributes<HTMLDivElement>>;
23
- export default ContentBody;
24
- //# sourceMappingURL=ContentBody.d.ts.map
22
+ export declare const CoachmarkContentBody: React.ForwardRefExoticComponent<CoachmarkContentBodyProps & React.RefAttributes<HTMLDivElement>>;
23
+ export default CoachmarkContentBody;
24
+ //# sourceMappingURL=CoachmarkContentBody.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CoachmarkContentBody.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/CoachmarkContentBody.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrD,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,kGAgB/B,CAAC;AAEH,eAAe,oBAAoB,CAAC"}
@@ -7,26 +7,30 @@
7
7
 
8
8
  import { __toESM } from "../../../../_virtual/_rolldown/runtime.js";
9
9
  import { require_classnames } from "../../../../node_modules/classnames/index.js";
10
+ import { getDevtoolsProps } from "../../../../global/js/utils/devtools.js";
10
11
  import { blockClass } from "./context.js";
11
12
  import React, { forwardRef } from "react";
12
13
  import PropTypes from "prop-types";
13
- //#region src/components/Coachmark/next/Coachmark/ContentBody.tsx
14
+ //#region src/components/Coachmark/next/Coachmark/CoachmarkContentBody.tsx
14
15
  /**
15
- * Copyright IBM Corp. 2024, 2025
16
+ * Copyright IBM Corp. 2024, 2026
16
17
  *
17
18
  * This source code is licensed under the Apache-2.0 license found in the
18
19
  * LICENSE file in the root directory of this source tree.
19
20
  */
20
21
  var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
21
- const ContentBody = forwardRef((props, ref) => {
22
+ const CoachmarkContentBody = forwardRef((props, ref) => {
22
23
  const { className = "", children, ...rest } = props;
23
24
  const ContentBodyBlockClass = `${blockClass}--content-body`;
24
25
  return /* @__PURE__ */ React.createElement("div", {
25
26
  ref,
26
- className: (0, import_classnames.default)(ContentBodyBlockClass, className)
27
+ className: (0, import_classnames.default)(ContentBodyBlockClass, className),
28
+ ...rest,
29
+ ...getDevtoolsProps("CoachmarkContentBody")
27
30
  }, children);
28
31
  });
29
- ContentBody.propTypes = {
32
+ CoachmarkContentBody.displayName = "CoachmarkContentBody";
33
+ CoachmarkContentBody.propTypes = {
30
34
  /**
31
35
  * Provide the optional content for header section and will be render after header titles and before progress indicator.
32
36
  * People can make use of this if they want to have custom header.
@@ -38,4 +42,4 @@ ContentBody.propTypes = {
38
42
  className: PropTypes.string
39
43
  };
40
44
  //#endregion
41
- export { ContentBody as default };
45
+ export { CoachmarkContentBody as default };
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- export interface ContentHeaderProps {
2
+ export interface CoachmarkContentHeaderProps {
3
3
  /**
4
4
  * Provide an optional class to be applied to the containing node.
5
5
  */
@@ -12,10 +12,14 @@ export interface ContentHeaderProps {
12
12
  * Tooltip text and aria label for the Drag button icon.
13
13
  */
14
14
  dragIconDescription?: string;
15
+ /**
16
+ * Aria label for the coachmark when it is being dragged.
17
+ */
18
+ dragAriaLabel?: string;
15
19
  /**
16
20
  * Optional contents of the Coachmark Header.
17
21
  */
18
22
  children?: string;
19
23
  }
20
- export declare const ContentHeader: React.ForwardRefExoticComponent<ContentHeaderProps & React.RefAttributes<HTMLDivElement>>;
21
- //# sourceMappingURL=ContentHeader.d.ts.map
24
+ export declare const CoachmarkContentHeader: React.ForwardRefExoticComponent<CoachmarkContentHeaderProps & React.RefAttributes<HTMLDivElement>>;
25
+ //# sourceMappingURL=CoachmarkContentHeader.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CoachmarkContentHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/CoachmarkContentHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,KAON,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,sBAAsB,oGA4KjC,CAAC"}
@@ -8,26 +8,33 @@
8
8
  import { __toESM } from "../../../../_virtual/_rolldown/runtime.js";
9
9
  import { require_classnames } from "../../../../node_modules/classnames/index.js";
10
10
  import { carbon } from "../../../../settings.js";
11
+ import { getDevtoolsProps } from "../../../../global/js/utils/devtools.js";
11
12
  import { CoachmarkContext, blockClass } from "./context.js";
12
13
  import { makeDraggable } from "../../../../global/js/utils/makeDraggable/makeDraggable.js";
13
- import React, { forwardRef, useContext, useEffect, useRef } from "react";
14
+ import React, { forwardRef, useContext, useEffect, useRef, useState } from "react";
14
15
  import PropTypes from "prop-types";
15
16
  import { Button } from "@carbon/react";
16
17
  import { Close, Draggable } from "@carbon/react/icons";
17
- //#region src/components/Coachmark/next/Coachmark/ContentHeader.tsx
18
+ //#region src/components/Coachmark/next/Coachmark/CoachmarkContentHeader.tsx
18
19
  /**
19
20
  * Copyright IBM Corp. 2024, 2026
20
21
  *
21
22
  * This source code is licensed under the Apache-2.0 license found in the
22
23
  * LICENSE file in the root directory of this source tree.
23
24
  */ var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
24
- const ContentHeader = forwardRef((props, ref) => {
25
- const { className = "", closeIconDescription, dragIconDescription, children, ...rest } = props;
25
+ const CoachmarkContentHeader = forwardRef((props, ref) => {
26
+ const { className = "", closeIconDescription, dragIconDescription, dragAriaLabel, children, ...rest } = props;
26
27
  const { setOpen, onClose, contentRef, floating } = useContext(CoachmarkContext);
27
28
  const headerRef = useRef(null);
28
29
  const dragRef = useRef(null);
29
30
  const handleRef = ref || headerRef;
30
31
  const contentHeaderBlockClass = `${blockClass}--content-header`;
32
+ const [isDragging, setIsDragging] = useState(null);
33
+ const [moveAnnouncement, setMoveAnnouncement] = useState("");
34
+ const moveCounterRef = useRef(0);
35
+ const dragInstructionsId = `${contentHeaderBlockClass}--drag-instructions`;
36
+ const dragStatusId = `${contentHeaderBlockClass}--drag-status`;
37
+ const dragMoveId = `${contentHeaderBlockClass}--drag-move`;
31
38
  const closeBubble = (e) => {
32
39
  e?.stopPropagation();
33
40
  onClose?.();
@@ -45,22 +52,33 @@ const ContentHeader = forwardRef((props, ref) => {
45
52
  focusableDragHandle: dragRef.current
46
53
  });
47
54
  const onDragStart = () => {
55
+ setIsDragging(true);
56
+ setMoveAnnouncement("");
48
57
  if (dragStyleContainer) {
49
58
  dragStyleContainer.classList.add(`${contentHeaderBlockClass}--is-dragging`);
50
- dragStyleContainer.setAttribute("aria-label", "Coachmark is being dragged");
59
+ if (dragAriaLabel) dragStyleContainer.setAttribute("aria-label", dragAriaLabel);
51
60
  }
52
61
  };
53
62
  const onDragEnd = () => {
63
+ setIsDragging(false);
64
+ setMoveAnnouncement("");
54
65
  if (dragStyleContainer) {
55
66
  dragStyleContainer.classList.remove(`${contentHeaderBlockClass}--is-dragging`);
56
67
  dragStyleContainer.removeAttribute("aria-label");
57
68
  }
58
69
  };
70
+ const onDragMove = (event) => {
71
+ const { direction, distance } = event.detail;
72
+ moveCounterRef.current += 1;
73
+ setMoveAnnouncement(`Moved ${direction} ${distance} pixels${"​".repeat(moveCounterRef.current)}`);
74
+ };
59
75
  contentRef.addEventListener("dragstart", onDragStart);
60
76
  contentRef.addEventListener("dragend", onDragEnd);
77
+ contentRef.addEventListener("dragmove", onDragMove);
61
78
  return () => {
62
79
  contentRef.removeEventListener("dragstart", onDragStart);
63
80
  contentRef.removeEventListener("dragend", onDragEnd);
81
+ contentRef.removeEventListener("dragmove", onDragMove);
64
82
  draggable.cleanup();
65
83
  };
66
84
  }
@@ -74,25 +92,46 @@ const ContentHeader = forwardRef((props, ref) => {
74
92
  return /* @__PURE__ */ React.createElement("div", {
75
93
  ref: handleRef,
76
94
  className: (0, import_classnames.default)(contentHeaderBlockClass, className),
77
- ...rest
78
- }, floating && /* @__PURE__ */ React.createElement(Button, {
95
+ ...rest,
96
+ ...getDevtoolsProps("CoachmarkContentHeader")
97
+ }, floating && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
98
+ id: dragInstructionsId,
99
+ className: "cds--visually-hidden"
100
+ }, isDragging ? "Use arrow keys to move the coachmark. Press Enter or Space to exit drag mode." : "Press Enter or Space to activate drag mode."), /* @__PURE__ */ React.createElement("div", {
101
+ id: dragStatusId,
102
+ role: "status",
103
+ "aria-live": "polite",
104
+ "aria-atomic": "true",
105
+ className: "cds--visually-hidden"
106
+ }, isDragging === true ? "Drag mode active." : isDragging === false ? "Drag mode ended." : ""), /* @__PURE__ */ React.createElement("div", {
107
+ id: dragMoveId,
108
+ role: "status",
109
+ "aria-live": "assertive",
110
+ "aria-atomic": "true",
111
+ className: "cds--visually-hidden"
112
+ }, moveAnnouncement), /* @__PURE__ */ React.createElement(Button, {
79
113
  kind: "ghost",
80
114
  size: "sm",
81
115
  ref: dragRef,
82
116
  renderIcon: Draggable,
83
117
  iconDescription: dragIconDescription,
84
118
  hasIconOnly: true,
85
- className: `${contentHeaderBlockClass}--drag-icon`
86
- }), children, /* @__PURE__ */ React.createElement(Button, {
119
+ className: `${contentHeaderBlockClass}--drag-icon`,
120
+ "aria-label": dragIconDescription,
121
+ "aria-describedby": dragInstructionsId,
122
+ "aria-pressed": isDragging
123
+ })), children, /* @__PURE__ */ React.createElement(Button, {
87
124
  kind: "ghost",
88
125
  size: "sm",
89
126
  renderIcon: Close,
90
127
  iconDescription: closeIconDescription,
91
128
  hasIconOnly: true,
92
- onClick: closeBubble
129
+ onClick: closeBubble,
130
+ className: `${contentHeaderBlockClass}--close-button`
93
131
  }));
94
132
  });
95
- ContentHeader.propTypes = {
133
+ CoachmarkContentHeader.displayName = "CoachmarkContentHeader";
134
+ CoachmarkContentHeader.propTypes = {
96
135
  /**
97
136
  * Optional contents of the Coachmark Header.
98
137
  */
@@ -106,9 +145,13 @@ ContentHeader.propTypes = {
106
145
  */
107
146
  closeIconDescription: PropTypes.string,
108
147
  /**
148
+ * Aria label for the coachmark when it is being dragged.
149
+ */
150
+ dragAriaLabel: PropTypes.string,
151
+ /**
109
152
  * Tooltip text and aria label for the Drag button icon.
110
153
  */
111
154
  dragIconDescription: PropTypes.string
112
155
  };
113
156
  //#endregion
114
- export { ContentHeader };
157
+ export { CoachmarkContentHeader };
@@ -1 +1 @@
1
- {"version":3,"file":"CoachmarkTagline.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAapD,MAAM,WAAW,oBAAqB,SAAQ,WAAW,CAAC,WAAW,CAAC;IACpE,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,aAAa,CAAC,IAAI,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,eAAe,CAAC,CAAC,EAAE,OAAO,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,8FAkD5B,CAAC"}
1
+ {"version":3,"file":"CoachmarkTagline.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAapD,MAAM,WAAW,oBAAqB,SAAQ,WAAW,CAAC,WAAW,CAAC;IACpE,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,aAAa,CAAC,IAAI,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,eAAe,CAAC,CAAC,EAAE,OAAO,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,8FAwD5B,CAAC"}
@@ -40,6 +40,8 @@ const CoachmarkTagline = React.forwardRef(({ closeIconDescription = defaults.clo
40
40
  }, /* @__PURE__ */ React.createElement("button", {
41
41
  className: `${blockClass}__cta`,
42
42
  type: "button",
43
+ "aria-label": title,
44
+ title,
43
45
  ...buttonProps
44
46
  }, /* @__PURE__ */ React.createElement("div", {
45
47
  className: `${blockClass}__idea`,
@@ -60,9 +62,7 @@ CoachmarkTagline.propTypes = {
60
62
  * button props
61
63
  */
62
64
  buttonProps: PropTypes.shape({
63
- /**@ts-ignore*/
64
65
  ...Button.propTypes,
65
- /**@ts-ignore*/
66
66
  id: PropTypes.string,
67
67
  onClick: PropTypes.func,
68
68
  onDoubleClick: PropTypes.func,
@@ -1,12 +1,13 @@
1
1
  /**
2
- * Copyright IBM Corp. 2024, 2025
2
+ * Copyright IBM Corp. 2024, 2026
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  export { Coachmark } from './Coachmark';
8
8
  export type { CoachmarkPropsNext, CoachmarkComponent } from './Coachmark';
9
- export type { ContentBodyProps } from './ContentBody';
10
- export type { ContentHeaderProps } from './ContentHeader';
11
- export type { CoachmarkContentProps } from './CoachmarkContent';
9
+ export type { CoachmarkContentBodyProps } from './CoachmarkContentBody';
10
+ export type { CoachmarkContentHeaderProps } from './CoachmarkContentHeader';
11
+ export type { CoachmarkContentProps, CoachmarkContentComponent, } from './CoachmarkContent';
12
+ export type { CoachmarkButtonProps } from './CoachmarkBeacon/CoachmarkBeacon';
12
13
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE1E,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Coachmark/next/Coachmark/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE1E,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACxE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAC5E,YAAY,EACV,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC"}
@@ -20,11 +20,11 @@ export interface ExpressiveCardProps extends PropsWithChildren {
20
20
  /**
21
21
  * Optional header description
22
22
  */
23
- description?: string | object | ReactNode;
23
+ description?: ReactNode;
24
24
  /**
25
25
  * Optional label for the top of the card
26
26
  */
27
- label?: string | object | ReactNode;
27
+ label?: ReactNode;
28
28
  /**
29
29
  * Optional media content like an image to be placed in the card
30
30
  */
@@ -90,7 +90,7 @@ export interface ExpressiveCardProps extends PropsWithChildren {
90
90
  /**
91
91
  * Title that's displayed at the top of the card
92
92
  */
93
- title?: string | object | ReactNode;
93
+ title?: ReactNode;
94
94
  }
95
95
  export declare const ExpressiveCard: React.ForwardRefExoticComponent<ExpressiveCardProps & React.RefAttributes<HTMLDivElement>>;
96
96
  //# sourceMappingURL=ExpressiveCard.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ExpressiveCard.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressiveCard/ExpressiveCard.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAMpE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B;;OAEG;IAEH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC;IACxC;;OAEG;IACH,iBAAiB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACxC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,mBAAmB,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAC5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;AAID,eAAO,MAAM,cAAc,4FAa1B,CAAC"}
1
+ {"version":3,"file":"ExpressiveCard.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressiveCard/ExpressiveCard.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAMpE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B;;OAEG;IAEH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC;IACxC;;OAEG;IACH,iBAAiB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACxC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,mBAAmB,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAC5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAID,eAAO,MAAM,cAAc,4FAa1B,CAAC"}