@carbon/ibm-products 2.43.2-canary.234 → 2.43.2-canary.238
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +55 -19
- 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 +2 -0
- 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 +2 -0
- 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 +33 -18
- 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/CreateFullPage/CreateFullPage.d.ts +2 -0
- package/es/components/CreateFullPage/CreateFullPage.js +10 -3
- package/es/components/SimpleHeader/SimpleHeader.d.ts +3 -1
- package/es/components/SimpleHeader/SimpleHeader.js +9 -2
- package/es/components/TagSet/TagSet.js +5 -0
- package/es/components/TagSet/TagSetOverflow.d.ts +4 -0
- package/es/components/TagSet/TagSetOverflow.js +13 -6
- package/es/node_modules/@carbon/icon-helpers/es/index.js +3 -3
- package/lib/components/CreateFullPage/CreateFullPage.d.ts +2 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +9 -2
- package/lib/components/SimpleHeader/SimpleHeader.d.ts +3 -1
- package/lib/components/SimpleHeader/SimpleHeader.js +9 -2
- package/lib/components/TagSet/TagSet.js +5 -0
- package/lib/components/TagSet/TagSetOverflow.d.ts +4 -0
- package/lib/components/TagSet/TagSetOverflow.js +12 -5
- package/lib/node_modules/@carbon/icon-helpers/es/index.js +3 -3
- package/package.json +8 -8
- package/scss/components/TagSet/_tag-set.scss +2 -0
@@ -6,7 +6,7 @@
|
|
6
6
|
*/
|
7
7
|
|
8
8
|
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
|
-
import { Form, ComposedModal, ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
|
9
|
+
import { Tooltip, Form, ComposedModal, ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
|
10
10
|
import React__default, { useState, useEffect, createContext } from 'react';
|
11
11
|
import { overflowAriaLabel_required_if_breadcrumbs_exist, SimpleHeader } from '../SimpleHeader/SimpleHeader.js';
|
12
12
|
import { ActionSet } from '../ActionSet/ActionSet.js';
|
@@ -23,7 +23,7 @@ import { useResetCreateComponent } from '../../global/js/hooks/useResetCreateCom
|
|
23
23
|
import { useCreateComponentStepChange } from '../../global/js/hooks/useCreateComponentStepChange.js';
|
24
24
|
import { CreateInfluencer } from '../CreateInfluencer/CreateInfluencer.js';
|
25
25
|
|
26
|
-
var _excluded = ["breadcrumbsOverflowAriaLabel", "breadcrumbs", "backButtonText", "cancelButtonText", "children", "className", "initialStep", "maxVisibleBreadcrumbs", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "noTrailingSlash", "title", "secondaryTitle"];
|
26
|
+
var _excluded = ["breadcrumbsOverflowAriaLabel", "breadcrumbs", "backButtonText", "cancelButtonText", "children", "className", "initialStep", "maxVisibleBreadcrumbs", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "noTrailingSlash", "title", "secondaryTitle", "breadcrumbOverflowTooltipAlign"];
|
27
27
|
var blockClass = "".concat(pkg.prefix, "--create-full-page");
|
28
28
|
var componentName = 'CreateFullPage';
|
29
29
|
|
@@ -68,6 +68,8 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
68
68
|
noTrailingSlash = _ref.noTrailingSlash,
|
69
69
|
title = _ref.title,
|
70
70
|
secondaryTitle = _ref.secondaryTitle,
|
71
|
+
_ref$breadcrumbOverfl = _ref.breadcrumbOverflowTooltipAlign,
|
72
|
+
breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === void 0 ? 'right' : _ref$breadcrumbOverfl,
|
71
73
|
rest = _objectWithoutProperties(_ref, _excluded);
|
72
74
|
var _useState = useState([]),
|
73
75
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -190,7 +192,8 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
190
192
|
noTrailingSlash: noTrailingSlash,
|
191
193
|
overflowAriaLabel: breadcrumbsOverflowAriaLabel,
|
192
194
|
maxVisible: maxVisibleBreadcrumbs,
|
193
|
-
className: "".concat(blockClass, "__header")
|
195
|
+
className: "".concat(blockClass, "__header"),
|
196
|
+
overflowTooltipAlign: breadcrumbOverflowTooltipAlign
|
194
197
|
}), /*#__PURE__*/React__default.createElement("div", {
|
195
198
|
className: "".concat(blockClass, "__influencer-and-body-container")
|
196
199
|
}, /*#__PURE__*/React__default.createElement("div", {
|
@@ -273,6 +276,10 @@ CreateFullPage.propTypes = {
|
|
273
276
|
* The back button text
|
274
277
|
*/
|
275
278
|
backButtonText: PropTypes.string.isRequired,
|
279
|
+
/**
|
280
|
+
* align breadcrumb overflow tooltip
|
281
|
+
*/
|
282
|
+
breadcrumbOverflowTooltipAlign: Tooltip.propTypes.align,
|
276
283
|
/** The header breadcrumbs */
|
277
284
|
/**@ts-ignore */
|
278
285
|
breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
|
@@ -11,7 +11,7 @@ export const overflowAriaLabel_required_if_breadcrumbs_exist: (props: any, propN
|
|
11
11
|
* The component will throw a warning message if neither a title or breadcrumbs are provided
|
12
12
|
* since it requires at least one of them.
|
13
13
|
* */
|
14
|
-
export function SimpleHeader({ breadcrumbs, className, title, noTrailingSlash, maxVisible, overflowAriaLabel, ...rest }: {
|
14
|
+
export function SimpleHeader({ breadcrumbs, className, title, noTrailingSlash, maxVisible, overflowAriaLabel, overflowTooltipAlign, ...rest }: {
|
15
15
|
[x: string]: any;
|
16
16
|
breadcrumbs: any;
|
17
17
|
className: any;
|
@@ -19,6 +19,7 @@ export function SimpleHeader({ breadcrumbs, className, title, noTrailingSlash, m
|
|
19
19
|
noTrailingSlash?: boolean | undefined;
|
20
20
|
maxVisible: any;
|
21
21
|
overflowAriaLabel: any;
|
22
|
+
overflowTooltipAlign: any;
|
22
23
|
}): import("react/jsx-runtime").JSX.Element;
|
23
24
|
export namespace SimpleHeader {
|
24
25
|
namespace propTypes {
|
@@ -38,6 +39,7 @@ export namespace SimpleHeader {
|
|
38
39
|
export let maxVisible: PropTypes.Requireable<number>;
|
39
40
|
export let noTrailingSlash: PropTypes.Requireable<boolean>;
|
40
41
|
export { overflowAriaLabel_required_if_breadcrumbs_exist as overflowAriaLabel };
|
42
|
+
export let overflowTooltipAlign: any;
|
41
43
|
export let title: PropTypes.Requireable<string>;
|
42
44
|
}
|
43
45
|
}
|
@@ -12,9 +12,10 @@ import cx from 'classnames';
|
|
12
12
|
import { pkg } from '../../settings.js';
|
13
13
|
import pconsole from '../../global/js/utils/pconsole.js';
|
14
14
|
import { isRequiredIf } from '../../global/js/utils/props-helper.js';
|
15
|
+
import { Tooltip } from '@carbon/react';
|
15
16
|
import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js';
|
16
17
|
|
17
|
-
var _excluded = ["breadcrumbs", "className", "title", "noTrailingSlash", "maxVisible", "overflowAriaLabel"];
|
18
|
+
var _excluded = ["breadcrumbs", "className", "title", "noTrailingSlash", "maxVisible", "overflowAriaLabel", "overflowTooltipAlign"];
|
18
19
|
var blockClass = "".concat(pkg.prefix, "--simple-header");
|
19
20
|
var componentName = 'SimpleHeader';
|
20
21
|
/**
|
@@ -37,6 +38,7 @@ var SimpleHeader = function SimpleHeader(_ref) {
|
|
37
38
|
noTrailingSlash = _ref$noTrailingSlash === void 0 ? true : _ref$noTrailingSlash,
|
38
39
|
maxVisible = _ref.maxVisible,
|
39
40
|
overflowAriaLabel = _ref.overflowAriaLabel,
|
41
|
+
overflowTooltipAlign = _ref.overflowTooltipAlign,
|
40
42
|
rest = _objectWithoutProperties(_ref, _excluded);
|
41
43
|
var warnIfNoTitleOrBreadcrumbs = useCallback(function () {
|
42
44
|
if (!title && !(breadcrumbs !== null && breadcrumbs !== void 0 && breadcrumbs.length)) {
|
@@ -53,7 +55,8 @@ var SimpleHeader = function SimpleHeader(_ref) {
|
|
53
55
|
className: cx("".concat(blockClass, "__breadcrumbs")),
|
54
56
|
breadcrumbs: breadcrumbs,
|
55
57
|
maxVisible: maxVisible,
|
56
|
-
overflowAriaLabel: overflowAriaLabel
|
58
|
+
overflowAriaLabel: overflowAriaLabel,
|
59
|
+
overflowTooltipAlign: overflowTooltipAlign
|
57
60
|
}), title && /*#__PURE__*/React__default.createElement("h1", {
|
58
61
|
className: cx("".concat(blockClass, "__title"))
|
59
62
|
}, title));
|
@@ -84,6 +87,10 @@ SimpleHeader.propTypes = {
|
|
84
87
|
noTrailingSlash: PropTypes.bool,
|
85
88
|
/** Label for open/close overflow button used for breadcrumb items that do not fit */
|
86
89
|
overflowAriaLabel: overflowAriaLabel_required_if_breadcrumbs_exist,
|
90
|
+
/**
|
91
|
+
* overflowTooltipAlign: align tooltip position
|
92
|
+
*/
|
93
|
+
overflowTooltipAlign: Tooltip.propTypes.align,
|
87
94
|
/** Header title */
|
88
95
|
title: PropTypes.string
|
89
96
|
};
|
@@ -129,11 +129,15 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
129
129
|
}
|
130
130
|
}, [displayCount]);
|
131
131
|
useEffect(function () {
|
132
|
+
var size = 'md';
|
132
133
|
// create visible and overflow tags
|
133
134
|
var newDisplayedTags = tags && tags.length > 0 ? tags.map(function (_ref3, index) {
|
134
135
|
var label = _ref3.label,
|
135
136
|
_onClose = _ref3.onClose,
|
136
137
|
other = _objectWithoutProperties(_ref3, _excluded3);
|
138
|
+
if (index == tags.length - 1 && other.size) {
|
139
|
+
size = other.size;
|
140
|
+
}
|
137
141
|
return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
|
138
142
|
key: "displayed-tag-".concat(index),
|
139
143
|
onClose: function onClose() {
|
@@ -161,6 +165,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
161
165
|
overflowAlign: overflowAlign,
|
162
166
|
overflowType: overflowType,
|
163
167
|
showAllTagsLabel: showAllTagsLabel,
|
168
|
+
size: size,
|
164
169
|
key: "displayed-tag-overflow",
|
165
170
|
ref: overflowTag,
|
166
171
|
popoverOpen: popoverOpen,
|
@@ -42,6 +42,10 @@ interface TagSetOverflowProps {
|
|
42
42
|
* label for the overflow show all tags link
|
43
43
|
*/
|
44
44
|
showAllTagsLabel?: string;
|
45
|
+
/**
|
46
|
+
* Size of the overflow tag
|
47
|
+
*/
|
48
|
+
size?: string;
|
45
49
|
}
|
46
50
|
export declare const TagSetOverflow: React.ForwardRefExoticComponent<TagSetOverflowProps & {
|
47
51
|
children?: React.ReactNode;
|
@@ -9,11 +9,11 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
|
|
9
9
|
import React__default, { useRef } from 'react';
|
10
10
|
import PropTypes from '../../node_modules/prop-types/index.js';
|
11
11
|
import cx from 'classnames';
|
12
|
-
import { Popover,
|
12
|
+
import { Popover, OperationalTag, PopoverContent, Link } from '@carbon/react';
|
13
13
|
import { pkg } from '../../settings.js';
|
14
14
|
import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
|
15
15
|
|
16
|
-
var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
|
16
|
+
var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen", "size"];
|
17
17
|
var componentName = 'TagSetOverflow';
|
18
18
|
var blockClass = "".concat(pkg.prefix, "--tag-set-overflow");
|
19
19
|
|
@@ -34,6 +34,7 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
34
34
|
showAllTagsLabel = _ref.showAllTagsLabel,
|
35
35
|
popoverOpen = _ref.popoverOpen,
|
36
36
|
setPopoverOpen = _ref.setPopoverOpen,
|
37
|
+
size = _ref.size,
|
37
38
|
rest = _objectWithoutProperties(_ref, _excluded);
|
38
39
|
var localRef = useRef(null);
|
39
40
|
var overflowTagContent = useRef(null);
|
@@ -66,12 +67,14 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
66
67
|
onKeyDown: handleEscKeyPress,
|
67
68
|
open: popoverOpen,
|
68
69
|
autoAlign: overflowAutoAlign
|
69
|
-
}, /*#__PURE__*/React__default.createElement(
|
70
|
+
}, /*#__PURE__*/React__default.createElement(OperationalTag, {
|
70
71
|
onClick: function onClick() {
|
71
72
|
return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
|
72
73
|
},
|
73
|
-
className: cx("".concat(blockClass, "__popover-trigger"))
|
74
|
-
|
74
|
+
className: cx("".concat(blockClass, "__popover-trigger")),
|
75
|
+
size: size,
|
76
|
+
text: "+".concat(overflowTags.length)
|
77
|
+
}), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
|
75
78
|
ref: overflowTagContent,
|
76
79
|
className: "".concat(blockClass, "__content")
|
77
80
|
}, /*#__PURE__*/React__default.createElement("ul", {
|
@@ -141,7 +144,11 @@ TagSetOverflow.propTypes = {
|
|
141
144
|
/**
|
142
145
|
* label for the overflow show all tags link
|
143
146
|
*/
|
144
|
-
showAllTagsLabel: PropTypes.string
|
147
|
+
showAllTagsLabel: PropTypes.string,
|
148
|
+
/**
|
149
|
+
* Size of the overflow tag
|
150
|
+
*/
|
151
|
+
size: PropTypes.string
|
145
152
|
};
|
146
153
|
|
147
154
|
export { TagSetOverflow };
|
@@ -42,8 +42,8 @@ function _objectWithoutProperties(e, t) {
|
|
42
42
|
r,
|
43
43
|
i = _objectWithoutPropertiesLoose(e, t);
|
44
44
|
if (Object.getOwnPropertySymbols) {
|
45
|
-
var
|
46
|
-
for (r = 0; r <
|
45
|
+
var s = Object.getOwnPropertySymbols(e);
|
46
|
+
for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
47
47
|
}
|
48
48
|
return i;
|
49
49
|
}
|
@@ -51,7 +51,7 @@ function _objectWithoutPropertiesLoose(r, e) {
|
|
51
51
|
if (null == r) return {};
|
52
52
|
var t = {};
|
53
53
|
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
54
|
-
if (e.
|
54
|
+
if (e.includes(n)) continue;
|
55
55
|
t[n] = r[n];
|
56
56
|
}
|
57
57
|
return t;
|
@@ -27,6 +27,7 @@ type CreateFullPageBreadcrumbsProps = {
|
|
27
27
|
* Label for open/close overflow button used for breadcrumb items that do not fit
|
28
28
|
*/
|
29
29
|
breadcrumbsOverflowAriaLabel?: never;
|
30
|
+
breadcrumbOverflowTooltipAlign?: never;
|
30
31
|
} | {
|
31
32
|
/** The header breadcrumbs */
|
32
33
|
breadcrumbs: HeaderBreadcrumbs;
|
@@ -34,6 +35,7 @@ type CreateFullPageBreadcrumbsProps = {
|
|
34
35
|
* Label for open/close overflow button used for breadcrumb items that do not fit
|
35
36
|
*/
|
36
37
|
breadcrumbsOverflowAriaLabel: string;
|
38
|
+
breadcrumbOverflowTooltipAlign?: string;
|
37
39
|
};
|
38
40
|
type CreateFullPageBaseProps = {
|
39
41
|
/**
|
@@ -32,7 +32,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
32
32
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
33
33
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
34
34
|
|
35
|
-
var _excluded = ["breadcrumbsOverflowAriaLabel", "breadcrumbs", "backButtonText", "cancelButtonText", "children", "className", "initialStep", "maxVisibleBreadcrumbs", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "noTrailingSlash", "title", "secondaryTitle"];
|
35
|
+
var _excluded = ["breadcrumbsOverflowAriaLabel", "breadcrumbs", "backButtonText", "cancelButtonText", "children", "className", "initialStep", "maxVisibleBreadcrumbs", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "noTrailingSlash", "title", "secondaryTitle", "breadcrumbOverflowTooltipAlign"];
|
36
36
|
var blockClass = "".concat(settings.pkg.prefix, "--create-full-page");
|
37
37
|
var componentName = 'CreateFullPage';
|
38
38
|
|
@@ -77,6 +77,8 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
77
77
|
noTrailingSlash = _ref.noTrailingSlash,
|
78
78
|
title = _ref.title,
|
79
79
|
secondaryTitle = _ref.secondaryTitle,
|
80
|
+
_ref$breadcrumbOverfl = _ref.breadcrumbOverflowTooltipAlign,
|
81
|
+
breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === void 0 ? 'right' : _ref$breadcrumbOverfl,
|
80
82
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
81
83
|
var _useState = React.useState([]),
|
82
84
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
@@ -199,7 +201,8 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
199
201
|
noTrailingSlash: noTrailingSlash,
|
200
202
|
overflowAriaLabel: breadcrumbsOverflowAriaLabel,
|
201
203
|
maxVisible: maxVisibleBreadcrumbs,
|
202
|
-
className: "".concat(blockClass, "__header")
|
204
|
+
className: "".concat(blockClass, "__header"),
|
205
|
+
overflowTooltipAlign: breadcrumbOverflowTooltipAlign
|
203
206
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
204
207
|
className: "".concat(blockClass, "__influencer-and-body-container")
|
205
208
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
@@ -282,6 +285,10 @@ exports.CreateFullPage.propTypes = {
|
|
282
285
|
* The back button text
|
283
286
|
*/
|
284
287
|
backButtonText: index["default"].string.isRequired,
|
288
|
+
/**
|
289
|
+
* align breadcrumb overflow tooltip
|
290
|
+
*/
|
291
|
+
breadcrumbOverflowTooltipAlign: react.Tooltip.propTypes.align,
|
285
292
|
/** The header breadcrumbs */
|
286
293
|
/**@ts-ignore */
|
287
294
|
breadcrumbs: index["default"].arrayOf(index["default"].shape({
|
@@ -11,7 +11,7 @@ export const overflowAriaLabel_required_if_breadcrumbs_exist: (props: any, propN
|
|
11
11
|
* The component will throw a warning message if neither a title or breadcrumbs are provided
|
12
12
|
* since it requires at least one of them.
|
13
13
|
* */
|
14
|
-
export function SimpleHeader({ breadcrumbs, className, title, noTrailingSlash, maxVisible, overflowAriaLabel, ...rest }: {
|
14
|
+
export function SimpleHeader({ breadcrumbs, className, title, noTrailingSlash, maxVisible, overflowAriaLabel, overflowTooltipAlign, ...rest }: {
|
15
15
|
[x: string]: any;
|
16
16
|
breadcrumbs: any;
|
17
17
|
className: any;
|
@@ -19,6 +19,7 @@ export function SimpleHeader({ breadcrumbs, className, title, noTrailingSlash, m
|
|
19
19
|
noTrailingSlash?: boolean | undefined;
|
20
20
|
maxVisible: any;
|
21
21
|
overflowAriaLabel: any;
|
22
|
+
overflowTooltipAlign: any;
|
22
23
|
}): import("react/jsx-runtime").JSX.Element;
|
23
24
|
export namespace SimpleHeader {
|
24
25
|
namespace propTypes {
|
@@ -38,6 +39,7 @@ export namespace SimpleHeader {
|
|
38
39
|
export let maxVisible: PropTypes.Requireable<number>;
|
39
40
|
export let noTrailingSlash: PropTypes.Requireable<boolean>;
|
40
41
|
export { overflowAriaLabel_required_if_breadcrumbs_exist as overflowAriaLabel };
|
42
|
+
export let overflowTooltipAlign: any;
|
41
43
|
export let title: PropTypes.Requireable<string>;
|
42
44
|
}
|
43
45
|
}
|
@@ -16,6 +16,7 @@ var cx = require('classnames');
|
|
16
16
|
var settings = require('../../settings.js');
|
17
17
|
var pconsole = require('../../global/js/utils/pconsole.js');
|
18
18
|
var propsHelper = require('../../global/js/utils/props-helper.js');
|
19
|
+
var react = require('@carbon/react');
|
19
20
|
var BreadcrumbWithOverflow = require('../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js');
|
20
21
|
|
21
22
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
@@ -23,7 +24,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
23
24
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
24
25
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
25
26
|
|
26
|
-
var _excluded = ["breadcrumbs", "className", "title", "noTrailingSlash", "maxVisible", "overflowAriaLabel"];
|
27
|
+
var _excluded = ["breadcrumbs", "className", "title", "noTrailingSlash", "maxVisible", "overflowAriaLabel", "overflowTooltipAlign"];
|
27
28
|
var blockClass = "".concat(settings.pkg.prefix, "--simple-header");
|
28
29
|
var componentName = 'SimpleHeader';
|
29
30
|
/**
|
@@ -46,6 +47,7 @@ var SimpleHeader = function SimpleHeader(_ref) {
|
|
46
47
|
noTrailingSlash = _ref$noTrailingSlash === void 0 ? true : _ref$noTrailingSlash,
|
47
48
|
maxVisible = _ref.maxVisible,
|
48
49
|
overflowAriaLabel = _ref.overflowAriaLabel,
|
50
|
+
overflowTooltipAlign = _ref.overflowTooltipAlign,
|
49
51
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
50
52
|
var warnIfNoTitleOrBreadcrumbs = React.useCallback(function () {
|
51
53
|
if (!title && !(breadcrumbs !== null && breadcrumbs !== void 0 && breadcrumbs.length)) {
|
@@ -62,7 +64,8 @@ var SimpleHeader = function SimpleHeader(_ref) {
|
|
62
64
|
className: cx__default["default"]("".concat(blockClass, "__breadcrumbs")),
|
63
65
|
breadcrumbs: breadcrumbs,
|
64
66
|
maxVisible: maxVisible,
|
65
|
-
overflowAriaLabel: overflowAriaLabel
|
67
|
+
overflowAriaLabel: overflowAriaLabel,
|
68
|
+
overflowTooltipAlign: overflowTooltipAlign
|
66
69
|
}), title && /*#__PURE__*/React__default["default"].createElement("h1", {
|
67
70
|
className: cx__default["default"]("".concat(blockClass, "__title"))
|
68
71
|
}, title));
|
@@ -93,6 +96,10 @@ SimpleHeader.propTypes = {
|
|
93
96
|
noTrailingSlash: index["default"].bool,
|
94
97
|
/** Label for open/close overflow button used for breadcrumb items that do not fit */
|
95
98
|
overflowAriaLabel: overflowAriaLabel_required_if_breadcrumbs_exist,
|
99
|
+
/**
|
100
|
+
* overflowTooltipAlign: align tooltip position
|
101
|
+
*/
|
102
|
+
overflowTooltipAlign: react.Tooltip.propTypes.align,
|
96
103
|
/** Header title */
|
97
104
|
title: index["default"].string
|
98
105
|
};
|
@@ -138,11 +138,15 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
138
138
|
}
|
139
139
|
}, [displayCount]);
|
140
140
|
React.useEffect(function () {
|
141
|
+
var size = 'md';
|
141
142
|
// create visible and overflow tags
|
142
143
|
var newDisplayedTags = tags && tags.length > 0 ? tags.map(function (_ref3, index) {
|
143
144
|
var label = _ref3.label,
|
144
145
|
_onClose = _ref3.onClose,
|
145
146
|
other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
|
147
|
+
if (index == tags.length - 1 && other.size) {
|
148
|
+
size = other.size;
|
149
|
+
}
|
146
150
|
return /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
|
147
151
|
key: "displayed-tag-".concat(index),
|
148
152
|
onClose: function onClose() {
|
@@ -170,6 +174,7 @@ exports.TagSet = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
170
174
|
overflowAlign: overflowAlign,
|
171
175
|
overflowType: overflowType,
|
172
176
|
showAllTagsLabel: showAllTagsLabel,
|
177
|
+
size: size,
|
173
178
|
key: "displayed-tag-overflow",
|
174
179
|
ref: overflowTag,
|
175
180
|
popoverOpen: popoverOpen,
|
@@ -42,6 +42,10 @@ interface TagSetOverflowProps {
|
|
42
42
|
* label for the overflow show all tags link
|
43
43
|
*/
|
44
44
|
showAllTagsLabel?: string;
|
45
|
+
/**
|
46
|
+
* Size of the overflow tag
|
47
|
+
*/
|
48
|
+
size?: string;
|
45
49
|
}
|
46
50
|
export declare const TagSetOverflow: React.ForwardRefExoticComponent<TagSetOverflowProps & {
|
47
51
|
children?: React.ReactNode;
|
@@ -22,7 +22,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
22
22
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
23
23
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
24
24
|
|
25
|
-
var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
|
25
|
+
var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowAutoAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen", "size"];
|
26
26
|
var componentName = 'TagSetOverflow';
|
27
27
|
var blockClass = "".concat(settings.pkg.prefix, "--tag-set-overflow");
|
28
28
|
|
@@ -43,6 +43,7 @@ var TagSetOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
43
43
|
showAllTagsLabel = _ref.showAllTagsLabel,
|
44
44
|
popoverOpen = _ref.popoverOpen,
|
45
45
|
setPopoverOpen = _ref.setPopoverOpen,
|
46
|
+
size = _ref.size,
|
46
47
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
47
48
|
var localRef = React.useRef(null);
|
48
49
|
var overflowTagContent = React.useRef(null);
|
@@ -75,12 +76,14 @@ var TagSetOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
75
76
|
onKeyDown: handleEscKeyPress,
|
76
77
|
open: popoverOpen,
|
77
78
|
autoAlign: overflowAutoAlign
|
78
|
-
}, /*#__PURE__*/React__default["default"].createElement(react.
|
79
|
+
}, /*#__PURE__*/React__default["default"].createElement(react.OperationalTag, {
|
79
80
|
onClick: function onClick() {
|
80
81
|
return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
|
81
82
|
},
|
82
|
-
className: cx__default["default"]("".concat(blockClass, "__popover-trigger"))
|
83
|
-
|
83
|
+
className: cx__default["default"]("".concat(blockClass, "__popover-trigger")),
|
84
|
+
size: size,
|
85
|
+
text: "+".concat(overflowTags.length)
|
86
|
+
}), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
84
87
|
ref: overflowTagContent,
|
85
88
|
className: "".concat(blockClass, "__content")
|
86
89
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
@@ -150,7 +153,11 @@ TagSetOverflow.propTypes = {
|
|
150
153
|
/**
|
151
154
|
* label for the overflow show all tags link
|
152
155
|
*/
|
153
|
-
showAllTagsLabel: index["default"].string
|
156
|
+
showAllTagsLabel: index["default"].string,
|
157
|
+
/**
|
158
|
+
* Size of the overflow tag
|
159
|
+
*/
|
160
|
+
size: index["default"].string
|
154
161
|
};
|
155
162
|
|
156
163
|
exports.TagSetOverflow = TagSetOverflow;
|
@@ -46,8 +46,8 @@ function _objectWithoutProperties(e, t) {
|
|
46
46
|
r,
|
47
47
|
i = _objectWithoutPropertiesLoose(e, t);
|
48
48
|
if (Object.getOwnPropertySymbols) {
|
49
|
-
var
|
50
|
-
for (r = 0; r <
|
49
|
+
var s = Object.getOwnPropertySymbols(e);
|
50
|
+
for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
51
51
|
}
|
52
52
|
return i;
|
53
53
|
}
|
@@ -55,7 +55,7 @@ function _objectWithoutPropertiesLoose(r, e) {
|
|
55
55
|
if (null == r) return {};
|
56
56
|
var t = {};
|
57
57
|
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
58
|
-
if (e.
|
58
|
+
if (e.includes(n)) continue;
|
59
59
|
t[n] = r[n];
|
60
60
|
}
|
61
61
|
return t;
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.43.2-canary.
|
4
|
+
"version": "2.43.2-canary.238+03eadd20c",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -111,14 +111,14 @@
|
|
111
111
|
"react-window": "^1.8.10"
|
112
112
|
},
|
113
113
|
"peerDependencies": {
|
114
|
-
"@carbon/grid": "^11.
|
115
|
-
"@carbon/layout": "^11.
|
116
|
-
"@carbon/motion": "^11.
|
117
|
-
"@carbon/react": "^1.
|
118
|
-
"@carbon/themes": "^11.
|
119
|
-
"@carbon/type": "^11.
|
114
|
+
"@carbon/grid": "^11.27.0",
|
115
|
+
"@carbon/layout": "^11.26.0",
|
116
|
+
"@carbon/motion": "^11.22.0",
|
117
|
+
"@carbon/react": "^1.66.0",
|
118
|
+
"@carbon/themes": "^11.40.0",
|
119
|
+
"@carbon/type": "^11.31.0",
|
120
120
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
121
121
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
122
122
|
},
|
123
|
-
"gitHead": "
|
123
|
+
"gitHead": "03eadd20c856a18121c5cb516fd49cd2ddc87b6a"
|
124
124
|
}
|