@carbon/ibm-products 2.75.0 → 2.76.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 +43 -11
- 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 +34 -6
- 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 +43 -11
- 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 +43 -11
- 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/CoachmarkTagline/CoachmarkTagline.d.ts +39 -0
- package/es/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.js +97 -0
- package/es/components/Coachmark/next/Coachmark/CoachmarkTagline/index.d.ts +8 -0
- package/es/components/Coachmark/next/Coachmark/CoachmarkTagline/index.js +8 -0
- package/es/components/PageHeader/next/PageHeader.d.ts +10 -10
- package/es/components/PageHeader/next/PageHeader.js +55 -71
- package/es/components/PageHeader/next/index.d.ts +2 -2
- package/es/components/TagOverflow/TagOverflowPopover.js +7 -2
- package/es/components/TagSet/TagSetOverflow.js +7 -2
- package/es/components/index.d.ts +1 -0
- package/es/index.js +20 -18
- package/es/patterns/DeleteAndRemove/_story-assets/utils.d.ts +7 -0
- package/lib/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.d.ts +39 -0
- package/lib/components/Coachmark/next/Coachmark/CoachmarkTagline/CoachmarkTagline.js +99 -0
- package/lib/components/Coachmark/next/Coachmark/CoachmarkTagline/index.d.ts +8 -0
- package/lib/components/Coachmark/next/Coachmark/CoachmarkTagline/index.js +14 -0
- package/lib/components/PageHeader/next/PageHeader.d.ts +10 -10
- package/lib/components/PageHeader/next/PageHeader.js +54 -68
- package/lib/components/PageHeader/next/index.d.ts +2 -2
- package/lib/components/TagOverflow/TagOverflowPopover.js +7 -2
- package/lib/components/TagSet/TagSetOverflow.js +7 -2
- package/lib/components/index.d.ts +1 -0
- package/lib/index.js +29 -27
- package/lib/patterns/DeleteAndRemove/_story-assets/utils.d.ts +7 -0
- package/package.json +7 -7
- package/scss/components/PageHeader/_page-header.scss +26 -1
- package/scss/components/TagOverflow/_tag-overflow.scss +12 -6
- package/scss/components/TagSet/_tag-set.scss +12 -6
- package/telemetry.yml +4 -2
@@ -0,0 +1,39 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 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, { ElementType } from 'react';
|
8
|
+
import { ButtonProps } from '@carbon/react';
|
9
|
+
export interface CoachmarkButtonProps extends ButtonProps<ElementType> {
|
10
|
+
onClick?(): void;
|
11
|
+
onDoubleClick?(): void;
|
12
|
+
tabIndex?: number;
|
13
|
+
['aria-expanded']?: boolean;
|
14
|
+
id?: string;
|
15
|
+
}
|
16
|
+
export interface CoachmarkTaglineProps {
|
17
|
+
/**
|
18
|
+
* Tooltip text and aria label for the Close button icon.
|
19
|
+
*/
|
20
|
+
closeIconDescription?: string;
|
21
|
+
/**
|
22
|
+
* Function to call when the close button is clicked.
|
23
|
+
*/
|
24
|
+
onClose?: () => void;
|
25
|
+
/**
|
26
|
+
* The title of the tagline.
|
27
|
+
*/
|
28
|
+
title: string;
|
29
|
+
/**
|
30
|
+
* button props
|
31
|
+
*/
|
32
|
+
buttonProps?: CoachmarkButtonProps;
|
33
|
+
isOpen?: boolean;
|
34
|
+
}
|
35
|
+
/**
|
36
|
+
* DO NOT USE. This component is for the exclusive use
|
37
|
+
* of other Onboarding components.
|
38
|
+
*/
|
39
|
+
export declare const CoachmarkTagline: React.ForwardRefExoticComponent<CoachmarkTaglineProps & React.RefAttributes<HTMLDivElement>>;
|
@@ -0,0 +1,97 @@
|
|
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 React__default from 'react';
|
10
|
+
import PropTypes from '../../../../../_virtual/index.js';
|
11
|
+
import cx from 'classnames';
|
12
|
+
import { Idea, Close } from '@carbon/react/icons';
|
13
|
+
import { Button } from '@carbon/react';
|
14
|
+
import { getDevtoolsProps } from '../../../../../global/js/utils/devtools.js';
|
15
|
+
import { pkg } from '../../../../../settings.js';
|
16
|
+
|
17
|
+
var _Idea;
|
18
|
+
|
19
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
20
|
+
const blockClass = `${pkg.prefix}--coachmark-tagline`;
|
21
|
+
const componentName = 'CoachmarkTagline';
|
22
|
+
const defaults = {
|
23
|
+
onClose: () => {},
|
24
|
+
closeIconDescription: 'Close'
|
25
|
+
};
|
26
|
+
/**
|
27
|
+
* DO NOT USE. This component is for the exclusive use
|
28
|
+
* of other Onboarding components.
|
29
|
+
*/
|
30
|
+
const CoachmarkTagline = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
31
|
+
let {
|
32
|
+
closeIconDescription = defaults.closeIconDescription,
|
33
|
+
onClose = defaults.onClose,
|
34
|
+
title,
|
35
|
+
buttonProps,
|
36
|
+
isOpen,
|
37
|
+
...rest
|
38
|
+
} = _ref;
|
39
|
+
return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
|
40
|
+
className: cx(blockClass, isOpen && `${blockClass}--is-open`),
|
41
|
+
ref: ref
|
42
|
+
}, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("button", _extends({
|
43
|
+
className: `${blockClass}__cta`,
|
44
|
+
type: "button"
|
45
|
+
}, buttonProps), /*#__PURE__*/React__default.createElement("div", {
|
46
|
+
className: `${blockClass}__idea`
|
47
|
+
}, _Idea || (_Idea = /*#__PURE__*/React__default.createElement(Idea, {
|
48
|
+
size: 16
|
49
|
+
}))), /*#__PURE__*/React__default.createElement("div", null, title)), /*#__PURE__*/React__default.createElement("div", {
|
50
|
+
className: `${blockClass}--close-btn-container`
|
51
|
+
}, /*#__PURE__*/React__default.createElement(Button, {
|
52
|
+
kind: "ghost",
|
53
|
+
size: "sm",
|
54
|
+
renderIcon: Close,
|
55
|
+
iconDescription: closeIconDescription,
|
56
|
+
hasIconOnly: true,
|
57
|
+
className: `${blockClass}--close-btn`,
|
58
|
+
onClick: onClose
|
59
|
+
})));
|
60
|
+
});
|
61
|
+
|
62
|
+
// The display name of the component, used by React. Note that displayName
|
63
|
+
// is used in preference to relying on function.name.
|
64
|
+
CoachmarkTagline.displayName = componentName;
|
65
|
+
|
66
|
+
// The types and DocGen commentary for the component props,
|
67
|
+
// in alphabetical order (for consistency).
|
68
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
69
|
+
CoachmarkTagline.propTypes = {
|
70
|
+
/**
|
71
|
+
* button props
|
72
|
+
*/
|
73
|
+
buttonProps: PropTypes.shape({
|
74
|
+
/**@ts-ignore*/
|
75
|
+
...Button.propTypes,
|
76
|
+
/**@ts-ignore*/
|
77
|
+
id: PropTypes.string,
|
78
|
+
onClick: PropTypes.func,
|
79
|
+
onDoubleClick: PropTypes.func,
|
80
|
+
tabIndex: PropTypes.number,
|
81
|
+
['aria-expanded']: PropTypes.bool
|
82
|
+
}),
|
83
|
+
/**
|
84
|
+
* Tooltip text and aria label for the Close button icon.
|
85
|
+
*/
|
86
|
+
closeIconDescription: PropTypes.string,
|
87
|
+
/**
|
88
|
+
* Function to call when the close button is clicked.
|
89
|
+
*/
|
90
|
+
onClose: PropTypes.func,
|
91
|
+
/**
|
92
|
+
* The title of the tagline.
|
93
|
+
*/
|
94
|
+
title: PropTypes.string.isRequired
|
95
|
+
};
|
96
|
+
|
97
|
+
export { CoachmarkTagline };
|
@@ -0,0 +1,8 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 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
|
+
export { CoachmarkTagline } from './CoachmarkTagline';
|
8
|
+
export type { CoachmarkTaglineProps } from './CoachmarkTagline';
|
@@ -6,7 +6,6 @@
|
|
6
6
|
*/
|
7
7
|
import React, { type ComponentType, type FunctionComponent } from 'react';
|
8
8
|
import { IconButtonProps, BreadcrumbItemProps, BreadcrumbProps } from '@carbon/react';
|
9
|
-
import { TYPES } from '@carbon/react/es/components/Tag/Tag';
|
10
9
|
/**
|
11
10
|
* ----------
|
12
11
|
* PageHeader
|
@@ -199,19 +198,19 @@ declare const PageHeaderHeroImage: {
|
|
199
198
|
* PageHeaderTabBar
|
200
199
|
* ----------------
|
201
200
|
*/
|
202
|
-
interface TagItem {
|
203
|
-
type: keyof typeof TYPES;
|
204
|
-
text: string;
|
205
|
-
size?: 'sm' | 'md' | 'lg';
|
206
|
-
id: string;
|
207
|
-
}
|
208
201
|
interface PageHeaderTabBarProps {
|
209
202
|
children?: React.ReactNode;
|
210
203
|
className?: string;
|
211
|
-
tags?:
|
204
|
+
tags?: React.ReactNode;
|
212
205
|
scroller?: React.ReactNode;
|
213
206
|
}
|
214
207
|
declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
|
208
|
+
interface PageHeaderTagOverflowProps {
|
209
|
+
children: React.ReactNode;
|
210
|
+
renderOverflowTag?: (hiddenBreadcrumbs: HTMLElement[], handleOverflowClick: (event: React.MouseEvent) => void, openPopover: boolean) => React.ReactElement;
|
211
|
+
renderPopoverContent?: (hiddenBreadcrumbs: HTMLElement[]) => React.ReactElement;
|
212
|
+
}
|
213
|
+
declare const PageHeaderTagOverflow: React.ForwardRefExoticComponent<PageHeaderTagOverflowProps & React.RefAttributes<HTMLDivElement>>;
|
215
214
|
interface PageHeaderScrollButtonProps extends IconButtonProps {
|
216
215
|
collapseText?: string;
|
217
216
|
expandText?: string;
|
@@ -288,5 +287,6 @@ declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & Re
|
|
288
287
|
declare const ScrollButton: React.ForwardRefExoticComponent<PageHeaderScrollButtonProps & React.RefAttributes<HTMLDivElement>>;
|
289
288
|
declare const TitleBreadcrumb: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
|
290
289
|
declare const BreadcrumbOverflow: React.ForwardRefExoticComponent<PageHeaderBreadcrumbOverflowProps & React.RefAttributes<HTMLElement>>;
|
291
|
-
|
292
|
-
export
|
290
|
+
declare const TagOverflow: React.ForwardRefExoticComponent<PageHeaderTagOverflowProps & React.RefAttributes<HTMLDivElement>>;
|
291
|
+
export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, PageHeaderTagOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, TagOverflow, };
|
292
|
+
export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderScrollButtonProps, PageHeaderTagOverflowProps, };
|
@@ -6,16 +6,14 @@
|
|
6
6
|
*/
|
7
7
|
|
8
8
|
import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
9
|
-
import React__default, { forwardRef, useState, useRef, useEffect, useLayoutEffect,
|
9
|
+
import React__default, { forwardRef, useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
|
10
10
|
import PropTypes from '../../../_virtual/index.js';
|
11
11
|
import cx from 'classnames';
|
12
|
-
import { Grid, Column, DefinitionTooltip, unstable_Text, IconButton, BreadcrumbItem, usePrefix, Breadcrumb,
|
12
|
+
import { Grid, Column, DefinitionTooltip, unstable_Text, Popover, PopoverContent, IconButton, BreadcrumbItem, usePrefix, Breadcrumb, MenuButton, MenuItem, AspectRatio } from '@carbon/react';
|
13
13
|
import { breakpoints } from '@carbon/layout';
|
14
14
|
import { blockClass } from '../PageHeaderUtils.js';
|
15
15
|
import { createOverflowHandler } from './overflowHandler.js';
|
16
16
|
import { createOverflowHandler as createOverflowHandler$1 } from '@carbon/utilities';
|
17
|
-
import { useOverflowItems } from '../../../global/js/hooks/useOverflowItems/useOverflowItems.js';
|
18
|
-
import { useId } from '../../../global/js/utils/useId.js';
|
19
17
|
import { ChevronUp } from '@carbon/react/icons';
|
20
18
|
import { PageHeaderContext, usePageHeader } from './context.js';
|
21
19
|
import { getHeaderOffset, scrollableAncestor } from './utils.js';
|
@@ -521,7 +519,7 @@ const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHea
|
|
521
519
|
}, scroller);
|
522
520
|
|
523
521
|
// Early return if no tags are provided
|
524
|
-
if (!tags
|
522
|
+
if (!tags) {
|
525
523
|
return /*#__PURE__*/React__default.createElement("div", _extends({
|
526
524
|
className: classNames,
|
527
525
|
ref: ref
|
@@ -531,17 +529,29 @@ const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHea
|
|
531
529
|
sm: 4
|
532
530
|
}, children, renderScroller())));
|
533
531
|
}
|
532
|
+
return /*#__PURE__*/React__default.createElement("div", _extends({
|
533
|
+
className: classNames,
|
534
|
+
ref: ref
|
535
|
+
}, other), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
|
536
|
+
lg: 16,
|
537
|
+
md: 8,
|
538
|
+
sm: 4
|
539
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
540
|
+
className: cx(`${blockClass}__tab-bar--tablist`, {
|
541
|
+
[`${pkg.prefix}--page-header__tab-bar--with-scroller`]: !!scroller
|
542
|
+
})
|
543
|
+
}, children, tags, renderScroller()))));
|
544
|
+
});
|
545
|
+
PageHeaderTabBar.displayName = 'PageHeaderTabBar';
|
546
|
+
const PageHeaderTagOverflow = /*#__PURE__*/React__default.forwardRef(_ref8 => {
|
547
|
+
let {
|
548
|
+
renderOverflowTag,
|
549
|
+
renderPopoverContent,
|
550
|
+
children
|
551
|
+
} = _ref8;
|
534
552
|
const [openPopover, setOpenPopover] = useState(false);
|
535
|
-
const
|
536
|
-
const instanceId = useId('PageHeaderTabBar');
|
537
|
-
const tagsWithIds = useMemo(() => {
|
538
|
-
return tags.map((tag, index) => ({
|
539
|
-
...tag,
|
540
|
-
id: tag.id || `tag-${index}-${instanceId}`
|
541
|
-
}));
|
542
|
-
}, [instanceId, tags]);
|
553
|
+
const [hiddenTags, setHiddenTags] = useState([]);
|
543
554
|
const tagsContainerRef = useRef(null);
|
544
|
-
const offsetRef = useRef(null);
|
545
555
|
// To close popover when window resizes
|
546
556
|
useEffect(() => {
|
547
557
|
const handleResize = () => {
|
@@ -553,64 +563,36 @@ const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHea
|
|
553
563
|
window.removeEventListener('resize', handleResize);
|
554
564
|
};
|
555
565
|
}, []);
|
556
|
-
|
557
|
-
// overflow items hook
|
558
|
-
const {
|
559
|
-
visibleItems = [],
|
560
|
-
hiddenItems = [],
|
561
|
-
itemRefHandler = () => {}
|
562
|
-
} = useOverflowItems(tagsWithIds, tagsContainerRef, offsetRef) || {
|
563
|
-
visibleItems: [],
|
564
|
-
hiddenItems: [],
|
565
|
-
itemRefHandler: () => {}
|
566
|
-
};
|
567
566
|
const handleOverflowClick = useCallback(event => {
|
568
567
|
event.stopPropagation();
|
569
568
|
setOpenPopover(prev => !prev);
|
570
569
|
}, []);
|
571
|
-
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
|
576
|
-
|
577
|
-
|
578
|
-
|
579
|
-
|
580
|
-
|
581
|
-
className: `${
|
582
|
-
|
570
|
+
useEffect(() => {
|
571
|
+
createOverflowHandler({
|
572
|
+
container: tagsContainerRef.current,
|
573
|
+
onChange: (_, hidden) => {
|
574
|
+
setHiddenTags(hidden);
|
575
|
+
}
|
576
|
+
});
|
577
|
+
}, []);
|
578
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
579
|
+
ref: tagsContainerRef,
|
580
|
+
className: cx(`${pkg.prefix}--page-header--tag-overflow-container`, {
|
581
|
+
[`${pkg.prefix}--page-header--tag-overflow-container__has-no-hidden-items`]: !hiddenTags.length
|
582
|
+
})
|
583
|
+
}, children, /*#__PURE__*/React__default.createElement(Popover, {
|
583
584
|
open: openPopover,
|
584
|
-
onRequestClose: () => setOpenPopover(false)
|
585
|
-
|
586
|
-
|
587
|
-
|
588
|
-
text: `+${hiddenItems.length}`,
|
589
|
-
size: tagSize
|
590
|
-
}), /*#__PURE__*/React__default.createElement(PopoverContent, {
|
591
|
-
className: "tag-popover-content"
|
592
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
593
|
-
className: `${blockClass}__tags-popover-list`
|
594
|
-
}, hiddenItems.map(tag => /*#__PURE__*/React__default.createElement(Tag, {
|
595
|
-
key: tag.id,
|
596
|
-
type: tag.type,
|
597
|
-
size: tag.size
|
598
|
-
}, tag.text))))));
|
599
|
-
return /*#__PURE__*/React__default.createElement("div", _extends({
|
600
|
-
className: classNames,
|
601
|
-
ref: ref
|
602
|
-
}, other), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
|
603
|
-
lg: 16,
|
604
|
-
md: 8,
|
605
|
-
sm: 4
|
606
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
607
|
-
className: cx(`${blockClass}__tab-bar--tablist`, {
|
608
|
-
[`${pkg.prefix}--page-header__tab-bar--with-scroller`]: !!scroller
|
585
|
+
onRequestClose: () => setOpenPopover(false),
|
586
|
+
"data-fixed": true,
|
587
|
+
className: cx(`${pkg.prefix}--page-header--tag-overflow-popover`, {
|
588
|
+
[`${pkg.prefix}--page-header--tag-overflow-popover__hidden`]: !hiddenTags.length
|
609
589
|
})
|
610
|
-
},
|
590
|
+
}, renderOverflowTag?.(hiddenTags, handleOverflowClick, openPopover), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
|
591
|
+
className: `${blockClass}__tags-popover-list`
|
592
|
+
}, renderPopoverContent?.(hiddenTags)))));
|
611
593
|
});
|
612
|
-
|
613
|
-
const PageHeaderScrollButton = /*#__PURE__*/React__default.forwardRef(function PageHeaderExpander(
|
594
|
+
PageHeaderTagOverflow.displayName = 'PageHeaderTagOverflow';
|
595
|
+
const PageHeaderScrollButton = /*#__PURE__*/React__default.forwardRef(function PageHeaderExpander(_ref9, ref) {
|
614
596
|
let {
|
615
597
|
className,
|
616
598
|
children,
|
@@ -619,7 +601,7 @@ const PageHeaderScrollButton = /*#__PURE__*/React__default.forwardRef(function P
|
|
619
601
|
collapseText = 'Collapse',
|
620
602
|
expandText = 'Expand',
|
621
603
|
...other
|
622
|
-
} =
|
604
|
+
} = _ref9;
|
623
605
|
const {
|
624
606
|
refs,
|
625
607
|
fullyCollapsed
|
@@ -664,12 +646,12 @@ const PageHeaderScrollButton = /*#__PURE__*/React__default.forwardRef(function P
|
|
664
646
|
})
|
665
647
|
}));
|
666
648
|
});
|
667
|
-
const PageHeaderTitleBreadcrumb = /*#__PURE__*/forwardRef((
|
649
|
+
const PageHeaderTitleBreadcrumb = /*#__PURE__*/forwardRef((_ref10, ref) => {
|
668
650
|
let {
|
669
651
|
className,
|
670
652
|
children,
|
671
653
|
...other
|
672
|
-
} =
|
654
|
+
} = _ref10;
|
673
655
|
const {
|
674
656
|
titleClipped,
|
675
657
|
refs
|
@@ -689,13 +671,13 @@ const PageHeaderTitleBreadcrumb = /*#__PURE__*/forwardRef((_ref9, ref) => {
|
|
689
671
|
// including the overflow breadcrumb item. The overflowHandler determines what elements
|
690
672
|
// are visible and hidden and passes the hidden elements back to the render prop used
|
691
673
|
// to display the overflow breadcrumb
|
692
|
-
const PageHeaderBreadcrumbOverflow = /*#__PURE__*/forwardRef((
|
674
|
+
const PageHeaderBreadcrumbOverflow = /*#__PURE__*/forwardRef((_ref11, ref) => {
|
693
675
|
let {
|
694
676
|
renderOverflowBreadcrumb,
|
695
677
|
className,
|
696
678
|
children,
|
697
679
|
...other
|
698
|
-
} =
|
680
|
+
} = _ref11;
|
699
681
|
const [hiddenBreadcrumbs, setHiddenBreadcrumbs] = React__default.useState([]);
|
700
682
|
const fallbackRef = useRef(null);
|
701
683
|
const componentRef = ref ?? fallbackRef;
|
@@ -775,5 +757,7 @@ const TitleBreadcrumb = PageHeaderTitleBreadcrumb;
|
|
775
757
|
TitleBreadcrumb.displayName = 'PageHeaderTitleBreadcrumb';
|
776
758
|
const BreadcrumbOverflow = PageHeaderBreadcrumbOverflow;
|
777
759
|
BreadcrumbOverflow.displayName = 'PageHeaderBreadcrumbOverflow';
|
760
|
+
const TagOverflow = PageHeaderTagOverflow;
|
761
|
+
TagOverflow.displayName = 'PageHeaderTagOverflow';
|
778
762
|
|
779
|
-
export { BreadcrumbBar, BreadcrumbOverflow, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderBreadcrumbOverflow, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderScrollButton, PageHeaderTabBar, PageHeaderTitleBreadcrumb, Root, ScrollButton, TabBar, TitleBreadcrumb };
|
763
|
+
export { BreadcrumbBar, BreadcrumbOverflow, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderBreadcrumbOverflow, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderScrollButton, PageHeaderTabBar, PageHeaderTagOverflow, PageHeaderTitleBreadcrumb, Root, ScrollButton, TabBar, TagOverflow, TitleBreadcrumb };
|
@@ -4,5 +4,5 @@
|
|
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
|
-
export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, } from './PageHeader';
|
8
|
-
export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderScrollButtonProps, } from './PageHeader';
|
7
|
+
export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, PageHeaderTagOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, TagOverflow, } from './PageHeader';
|
8
|
+
export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderScrollButtonProps, PageHeaderTagOverflowProps, } from './PageHeader';
|
@@ -73,8 +73,13 @@ const TagOverflowPopover = /*#__PURE__*/forwardRef((props, ref) => {
|
|
73
73
|
}, /*#__PURE__*/React__default.createElement(OperationalTag, {
|
74
74
|
onClick: () => setPopoverOpen?.(!popoverOpen),
|
75
75
|
className: cx(`${blockClass}__trigger`),
|
76
|
-
text: `+${overflowTags.length}
|
77
|
-
|
76
|
+
text: `+${overflowTags.length}`,
|
77
|
+
"aria-expanded": popoverOpen,
|
78
|
+
"aria-controls": `${pkg.prefix}-overflow-content`
|
79
|
+
}), /*#__PURE__*/React__default.createElement(PopoverContent, {
|
80
|
+
id: `${pkg.prefix}-overflow-content`,
|
81
|
+
"aria-hidden": !popoverOpen
|
82
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
78
83
|
ref: overflowTagContent,
|
79
84
|
className: `${blockClass}__content`
|
80
85
|
}, /*#__PURE__*/React__default.createElement("ul", {
|
@@ -101,8 +101,13 @@ const TagSetOverflow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
|
101
101
|
onClick: () => setPopoverOpen(!popoverOpen),
|
102
102
|
className: cx(`${blockClass}__popover-trigger`),
|
103
103
|
size: size,
|
104
|
-
text: `+${overflowTags.length}
|
105
|
-
|
104
|
+
text: `+${overflowTags.length}`,
|
105
|
+
"aria-expanded": popoverOpen,
|
106
|
+
"aria-controls": `${pkg.prefix}-overflow-content`
|
107
|
+
}), /*#__PURE__*/React__default.createElement(PopoverContent, {
|
108
|
+
id: `${pkg.prefix}-overflow-content`,
|
109
|
+
"aria-hidden": !popoverOpen
|
110
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
106
111
|
ref: overflowTagContent,
|
107
112
|
className: `${blockClass}__content`
|
108
113
|
}, /*#__PURE__*/React__default.createElement("ul", {
|
package/es/components/index.d.ts
CHANGED
@@ -43,6 +43,7 @@ export * from './WebTerminal';
|
|
43
43
|
* draft | previewCandidate | preview
|
44
44
|
*/
|
45
45
|
export * as preview__Coachmark from './Coachmark/next/Coachmark';
|
46
|
+
export * as preview__CoachmarkTagline from './Coachmark/next/Coachmark/CoachmarkTagline';
|
46
47
|
export { FeatureFlags as preview__FeatureFlags, useFeatureFlag as preview__useFeatureFlag, useFeatureFlags as preview__useFeatureFlags, } from './FeatureFlags';
|
47
48
|
export * as preview__PageHeader from './PageHeader/next/PageHeader';
|
48
49
|
export * as previewCandidate__BigNumber from './BigNumber';
|
package/es/index.js
CHANGED
@@ -54,11 +54,13 @@ export { WebTerminalContentWrapper } from './components/WebTerminal/WebTerminalC
|
|
54
54
|
export { WebTerminalProvider, useWebTerminal } from './components/WebTerminal/hooks/index.js';
|
55
55
|
import * as index from './components/Coachmark/next/Coachmark/index.js';
|
56
56
|
export { index as preview__Coachmark };
|
57
|
+
import * as index$1 from './components/Coachmark/next/Coachmark/CoachmarkTagline/index.js';
|
58
|
+
export { index$1 as preview__CoachmarkTagline };
|
57
59
|
export { FeatureFlags as preview__FeatureFlags, useFeatureFlag as preview__useFeatureFlag, useFeatureFlags as preview__useFeatureFlags } from './components/FeatureFlags/index.js';
|
58
60
|
import * as PageHeader from './components/PageHeader/next/PageHeader.js';
|
59
61
|
export { PageHeader as preview__PageHeader };
|
60
|
-
import * as index$
|
61
|
-
export { index$
|
62
|
+
import * as index$2 from './components/BigNumber/index.js';
|
63
|
+
export { index$2 as previewCandidate__BigNumber };
|
62
64
|
export { Coachmark as previewCandidate__Coachmark } from './components/Coachmark/Coachmark.js';
|
63
65
|
export { BEACON_KIND, COACHMARK_ALIGNMENT, COACHMARK_OVERLAY_KIND } from './components/Coachmark/utils/enums.js';
|
64
66
|
export { useCoachmark } from './components/Coachmark/utils/context.js';
|
@@ -68,16 +70,16 @@ export { CoachmarkButton as previewCandidate__CoachmarkButton } from './componen
|
|
68
70
|
export { CoachmarkFixed as previewCandidate__CoachmarkFixed } from './components/CoachmarkFixed/CoachmarkFixed.js';
|
69
71
|
export { CoachmarkOverlayElement as previewCandidate__CoachmarkOverlayElement } from './components/CoachmarkOverlayElement/CoachmarkOverlayElement.js';
|
70
72
|
export { CoachmarkOverlayElements as previewCandidate__CoachmarkOverlayElements } from './components/CoachmarkOverlayElements/CoachmarkOverlayElements.js';
|
71
|
-
import * as index$
|
72
|
-
export { index$
|
73
|
-
import * as index$
|
74
|
-
export { index$
|
75
|
-
import * as index$
|
76
|
-
export { index$
|
77
|
-
import * as index$
|
78
|
-
export { index$
|
79
|
-
import * as index$
|
80
|
-
export { index$
|
73
|
+
import * as index$3 from './components/ConditionBuilder/index.js';
|
74
|
+
export { index$3 as previewCandidate__ConditionBuilder };
|
75
|
+
import * as index$4 from './components/DataSpreadsheet/index.js';
|
76
|
+
export { index$4 as previewCandidate__DataSpreadsheet };
|
77
|
+
import * as index$5 from './components/DelimitedList/index.js';
|
78
|
+
export { index$5 as previewCandidate__DelimitedList };
|
79
|
+
import * as index$6 from './components/Decorator/index.js';
|
80
|
+
export { index$6 as previewCandidate__Decorator };
|
81
|
+
import * as index$7 from './components/GetStartedCard/index.js';
|
82
|
+
export { index$7 as previewCandidate__GetStartedCard };
|
81
83
|
export { Guidebanner as previewCandidate__Guidebanner } from './components/Guidebanner/Guidebanner.js';
|
82
84
|
export { GuidebannerElement as previewCandidate__GuidebannerElement } from './components/Guidebanner/GuidebannerElement.js';
|
83
85
|
export { GuidebannerElementButton as previewCandidate__GuidebannerElementButton } from './components/Guidebanner/GuidebannerElementButton.js';
|
@@ -85,15 +87,15 @@ export { GuidebannerElementLink as previewCandidate__GuidebannerElementLink } fr
|
|
85
87
|
export { InlineTip as previewCandidate__InlineTip } from './components/InlineTip/InlineTip.js';
|
86
88
|
export { InlineTipButton as previewCandidate__InlineTipButton } from './components/InlineTip/InlineTipButton.js';
|
87
89
|
export { InlineTipLink as previewCandidate__InlineTipLink } from './components/InlineTip/InlineTipLink.js';
|
88
|
-
import * as index$
|
89
|
-
export { index$
|
90
|
-
import * as index$
|
91
|
-
export { index$
|
90
|
+
import * as index$8 from './components/NonLinearReading/index.js';
|
91
|
+
export { index$8 as previewCandidate__NonLinearReading };
|
92
|
+
import * as index$9 from './components/SearchBar/index.js';
|
93
|
+
export { index$9 as previewCandidate__SearchBar };
|
92
94
|
export { Toolbar as previewCandidate__Toolbar } from './components/Toolbar/Toolbar.js';
|
93
95
|
export { ToolbarButton as previewCandidate__ToolbarButton } from './components/Toolbar/ToolbarButton.js';
|
94
96
|
export { ToolbarGroup as previewCandidate__ToolbarGroup } from './components/Toolbar/ToolbarGroup.js';
|
95
|
-
import * as index$
|
96
|
-
export { index$
|
97
|
+
import * as index$a from './components/TruncatedList/index.js';
|
98
|
+
export { index$a as previewCandidate__TruncatedList };
|
97
99
|
export { ComboButton } from './components/ComboButton/ComboButton.js';
|
98
100
|
export { ComboButtonItem } from './components/ComboButton/ComboButtonItem/index.js';
|
99
101
|
export { Datagrid } from './components/Datagrid/Datagrid/Datagrid.js';
|
@@ -0,0 +1,39 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 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, { ElementType } from 'react';
|
8
|
+
import { ButtonProps } from '@carbon/react';
|
9
|
+
export interface CoachmarkButtonProps extends ButtonProps<ElementType> {
|
10
|
+
onClick?(): void;
|
11
|
+
onDoubleClick?(): void;
|
12
|
+
tabIndex?: number;
|
13
|
+
['aria-expanded']?: boolean;
|
14
|
+
id?: string;
|
15
|
+
}
|
16
|
+
export interface CoachmarkTaglineProps {
|
17
|
+
/**
|
18
|
+
* Tooltip text and aria label for the Close button icon.
|
19
|
+
*/
|
20
|
+
closeIconDescription?: string;
|
21
|
+
/**
|
22
|
+
* Function to call when the close button is clicked.
|
23
|
+
*/
|
24
|
+
onClose?: () => void;
|
25
|
+
/**
|
26
|
+
* The title of the tagline.
|
27
|
+
*/
|
28
|
+
title: string;
|
29
|
+
/**
|
30
|
+
* button props
|
31
|
+
*/
|
32
|
+
buttonProps?: CoachmarkButtonProps;
|
33
|
+
isOpen?: boolean;
|
34
|
+
}
|
35
|
+
/**
|
36
|
+
* DO NOT USE. This component is for the exclusive use
|
37
|
+
* of other Onboarding components.
|
38
|
+
*/
|
39
|
+
export declare const CoachmarkTagline: React.ForwardRefExoticComponent<CoachmarkTaglineProps & React.RefAttributes<HTMLDivElement>>;
|