@carbon/ibm-products 2.77.1 → 2.78.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 +17 -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 +224 -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 +17 -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 +17 -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 +8 -1
- package/es/components/Coachmark/next/Coachmark/Coachmark.js +4 -1
- package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.js +89 -0
- package/{lib/patterns/DeleteAndRemove/_story-assets/utils.d.ts → es/components/Coachmark/next/Coachmark/CoachmarkBeacon/index.js} +3 -2
- package/es/components/Coachmark/next/Coachmark/CoachmarkContent.js +0 -4
- package/es/components/Coachmark/next/Coachmark/ContentBody.d.ts +1 -1
- package/es/components/Coachmark/next/Coachmark/ContentBody.js +1 -1
- package/es/components/Coachmark/next/Coachmark/ContentHeader.d.ts +1 -2
- package/es/components/Coachmark/next/Coachmark/ContentHeader.js +1 -1
- package/es/components/Coachmark/next/Coachmark/index.d.ts +4 -0
- package/es/components/Datagrid/Datagrid/DatagridContent.d.ts +0 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +0 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +0 -1
- package/es/components/FeatureFlags/index.js +14 -0
- package/es/components/PageHeader/next/PageHeader.js +6 -2
- package/es/components/PageHeader/next/_story-assets/pageActionButtonItems.d.ts +15 -0
- package/es/components/SidePanel/SidePanel.d.ts +0 -1
- package/es/components/SidePanel/SidePanel.js +0 -3
- package/es/components/index.d.ts +1 -1
- package/es/global/js/hooks/usePortalTarget.js +0 -1
- package/es/index.d.ts +0 -1
- package/es/index.js +4 -3
- package/lib/components/Coachmark/next/Coachmark/Coachmark.d.ts +8 -1
- package/lib/components/Coachmark/next/Coachmark/Coachmark.js +4 -1
- package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.js +91 -0
- package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/index.js +14 -0
- package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.js +0 -4
- package/lib/components/Coachmark/next/Coachmark/ContentBody.d.ts +1 -1
- package/lib/components/Coachmark/next/Coachmark/ContentBody.js +1 -0
- package/lib/components/Coachmark/next/Coachmark/ContentHeader.d.ts +1 -2
- package/lib/components/Coachmark/next/Coachmark/ContentHeader.js +1 -3
- package/lib/components/Coachmark/next/Coachmark/index.d.ts +4 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.d.ts +0 -1
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +0 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +0 -1
- package/lib/components/FeatureFlags/index.js +19 -5
- package/lib/components/PageHeader/next/PageHeader.js +6 -2
- package/lib/components/PageHeader/next/_story-assets/pageActionButtonItems.d.ts +15 -0
- package/lib/components/SidePanel/SidePanel.d.ts +0 -1
- package/lib/components/SidePanel/SidePanel.js +0 -3
- package/lib/components/index.d.ts +1 -1
- package/lib/global/js/hooks/usePortalTarget.js +0 -1
- package/lib/index.d.ts +0 -1
- package/lib/index.js +13 -12
- package/package.json +6 -7
- package/scss/components/Datagrid/styles/_datagrid.scss +6 -2
- package/scss/components/PageHeader/_page-header.scss +18 -1
- package/scss/components/SidePanel/_side-panel.scss +0 -13
- package/scss/components/_index-released-only.scss +1 -0
- package/es/feature-flags.d.ts +0 -1
- package/es/feature-flags.js +0 -22
- package/es/patterns/DeleteAndRemove/_story-assets/utils.d.ts +0 -7
- package/lib/feature-flags.d.ts +0 -1
- package/lib/feature-flags.js +0 -43
|
@@ -7,6 +7,8 @@
|
|
|
7
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
12
|
export interface CoachmarkProps {
|
|
11
13
|
/**
|
|
12
14
|
* Provide the contents of the Coachmark.
|
|
@@ -40,8 +42,12 @@ export interface CoachmarkProps {
|
|
|
40
42
|
*/
|
|
41
43
|
floating?: boolean;
|
|
42
44
|
}
|
|
45
|
+
type CoachmarkContentComponent = FC<CoachmarkContentProps> & {
|
|
46
|
+
Header: FC<ContentHeaderProps>;
|
|
47
|
+
Body: FC<ContentBodyProps>;
|
|
48
|
+
};
|
|
43
49
|
export type CoachmarkComponent = ForwardRefExoticComponent<CoachmarkProps & RefAttributes<HTMLDivElement>> & {
|
|
44
|
-
Content:
|
|
50
|
+
Content: CoachmarkContentComponent;
|
|
45
51
|
};
|
|
46
52
|
/**
|
|
47
53
|
* Coachmarks are used to call out specific functionality or concepts
|
|
@@ -49,3 +55,4 @@ export type CoachmarkComponent = ForwardRefExoticComponent<CoachmarkProps & RefA
|
|
|
49
55
|
* user to gain understanding of the product's main value and discover new use cases.
|
|
50
56
|
*/
|
|
51
57
|
export declare const Coachmark: CoachmarkComponent;
|
|
58
|
+
export {};
|
|
@@ -12,6 +12,8 @@ import cx from 'classnames';
|
|
|
12
12
|
import { getDevtoolsProps } from '../../../../global/js/utils/devtools.js';
|
|
13
13
|
import { CoachmarkContext, blockClass } from './context.js';
|
|
14
14
|
import CoachmarkContent from './CoachmarkContent.js';
|
|
15
|
+
import { ContentHeader } from './ContentHeader.js';
|
|
16
|
+
import { ContentBody } from './ContentBody.js';
|
|
15
17
|
import { useIsomorphicEffect } from '../../../../global/js/hooks/useIsomorphicEffect.js';
|
|
16
18
|
|
|
17
19
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
|
@@ -124,7 +126,8 @@ const Coachmark = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
124
126
|
}, children)));
|
|
125
127
|
});
|
|
126
128
|
Coachmark.Content = CoachmarkContent;
|
|
127
|
-
|
|
129
|
+
Coachmark.Content.Header = ContentHeader;
|
|
130
|
+
Coachmark.Content.Body = ContentBody;
|
|
128
131
|
// The display name of the component, used by React. Note that displayName
|
|
129
132
|
// is used in preference to relying on function.name.
|
|
130
133
|
Coachmark.displayName = componentName;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2020, 2025
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
+
import PropTypes from '../../../../../_virtual/index.js';
|
|
10
|
+
import React__default, { forwardRef } from 'react';
|
|
11
|
+
import cx from 'classnames';
|
|
12
|
+
import { getDevtoolsProps } from '../../../../../global/js/utils/devtools.js';
|
|
13
|
+
import { pkg } from '../../../../../settings.js';
|
|
14
|
+
import { Button } from '@carbon/react';
|
|
15
|
+
|
|
16
|
+
var _circle;
|
|
17
|
+
|
|
18
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
|
19
|
+
const blockClass = `${pkg.prefix}--coachmark-beacon`;
|
|
20
|
+
const componentName = 'CoachmarkBeacon';
|
|
21
|
+
/**
|
|
22
|
+
* Use beacon for the target prop of a Coachmark component.
|
|
23
|
+
*/
|
|
24
|
+
const CoachmarkBeacon = /*#__PURE__*/forwardRef((props, ref) => {
|
|
25
|
+
const {
|
|
26
|
+
label,
|
|
27
|
+
className,
|
|
28
|
+
kind = 'default',
|
|
29
|
+
buttonProps,
|
|
30
|
+
...rest
|
|
31
|
+
} = props;
|
|
32
|
+
return /*#__PURE__*/React__default.createElement("div", _extends({
|
|
33
|
+
className: cx(blockClass, `${blockClass}-${kind}`, className)
|
|
34
|
+
}, getDevtoolsProps(componentName), {
|
|
35
|
+
role: "tooltip"
|
|
36
|
+
}, rest, {
|
|
37
|
+
ref: ref
|
|
38
|
+
}), /*#__PURE__*/React__default.createElement("button", _extends({
|
|
39
|
+
type: "button"
|
|
40
|
+
}, buttonProps, {
|
|
41
|
+
className: `${blockClass}__target`
|
|
42
|
+
}), /*#__PURE__*/React__default.createElement("svg", {
|
|
43
|
+
className: `${blockClass}__center`,
|
|
44
|
+
"aria-label": label
|
|
45
|
+
}, /*#__PURE__*/React__default.createElement("title", null, label), _circle || (_circle = /*#__PURE__*/React__default.createElement("circle", {
|
|
46
|
+
r: 1,
|
|
47
|
+
cx: 38,
|
|
48
|
+
cy: 38
|
|
49
|
+
})))));
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
// The display name of the component, used by React. Note that displayName
|
|
53
|
+
// is used in preference to relying on function.name.
|
|
54
|
+
CoachmarkBeacon.displayName = componentName;
|
|
55
|
+
|
|
56
|
+
// The types and DocGen commentary for the component props,
|
|
57
|
+
// in alphabetical order (for consistency).
|
|
58
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
|
59
|
+
CoachmarkBeacon.propTypes = {
|
|
60
|
+
/**
|
|
61
|
+
* button props
|
|
62
|
+
*/
|
|
63
|
+
buttonProps: PropTypes.shape({
|
|
64
|
+
/**@ts-ignore*/
|
|
65
|
+
...Button.propTypes,
|
|
66
|
+
/**@ts-ignore*/
|
|
67
|
+
id: PropTypes.string,
|
|
68
|
+
onClick: PropTypes.func,
|
|
69
|
+
onDoubleClick: PropTypes.func,
|
|
70
|
+
tabIndex: PropTypes.number,
|
|
71
|
+
['aria-expanded']: PropTypes.bool
|
|
72
|
+
}),
|
|
73
|
+
/**
|
|
74
|
+
* Optional class name for this component.
|
|
75
|
+
*/
|
|
76
|
+
className: PropTypes.string,
|
|
77
|
+
/**
|
|
78
|
+
* What style of beacon.
|
|
79
|
+
* BEACON_KIND is an exported enum from the Coachmark and can be used for this value.
|
|
80
|
+
* @see {@link BEACON_KIND}
|
|
81
|
+
*/
|
|
82
|
+
kind: PropTypes.oneOf(['default']),
|
|
83
|
+
/**
|
|
84
|
+
* The aria label.
|
|
85
|
+
*/
|
|
86
|
+
label: PropTypes.string.isRequired
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
export { CoachmarkBeacon };
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2025
|
|
2
|
+
* Copyright IBM Corp. 2020, 2025
|
|
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
|
+
|
|
8
|
+
export { CoachmarkBeacon } from './CoachmarkBeacon.js';
|
|
@@ -12,8 +12,6 @@ import { pkg } from '../../../../settings.js';
|
|
|
12
12
|
import { CoachmarkContext, blockClass } from './context.js';
|
|
13
13
|
import { CoachmarkBubble } from './CoachmarkBubble/CoachmarkBubble.js';
|
|
14
14
|
import './CoachmarkBubble/CoachmarkBubbleHeader.js';
|
|
15
|
-
import ContentHeader from './ContentHeader.js';
|
|
16
|
-
import ContentBody from './ContentBody.js';
|
|
17
15
|
import cx from 'classnames';
|
|
18
16
|
|
|
19
17
|
const CoachmarkContent = /*#__PURE__*/forwardRef((props, ref) => {
|
|
@@ -93,8 +91,6 @@ const CoachmarkContent = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
93
91
|
caret: floating
|
|
94
92
|
}, rest), children));
|
|
95
93
|
});
|
|
96
|
-
CoachmarkContent.Header = ContentHeader;
|
|
97
|
-
CoachmarkContent.Body = ContentBody;
|
|
98
94
|
CoachmarkContent.propTypes = {
|
|
99
95
|
/**
|
|
100
96
|
* This is a required callback that has to return the content to render in the body section.
|
|
@@ -19,5 +19,5 @@ export interface ContentBodyProps {
|
|
|
19
19
|
export type EnrichedChildren = {
|
|
20
20
|
children: ReactNode;
|
|
21
21
|
};
|
|
22
|
-
declare const ContentBody: React.ForwardRefExoticComponent<ContentBodyProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
export declare const ContentBody: React.ForwardRefExoticComponent<ContentBodyProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
23
|
export default ContentBody;
|
|
@@ -17,5 +17,4 @@ export interface ContentHeaderProps {
|
|
|
17
17
|
*/
|
|
18
18
|
children?: string;
|
|
19
19
|
}
|
|
20
|
-
declare const ContentHeader: React.ForwardRefExoticComponent<ContentHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
-
export default ContentHeader;
|
|
20
|
+
export declare const ContentHeader: React.ForwardRefExoticComponent<ContentHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -5,3 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
export { Coachmark } from './Coachmark';
|
|
8
|
+
export type { CoachmarkProps, CoachmarkComponent } from './Coachmark';
|
|
9
|
+
export type { ContentBodyProps } from './ContentBody';
|
|
10
|
+
export type { ContentHeaderProps } from './ContentHeader';
|
|
11
|
+
export type { CoachmarkContentProps } from './CoachmarkContent';
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import '../../../feature-flags.js';
|
|
10
9
|
import React__default, { useContext, useRef, useEffect } from 'react';
|
|
11
10
|
import { usePrefix, TableContainer, Table } from '@carbon/react';
|
|
12
11
|
import { pkg } from '../../../settings.js';
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import '../../../../../feature-flags.js';
|
|
10
9
|
import React__default, { useContext, useEffect } from 'react';
|
|
11
10
|
import PropTypes from '../../../../../_virtual/index.js';
|
|
12
11
|
import CustomizeColumnsTearsheet from './CustomizeColumnsTearsheet.js';
|
|
@@ -10,6 +10,20 @@ import PropTypes from '../../_virtual/index.js';
|
|
|
10
10
|
import React__default, { useContext, createContext, useState, useRef, useEffect } from 'react';
|
|
11
11
|
import { deprecateProp } from '../../global/js/utils/props-helper.js';
|
|
12
12
|
|
|
13
|
+
//merge c4p feature flags with carbon feature flags
|
|
14
|
+
FeatureFlags$1.merge({
|
|
15
|
+
'default-portal-target-body': true,
|
|
16
|
+
'enable-datagrid-useInlineEdit': false,
|
|
17
|
+
'enable-datagrid-useEditableCell': false,
|
|
18
|
+
'enable-datagrid-useCustomizeColumns': false,
|
|
19
|
+
'ExampleComponent.secondaryIcon': false,
|
|
20
|
+
'ExampleComponent.useExample': false,
|
|
21
|
+
'enable-test-flag-a': false,
|
|
22
|
+
// used in testing
|
|
23
|
+
'enable-test-flag-b': true,
|
|
24
|
+
// used in testing
|
|
25
|
+
enableSidepanelResizer: false
|
|
26
|
+
});
|
|
13
27
|
/**
|
|
14
28
|
* Our FeatureFlagContext is used alongside the FeatureFlags component to enable
|
|
15
29
|
* or disable feature flags in a given React tree
|
|
@@ -524,7 +524,9 @@ const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHea
|
|
|
524
524
|
return /*#__PURE__*/React__default.createElement("div", _extends({
|
|
525
525
|
className: classNames,
|
|
526
526
|
ref: ref
|
|
527
|
-
}, other), /*#__PURE__*/React__default.createElement(Grid,
|
|
527
|
+
}, other), /*#__PURE__*/React__default.createElement(Grid, {
|
|
528
|
+
condensed: true
|
|
529
|
+
}, /*#__PURE__*/React__default.createElement(Column, {
|
|
528
530
|
lg: 16,
|
|
529
531
|
md: 8,
|
|
530
532
|
sm: 4
|
|
@@ -533,7 +535,9 @@ const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHea
|
|
|
533
535
|
return /*#__PURE__*/React__default.createElement("div", _extends({
|
|
534
536
|
className: classNames,
|
|
535
537
|
ref: ref
|
|
536
|
-
}, other), /*#__PURE__*/React__default.createElement(Grid,
|
|
538
|
+
}, other), /*#__PURE__*/React__default.createElement(Grid, {
|
|
539
|
+
condensed: true
|
|
540
|
+
}, /*#__PURE__*/React__default.createElement(Column, {
|
|
537
541
|
lg: 16,
|
|
538
542
|
md: 8,
|
|
539
543
|
sm: 4
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2025, 2025
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React from 'react';
|
|
8
|
+
export declare const pageActionButtonItems: {
|
|
9
|
+
id: string;
|
|
10
|
+
onClick: () => void;
|
|
11
|
+
body: React.JSX.Element;
|
|
12
|
+
menuItem: {
|
|
13
|
+
label: string;
|
|
14
|
+
};
|
|
15
|
+
}[];
|
|
@@ -4,7 +4,6 @@
|
|
|
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 '../../feature-flags';
|
|
8
7
|
import { ButtonProps } from '@carbon/react';
|
|
9
8
|
import React, { ReactNode, RefObject } from 'react';
|
|
10
9
|
type SidePanelBaseProps = {
|
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import { ArrowLeft, Close } from '@carbon/react/icons';
|
|
10
|
-
import '../../feature-flags.js';
|
|
11
10
|
import { Button, Section, IconButton, Layer, Heading } from '@carbon/react';
|
|
12
11
|
import { useFeatureFlag } from '../FeatureFlags/index.js';
|
|
13
12
|
import React__default, { useState, useRef, useEffect, useCallback } from 'react';
|
|
@@ -411,11 +410,9 @@ const SidePanel = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
411
410
|
ref: titleRef
|
|
412
411
|
}, /*#__PURE__*/React__default.createElement(Heading, {
|
|
413
412
|
className: `${blockClass}__title-text`,
|
|
414
|
-
title: title,
|
|
415
413
|
"aria-hidden": false
|
|
416
414
|
}, title), doAnimateTitle && !shouldReduceMotion && /*#__PURE__*/React__default.createElement(Heading, {
|
|
417
415
|
className: `${blockClass}__collapsed-title-text`,
|
|
418
|
-
title: title,
|
|
419
416
|
"aria-hidden": true
|
|
420
417
|
}, title));
|
|
421
418
|
const renderHeader = () => {
|
package/es/components/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import '../feature-flags';
|
|
2
1
|
/**
|
|
3
2
|
* Stable components
|
|
4
3
|
*/
|
|
@@ -44,6 +43,7 @@ export * from './WebTerminal';
|
|
|
44
43
|
*/
|
|
45
44
|
export * as preview__Coachmark from './Coachmark/next/Coachmark';
|
|
46
45
|
export * as preview__CoachmarkTagline from './Coachmark/next/Coachmark/CoachmarkTagline';
|
|
46
|
+
export * as preview__CoachmarkBeacon from './Coachmark/next/Coachmark/CoachmarkBeacon';
|
|
47
47
|
export { FeatureFlags as preview__FeatureFlags, useFeatureFlag as preview__useFeatureFlag, useFeatureFlags as preview__useFeatureFlags, } from './FeatureFlags';
|
|
48
48
|
export * as preview__PageHeader from './PageHeader/next';
|
|
49
49
|
export { BigNumber as previewCandidate__BigNumber, type BigNumberProps, } from './BigNumber';
|
package/es/index.d.ts
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
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 './feature-flags';
|
|
8
7
|
export { pkg } from './settings';
|
|
9
8
|
export { usePrefix } from './global/js/hooks';
|
|
10
9
|
export * from './components';
|
package/es/index.js
CHANGED
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import './feature-flags.js';
|
|
10
9
|
export { pkg } from './settings.js';
|
|
11
10
|
export { AboutModal } from './components/AboutModal/AboutModal.js';
|
|
12
11
|
export { APIKeyModal } from './components/APIKeyModal/APIKeyModal.js';
|
|
@@ -57,9 +56,11 @@ import * as index from './components/Coachmark/next/Coachmark/index.js';
|
|
|
57
56
|
export { index as preview__Coachmark };
|
|
58
57
|
import * as index$1 from './components/Coachmark/next/Coachmark/CoachmarkTagline/index.js';
|
|
59
58
|
export { index$1 as preview__CoachmarkTagline };
|
|
59
|
+
import * as index$2 from './components/Coachmark/next/Coachmark/CoachmarkBeacon/index.js';
|
|
60
|
+
export { index$2 as preview__CoachmarkBeacon };
|
|
60
61
|
export { FeatureFlags as preview__FeatureFlags, useFeatureFlag as preview__useFeatureFlag, useFeatureFlags as preview__useFeatureFlags } from './components/FeatureFlags/index.js';
|
|
61
|
-
import * as index$
|
|
62
|
-
export { index$
|
|
62
|
+
import * as index$3 from './components/PageHeader/next/index.js';
|
|
63
|
+
export { index$3 as preview__PageHeader };
|
|
63
64
|
export { BigNumber as previewCandidate__BigNumber } from './components/BigNumber/BigNumber.js';
|
|
64
65
|
export { Coachmark as previewCandidate__Coachmark } from './components/Coachmark/Coachmark.js';
|
|
65
66
|
export { BEACON_KIND, COACHMARK_ALIGNMENT, COACHMARK_OVERLAY_KIND } from './components/Coachmark/utils/enums.js';
|
|
@@ -7,6 +7,8 @@
|
|
|
7
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
12
|
export interface CoachmarkProps {
|
|
11
13
|
/**
|
|
12
14
|
* Provide the contents of the Coachmark.
|
|
@@ -40,8 +42,12 @@ export interface CoachmarkProps {
|
|
|
40
42
|
*/
|
|
41
43
|
floating?: boolean;
|
|
42
44
|
}
|
|
45
|
+
type CoachmarkContentComponent = FC<CoachmarkContentProps> & {
|
|
46
|
+
Header: FC<ContentHeaderProps>;
|
|
47
|
+
Body: FC<ContentBodyProps>;
|
|
48
|
+
};
|
|
43
49
|
export type CoachmarkComponent = ForwardRefExoticComponent<CoachmarkProps & RefAttributes<HTMLDivElement>> & {
|
|
44
|
-
Content:
|
|
50
|
+
Content: CoachmarkContentComponent;
|
|
45
51
|
};
|
|
46
52
|
/**
|
|
47
53
|
* Coachmarks are used to call out specific functionality or concepts
|
|
@@ -49,3 +55,4 @@ export type CoachmarkComponent = ForwardRefExoticComponent<CoachmarkProps & RefA
|
|
|
49
55
|
* user to gain understanding of the product's main value and discover new use cases.
|
|
50
56
|
*/
|
|
51
57
|
export declare const Coachmark: CoachmarkComponent;
|
|
58
|
+
export {};
|
|
@@ -14,6 +14,8 @@ var cx = require('classnames');
|
|
|
14
14
|
var devtools = require('../../../../global/js/utils/devtools.js');
|
|
15
15
|
var context = require('./context.js');
|
|
16
16
|
var CoachmarkContent = require('./CoachmarkContent.js');
|
|
17
|
+
var ContentHeader = require('./ContentHeader.js');
|
|
18
|
+
var ContentBody = require('./ContentBody.js');
|
|
17
19
|
var useIsomorphicEffect = require('../../../../global/js/hooks/useIsomorphicEffect.js');
|
|
18
20
|
|
|
19
21
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
|
@@ -126,7 +128,8 @@ const Coachmark = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
126
128
|
}, children)));
|
|
127
129
|
});
|
|
128
130
|
Coachmark.Content = CoachmarkContent.default;
|
|
129
|
-
|
|
131
|
+
Coachmark.Content.Header = ContentHeader.ContentHeader;
|
|
132
|
+
Coachmark.Content.Body = ContentBody.ContentBody;
|
|
130
133
|
// The display name of the component, used by React. Note that displayName
|
|
131
134
|
// is used in preference to relying on function.name.
|
|
132
135
|
Coachmark.displayName = componentName;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2020, 2025
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
11
|
+
var index = require('../../../../../_virtual/index.js');
|
|
12
|
+
var React = require('react');
|
|
13
|
+
var cx = require('classnames');
|
|
14
|
+
var devtools = require('../../../../../global/js/utils/devtools.js');
|
|
15
|
+
var settings = require('../../../../../settings.js');
|
|
16
|
+
var react = require('@carbon/react');
|
|
17
|
+
|
|
18
|
+
var _circle;
|
|
19
|
+
|
|
20
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
|
21
|
+
const blockClass = `${settings.pkg.prefix}--coachmark-beacon`;
|
|
22
|
+
const componentName = 'CoachmarkBeacon';
|
|
23
|
+
/**
|
|
24
|
+
* Use beacon for the target prop of a Coachmark component.
|
|
25
|
+
*/
|
|
26
|
+
const CoachmarkBeacon = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
27
|
+
const {
|
|
28
|
+
label,
|
|
29
|
+
className,
|
|
30
|
+
kind = 'default',
|
|
31
|
+
buttonProps,
|
|
32
|
+
...rest
|
|
33
|
+
} = props;
|
|
34
|
+
return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
|
|
35
|
+
className: cx(blockClass, `${blockClass}-${kind}`, className)
|
|
36
|
+
}, devtools.getDevtoolsProps(componentName), {
|
|
37
|
+
role: "tooltip"
|
|
38
|
+
}, rest, {
|
|
39
|
+
ref: ref
|
|
40
|
+
}), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
|
|
41
|
+
type: "button"
|
|
42
|
+
}, buttonProps, {
|
|
43
|
+
className: `${blockClass}__target`
|
|
44
|
+
}), /*#__PURE__*/React.createElement("svg", {
|
|
45
|
+
className: `${blockClass}__center`,
|
|
46
|
+
"aria-label": label
|
|
47
|
+
}, /*#__PURE__*/React.createElement("title", null, label), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
|
|
48
|
+
r: 1,
|
|
49
|
+
cx: 38,
|
|
50
|
+
cy: 38
|
|
51
|
+
})))));
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
// The display name of the component, used by React. Note that displayName
|
|
55
|
+
// is used in preference to relying on function.name.
|
|
56
|
+
CoachmarkBeacon.displayName = componentName;
|
|
57
|
+
|
|
58
|
+
// The types and DocGen commentary for the component props,
|
|
59
|
+
// in alphabetical order (for consistency).
|
|
60
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
|
61
|
+
CoachmarkBeacon.propTypes = {
|
|
62
|
+
/**
|
|
63
|
+
* button props
|
|
64
|
+
*/
|
|
65
|
+
buttonProps: index.default.shape({
|
|
66
|
+
/**@ts-ignore*/
|
|
67
|
+
...react.Button.propTypes,
|
|
68
|
+
/**@ts-ignore*/
|
|
69
|
+
id: index.default.string,
|
|
70
|
+
onClick: index.default.func,
|
|
71
|
+
onDoubleClick: index.default.func,
|
|
72
|
+
tabIndex: index.default.number,
|
|
73
|
+
['aria-expanded']: index.default.bool
|
|
74
|
+
}),
|
|
75
|
+
/**
|
|
76
|
+
* Optional class name for this component.
|
|
77
|
+
*/
|
|
78
|
+
className: index.default.string,
|
|
79
|
+
/**
|
|
80
|
+
* What style of beacon.
|
|
81
|
+
* BEACON_KIND is an exported enum from the Coachmark and can be used for this value.
|
|
82
|
+
* @see {@link BEACON_KIND}
|
|
83
|
+
*/
|
|
84
|
+
kind: index.default.oneOf(['default']),
|
|
85
|
+
/**
|
|
86
|
+
* The aria label.
|
|
87
|
+
*/
|
|
88
|
+
label: index.default.string.isRequired
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
exports.CoachmarkBeacon = CoachmarkBeacon;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2020, 2025
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
var CoachmarkBeacon = require('./CoachmarkBeacon.js');
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
exports.CoachmarkBeacon = CoachmarkBeacon.CoachmarkBeacon;
|
|
@@ -16,8 +16,6 @@ var settings = require('../../../../settings.js');
|
|
|
16
16
|
var context = require('./context.js');
|
|
17
17
|
var CoachmarkBubble = require('./CoachmarkBubble/CoachmarkBubble.js');
|
|
18
18
|
require('./CoachmarkBubble/CoachmarkBubbleHeader.js');
|
|
19
|
-
var ContentHeader = require('./ContentHeader.js');
|
|
20
|
-
var ContentBody = require('./ContentBody.js');
|
|
21
19
|
var cx = require('classnames');
|
|
22
20
|
|
|
23
21
|
const CoachmarkContent = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
@@ -97,8 +95,6 @@ const CoachmarkContent = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
97
95
|
caret: floating
|
|
98
96
|
}, rest), children));
|
|
99
97
|
});
|
|
100
|
-
CoachmarkContent.Header = ContentHeader.default;
|
|
101
|
-
CoachmarkContent.Body = ContentBody.default;
|
|
102
98
|
CoachmarkContent.propTypes = {
|
|
103
99
|
/**
|
|
104
100
|
* This is a required callback that has to return the content to render in the body section.
|
|
@@ -19,5 +19,5 @@ export interface ContentBodyProps {
|
|
|
19
19
|
export type EnrichedChildren = {
|
|
20
20
|
children: ReactNode;
|
|
21
21
|
};
|
|
22
|
-
declare const ContentBody: React.ForwardRefExoticComponent<ContentBodyProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
export declare const ContentBody: React.ForwardRefExoticComponent<ContentBodyProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
23
|
export default ContentBody;
|
|
@@ -17,5 +17,4 @@ export interface ContentHeaderProps {
|
|
|
17
17
|
*/
|
|
18
18
|
children?: string;
|
|
19
19
|
}
|
|
20
|
-
declare const ContentHeader: React.ForwardRefExoticComponent<ContentHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
-
export default ContentHeader;
|
|
20
|
+
export declare const ContentHeader: React.ForwardRefExoticComponent<ContentHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -7,8 +7,6 @@
|
|
|
7
7
|
|
|
8
8
|
'use strict';
|
|
9
9
|
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
10
|
var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
11
|
var react = require('@carbon/react');
|
|
14
12
|
var React = require('react');
|
|
@@ -104,4 +102,4 @@ ContentHeader.propTypes = {
|
|
|
104
102
|
dragIconDescription: index.default.string
|
|
105
103
|
};
|
|
106
104
|
|
|
107
|
-
exports.
|
|
105
|
+
exports.ContentHeader = ContentHeader;
|
|
@@ -5,3 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
export { Coachmark } from './Coachmark';
|
|
8
|
+
export type { CoachmarkProps, CoachmarkComponent } from './Coachmark';
|
|
9
|
+
export type { ContentBodyProps } from './ContentBody';
|
|
10
|
+
export type { ContentHeaderProps } from './ContentHeader';
|
|
11
|
+
export type { CoachmarkContentProps } from './CoachmarkContent';
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
'use strict';
|
|
9
9
|
|
|
10
10
|
var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
11
|
-
require('../../../feature-flags.js');
|
|
12
11
|
var React = require('react');
|
|
13
12
|
var react = require('@carbon/react');
|
|
14
13
|
var settings = require('../../../settings.js');
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
12
|
var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
-
require('../../../../../feature-flags.js');
|
|
14
13
|
var React = require('react');
|
|
15
14
|
var index = require('../../../../../_virtual/index.js');
|
|
16
15
|
var CustomizeColumnsTearsheet = require('./CustomizeColumnsTearsheet.js');
|