@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.
- package/css/index-full-carbon.css +99 -20
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +70 -20
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +99 -20
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +70 -20
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Coachmark/next/Coachmark/Coachmark.d.ts +9 -12
- package/es/components/Coachmark/next/Coachmark/Coachmark.d.ts.map +1 -1
- package/es/components/Coachmark/next/Coachmark/Coachmark.js +16 -27
- package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts +1 -1
- package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts.map +1 -1
- package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.js +3 -4
- package/es/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts +8 -4
- package/es/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts.map +1 -1
- package/es/components/Coachmark/next/Coachmark/CoachmarkContent.js +19 -5
- package/es/components/Coachmark/next/Coachmark/{ContentBody.d.ts → CoachmarkContentBody.d.ts} +5 -5
- package/es/components/Coachmark/next/Coachmark/CoachmarkContentBody.d.ts.map +1 -0
- package/es/components/Coachmark/next/Coachmark/{ContentBody.js → CoachmarkContentBody.js} +10 -6
- package/{lib/components/Coachmark/next/Coachmark/ContentHeader.d.ts → es/components/Coachmark/next/Coachmark/CoachmarkContentHeader.d.ts} +7 -3
- package/es/components/Coachmark/next/Coachmark/CoachmarkContentHeader.d.ts.map +1 -0
- package/es/components/Coachmark/next/Coachmark/{ContentHeader.js → CoachmarkContentHeader.js} +55 -12
- package/es/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.d.ts.map +1 -1
- package/es/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.js +2 -2
- package/es/components/Coachmark/next/Coachmark/index.d.ts +5 -4
- package/es/components/Coachmark/next/Coachmark/index.d.ts.map +1 -1
- package/es/components/ExpressiveCard/ExpressiveCard.d.ts +3 -3
- package/es/components/ExpressiveCard/ExpressiveCard.d.ts.map +1 -1
- package/es/components/ExpressiveCard/ExpressiveCard.js +3 -15
- package/es/components/InterstitialScreen/InterstitialScreenBody.js +1 -1
- package/es/components/PageHeader/next/PageHeader.d.ts.map +1 -1
- package/es/components/PageHeader/next/PageHeader.js +6 -2
- package/es/components/PageHeader/next/PageHeaderTabBar.d.ts +4 -0
- package/es/components/PageHeader/next/PageHeaderTabBar.d.ts.map +1 -1
- package/es/components/PageHeader/next/PageHeaderTabBar.js +7 -2
- package/es/components/PageHeader/next/context.d.ts +2 -0
- package/es/components/PageHeader/next/context.d.ts.map +1 -1
- package/es/components/PageHeader/next/context.js +3 -1
- package/es/components/ProductiveCard/ProductiveCard.d.ts +3 -3
- package/es/components/ProductiveCard/ProductiveCard.d.ts.map +1 -1
- package/es/components/ProductiveCard/ProductiveCard.js +3 -15
- package/es/components/Tearsheet/TearsheetShell.d.ts.map +1 -1
- package/es/components/Tearsheet/TearsheetShell.js +17 -8
- package/es/components/Tearsheet/next/Tearsheet.d.ts.map +1 -1
- package/es/components/Tearsheet/next/Tearsheet.js +21 -2
- package/es/components/Tearsheet/next/TearsheetBody.d.ts +16 -0
- package/es/components/Tearsheet/next/TearsheetBody.d.ts.map +1 -1
- package/es/components/Tearsheet/next/TearsheetBody.js +22 -4
- package/es/components/Tearsheet/next/TearsheetFooter.js +1 -1
- package/es/components/Tearsheet/next/TearsheetHeader.d.ts.map +1 -1
- package/es/components/Tearsheet/next/TearsheetHeader.js +3 -1
- package/es/components/Tearsheet/next/TearsheetHeaderActions.d.ts +1 -1
- package/es/components/Tearsheet/next/TearsheetHeaderActions.d.ts.map +1 -1
- package/es/components/Tearsheet/next/TearsheetHeaderActions.js +6 -3
- package/es/components/Tearsheet/next/TearsheetHeaderContent.d.ts.map +1 -1
- package/es/components/Tearsheet/next/TearsheetHeaderContent.js +9 -3
- package/es/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts.map +1 -1
- package/es/components/Tearsheet/next/context.d.ts +1 -0
- package/es/components/Tearsheet/next/context.d.ts.map +1 -1
- package/es/components/Tearsheet/usePresence.d.ts.map +1 -1
- package/es/components/Tearsheet/usePresence.js +3 -2
- package/es/global/js/package-settings.d.ts +1 -0
- package/es/global/js/package-settings.d.ts.map +1 -1
- package/es/global/js/package-settings.js +1 -0
- package/es/global/js/utils/makeDraggable/makeDraggable.d.ts +8 -2
- package/es/global/js/utils/makeDraggable/makeDraggable.d.ts.map +1 -1
- package/es/global/js/utils/makeDraggable/makeDraggable.js +87 -17
- package/es/settings.d.ts +1 -0
- package/es/settings.d.ts.map +1 -1
- package/lib/components/Coachmark/next/Coachmark/Coachmark.d.ts +9 -12
- package/lib/components/Coachmark/next/Coachmark/Coachmark.d.ts.map +1 -1
- package/lib/components/Coachmark/next/Coachmark/Coachmark.js +16 -27
- package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts +1 -1
- package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts.map +1 -1
- package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.js +3 -4
- package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts +8 -4
- package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts.map +1 -1
- package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.js +19 -5
- package/lib/components/Coachmark/next/Coachmark/{ContentBody.d.ts → CoachmarkContentBody.d.ts} +5 -5
- package/lib/components/Coachmark/next/Coachmark/CoachmarkContentBody.d.ts.map +1 -0
- package/lib/components/Coachmark/next/Coachmark/{ContentBody.js → CoachmarkContentBody.js} +10 -6
- package/{es/components/Coachmark/next/Coachmark/ContentHeader.d.ts → lib/components/Coachmark/next/Coachmark/CoachmarkContentHeader.d.ts} +7 -3
- package/lib/components/Coachmark/next/Coachmark/CoachmarkContentHeader.d.ts.map +1 -0
- package/lib/components/Coachmark/next/Coachmark/{ContentHeader.js → CoachmarkContentHeader.js} +54 -11
- package/lib/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.d.ts.map +1 -1
- package/lib/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.js +2 -2
- package/lib/components/Coachmark/next/Coachmark/index.d.ts +5 -4
- package/lib/components/Coachmark/next/Coachmark/index.d.ts.map +1 -1
- package/lib/components/ExpressiveCard/ExpressiveCard.d.ts +3 -3
- package/lib/components/ExpressiveCard/ExpressiveCard.d.ts.map +1 -1
- package/lib/components/ExpressiveCard/ExpressiveCard.js +3 -15
- package/lib/components/InterstitialScreen/InterstitialScreenBody.js +1 -1
- package/lib/components/PageHeader/next/PageHeader.d.ts.map +1 -1
- package/lib/components/PageHeader/next/PageHeader.js +6 -2
- package/lib/components/PageHeader/next/PageHeaderTabBar.d.ts +4 -0
- package/lib/components/PageHeader/next/PageHeaderTabBar.d.ts.map +1 -1
- package/lib/components/PageHeader/next/PageHeaderTabBar.js +6 -1
- package/lib/components/PageHeader/next/context.d.ts +2 -0
- package/lib/components/PageHeader/next/context.d.ts.map +1 -1
- package/lib/components/PageHeader/next/context.js +3 -1
- package/lib/components/ProductiveCard/ProductiveCard.d.ts +3 -3
- package/lib/components/ProductiveCard/ProductiveCard.d.ts.map +1 -1
- package/lib/components/ProductiveCard/ProductiveCard.js +3 -15
- package/lib/components/Tearsheet/TearsheetShell.d.ts.map +1 -1
- package/lib/components/Tearsheet/TearsheetShell.js +15 -6
- package/lib/components/Tearsheet/next/Tearsheet.d.ts.map +1 -1
- package/lib/components/Tearsheet/next/Tearsheet.js +21 -2
- package/lib/components/Tearsheet/next/TearsheetBody.d.ts +16 -0
- package/lib/components/Tearsheet/next/TearsheetBody.d.ts.map +1 -1
- package/lib/components/Tearsheet/next/TearsheetBody.js +22 -4
- package/lib/components/Tearsheet/next/TearsheetFooter.js +1 -1
- package/lib/components/Tearsheet/next/TearsheetHeader.d.ts.map +1 -1
- package/lib/components/Tearsheet/next/TearsheetHeader.js +3 -1
- package/lib/components/Tearsheet/next/TearsheetHeaderActions.d.ts +1 -1
- package/lib/components/Tearsheet/next/TearsheetHeaderActions.d.ts.map +1 -1
- package/lib/components/Tearsheet/next/TearsheetHeaderActions.js +5 -2
- package/lib/components/Tearsheet/next/TearsheetHeaderContent.d.ts.map +1 -1
- package/lib/components/Tearsheet/next/TearsheetHeaderContent.js +9 -3
- package/lib/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts.map +1 -1
- package/lib/components/Tearsheet/next/context.d.ts +1 -0
- package/lib/components/Tearsheet/next/context.d.ts.map +1 -1
- package/lib/components/Tearsheet/usePresence.d.ts.map +1 -1
- package/lib/components/Tearsheet/usePresence.js +2 -1
- package/lib/global/js/package-settings.d.ts +1 -0
- package/lib/global/js/package-settings.d.ts.map +1 -1
- package/lib/global/js/package-settings.js +1 -0
- package/lib/global/js/utils/makeDraggable/makeDraggable.d.ts +8 -2
- package/lib/global/js/utils/makeDraggable/makeDraggable.d.ts.map +1 -1
- package/lib/global/js/utils/makeDraggable/makeDraggable.js +87 -17
- package/lib/settings.d.ts +1 -0
- package/lib/settings.d.ts.map +1 -1
- package/package.json +7 -7
- package/scss/components/Coachmark/_carbon-imports.scss +2 -1
- package/scss/components/Coachmark/_coachmark_next.scss +53 -0
- package/scss/components/Coachmark/_index.scss +4 -1
- package/scss/components/PageHeader/_page-header.scss +44 -8
- package/scss/components/Tearsheet/_tearsheet.scss +26 -2
- package/scss/components/Tearsheet/_tearsheet_next.scss +5 -0
- package/telemetry.yml +11 -3
- package/es/components/Coachmark/next/Coachmark/ContentBody.d.ts.map +0 -1
- package/es/components/Coachmark/next/Coachmark/ContentHeader.d.ts.map +0 -1
- package/lib/components/Coachmark/next/Coachmark/ContentBody.d.ts.map +0 -1
- package/lib/components/Coachmark/next/Coachmark/ContentHeader.d.ts.map +0 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2024,
|
|
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
|
|
7
|
+
import { FC, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
|
|
8
8
|
import { CoachmarkContentProps } from './CoachmarkContent';
|
|
9
9
|
import { NewPopoverAlignment } from '@carbon/react';
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
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
|
-
*
|
|
62
|
+
* Prevents the Coachmark from closing when clicking outside of it.
|
|
63
63
|
*/
|
|
64
|
-
|
|
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:
|
|
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,
|
|
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 {
|
|
15
|
-
import
|
|
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,
|
|
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,
|
|
38
|
-
const
|
|
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 = (
|
|
86
|
-
if (
|
|
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
|
-
},
|
|
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.
|
|
123
|
-
Coachmark.
|
|
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
|
-
*
|
|
159
|
+
* Prevents the Coachmark from closing when clicking outside of it.
|
|
171
160
|
*/
|
|
172
|
-
|
|
161
|
+
preventCloseOnClickOutside: PropTypes.bool,
|
|
173
162
|
/**
|
|
174
|
-
*
|
|
163
|
+
* CSS selector for the element that should receive focus when the coachmark opens.
|
|
175
164
|
*/
|
|
176
|
-
|
|
165
|
+
selectorPrimaryFocus: PropTypes.string
|
|
177
166
|
};
|
|
178
167
|
//#endregion
|
|
179
168
|
export { Coachmark };
|
|
@@ -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,
|
|
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,
|
|
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 {
|
|
9
|
-
import {
|
|
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<
|
|
23
|
-
Body: FC<
|
|
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,
|
|
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
|
|
71
|
+
if (open) setTimeout(() => {
|
|
71
72
|
requestAnimationFrame(() => {
|
|
72
|
-
|
|
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
|
-
}, [
|
|
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
|
-
|
|
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
|
package/es/components/Coachmark/next/Coachmark/{ContentBody.d.ts → CoachmarkContentBody.d.ts}
RENAMED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2024,
|
|
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
|
|
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
|
|
23
|
-
export default
|
|
24
|
-
//# sourceMappingURL=
|
|
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/
|
|
14
|
+
//#region src/components/Coachmark/next/Coachmark/CoachmarkContentBody.tsx
|
|
14
15
|
/**
|
|
15
|
-
* Copyright IBM Corp. 2024,
|
|
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
|
|
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
|
-
|
|
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 {
|
|
45
|
+
export { CoachmarkContentBody as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export interface
|
|
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
|
|
21
|
-
//# sourceMappingURL=
|
|
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"}
|
package/es/components/Coachmark/next/Coachmark/{ContentHeader.js → CoachmarkContentHeader.js}
RENAMED
|
@@ -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/
|
|
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
|
|
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",
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 {
|
|
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,
|
|
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,
|
|
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 {
|
|
10
|
-
export type {
|
|
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,
|
|
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?:
|
|
23
|
+
description?: ReactNode;
|
|
24
24
|
/**
|
|
25
25
|
* Optional label for the top of the card
|
|
26
26
|
*/
|
|
27
|
-
label?:
|
|
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?:
|
|
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,
|
|
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"}
|