@carbon/react 1.57.0 → 1.58.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/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +1106 -990
- package/es/components/Accordion/Accordion.d.ts +1 -1
- package/es/components/Accordion/index.d.ts +2 -2
- package/es/components/Button/Button.js +2 -2
- package/es/components/Button/index.d.ts +2 -1
- package/es/components/Checkbox/Checkbox.d.ts +6 -7
- package/es/components/ComboBox/ComboBox.d.ts +4 -5
- package/es/components/ComboBox/ComboBox.js +268 -261
- package/es/components/ComposedModal/ComposedModal.d.ts +1 -2
- package/es/components/DataTable/TableHeader.d.ts +4 -5
- package/es/components/DataTable/TableSlugRow.d.ts +3 -2
- package/es/components/DatePicker/DatePicker.d.ts +4 -5
- package/es/components/Dropdown/Dropdown.d.ts +6 -7
- package/es/components/Dropdown/index.d.ts +2 -2
- package/es/components/FormLabel/index.d.ts +2 -2
- package/es/components/Grid/Column.d.ts +2 -2
- package/es/components/Grid/GridTypes.d.ts +1 -2
- package/es/components/Grid/index.d.ts +3 -1
- package/es/components/IconButton/index.d.ts +3 -4
- package/es/components/InlineLoading/index.d.ts +2 -2
- package/es/components/ListBox/next/ListBoxTrigger.js +1 -0
- package/es/components/Loading/index.d.ts +2 -2
- package/es/components/Menu/Menu.js +1 -1
- package/es/components/Menu/MenuItem.js +13 -2
- package/es/components/Modal/Modal.d.ts +8 -9
- package/es/components/Modal/index.d.ts +2 -2
- package/es/components/MultiSelect/FilterableMultiSelect.d.ts +1 -2
- package/es/components/MultiSelect/MultiSelect.d.ts +10 -9
- package/es/components/Notification/Notification.d.ts +2 -2
- package/es/components/NumberInput/NumberInput.d.ts +12 -2
- package/es/components/NumberInput/NumberInput.js +2 -2
- package/es/components/NumberInput/index.d.ts +1 -1
- package/es/components/OverflowMenu/OverflowMenu.d.ts +10 -6
- package/es/components/OverflowMenu/index.d.ts +13 -0
- package/es/components/PasswordInput/index.d.ts +3 -0
- package/es/components/Popover/index.d.ts +8 -2
- package/es/components/Popover/index.js +26 -1
- package/es/components/ProgressBar/ProgressBar.d.ts +1 -1
- package/es/components/ProgressBar/index.d.ts +2 -2
- package/es/components/ProgressIndicator/ProgressIndicator.d.ts +2 -2
- package/es/components/ProgressIndicator/index.d.ts +2 -0
- package/es/components/RadioButton/RadioButton.d.ts +3 -4
- package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts +7 -8
- package/es/components/Select/Select.d.ts +1 -2
- package/es/components/Slider/Slider.d.ts +5 -5
- package/es/components/Slider/Slider.js +1 -1
- package/es/components/StructuredList/index.d.ts +2 -0
- package/es/components/Switch/Switch.d.ts +1 -1
- package/es/components/Switch/index.d.ts +2 -2
- package/es/components/Tab/index.d.ts +2 -1
- package/es/components/Tag/DismissibleTag.d.ts +12 -12
- package/es/components/Tag/DismissibleTag.js +34 -9
- package/es/components/Tag/OperationalTag.d.ts +12 -12
- package/es/components/Tag/OperationalTag.js +45 -9
- package/es/components/Tag/SelectableTag.d.ts +12 -12
- package/es/components/Tag/SelectableTag.js +46 -10
- package/es/components/Tag/Tag.d.ts +3 -3
- package/es/components/Tag/Tag.js +31 -5
- package/es/components/TextArea/TextArea.d.ts +6 -7
- package/es/components/TextArea/index.d.ts +2 -2
- package/es/components/TextInput/PasswordInput.d.ts +5 -6
- package/es/components/TextInput/PasswordInput.js +2 -2
- package/es/components/TextInput/TextInput.d.ts +1 -2
- package/es/components/TextInput/index.d.ts +4 -2
- package/es/components/Theme/index.d.ts +1 -0
- package/es/components/Theme/index.js +8 -2
- package/es/components/Tile/Tile.d.ts +3 -4
- package/es/components/TileGroup/TileGroup.d.ts +3 -2
- package/es/components/TileGroup/index.d.ts +9 -0
- package/es/components/Toggle/Toggle.js +1 -1
- package/es/components/Tooltip/DefinitionTooltip.js +1 -1
- package/es/components/Tooltip/Tooltip.js +16 -5
- package/es/components/Tooltip/index.d.ts +2 -2
- package/es/components/UnorderedList/UnorderedList.d.ts +1 -1
- package/es/components/UnorderedList/index.d.ts +1 -0
- package/es/index.js +4 -4
- package/es/prop-types/deprecateValuesWithin.js +35 -0
- package/lib/components/Accordion/Accordion.d.ts +1 -1
- package/lib/components/Accordion/index.d.ts +2 -2
- package/lib/components/Button/Button.js +2 -2
- package/lib/components/Button/index.d.ts +2 -1
- package/lib/components/Checkbox/Checkbox.d.ts +6 -7
- package/lib/components/ComboBox/ComboBox.d.ts +4 -5
- package/lib/components/ComboBox/ComboBox.js +267 -261
- package/lib/components/ComposedModal/ComposedModal.d.ts +1 -2
- package/lib/components/DataTable/TableHeader.d.ts +4 -5
- package/lib/components/DataTable/TableSlugRow.d.ts +3 -2
- package/lib/components/DatePicker/DatePicker.d.ts +4 -5
- package/lib/components/Dropdown/Dropdown.d.ts +6 -7
- package/lib/components/Dropdown/index.d.ts +2 -2
- package/lib/components/FormLabel/index.d.ts +2 -2
- package/lib/components/Grid/Column.d.ts +2 -2
- package/lib/components/Grid/GridTypes.d.ts +1 -2
- package/lib/components/Grid/index.d.ts +3 -1
- package/lib/components/IconButton/index.d.ts +3 -4
- package/lib/components/InlineLoading/index.d.ts +2 -2
- package/lib/components/ListBox/next/ListBoxTrigger.js +1 -0
- package/lib/components/Loading/index.d.ts +2 -2
- package/lib/components/Menu/Menu.js +1 -1
- package/lib/components/Menu/MenuItem.js +13 -2
- package/lib/components/Modal/Modal.d.ts +8 -9
- package/lib/components/Modal/index.d.ts +2 -2
- package/lib/components/MultiSelect/FilterableMultiSelect.d.ts +1 -2
- package/lib/components/MultiSelect/MultiSelect.d.ts +10 -9
- package/lib/components/Notification/Notification.d.ts +2 -2
- package/lib/components/NumberInput/NumberInput.d.ts +12 -2
- package/lib/components/NumberInput/NumberInput.js +2 -2
- package/lib/components/NumberInput/index.d.ts +1 -1
- package/lib/components/OverflowMenu/OverflowMenu.d.ts +10 -6
- package/lib/components/OverflowMenu/index.d.ts +13 -0
- package/lib/components/PasswordInput/index.d.ts +3 -0
- package/lib/components/Popover/index.d.ts +8 -2
- package/lib/components/Popover/index.js +26 -1
- package/lib/components/ProgressBar/ProgressBar.d.ts +1 -1
- package/lib/components/ProgressBar/index.d.ts +2 -2
- package/lib/components/ProgressIndicator/ProgressIndicator.d.ts +2 -2
- package/lib/components/ProgressIndicator/index.d.ts +2 -0
- package/lib/components/RadioButton/RadioButton.d.ts +3 -4
- package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts +7 -8
- package/lib/components/Select/Select.d.ts +1 -2
- package/lib/components/Slider/Slider.d.ts +5 -5
- package/lib/components/Slider/Slider.js +1 -1
- package/lib/components/StructuredList/index.d.ts +2 -0
- package/lib/components/Switch/Switch.d.ts +1 -1
- package/lib/components/Switch/index.d.ts +2 -2
- package/lib/components/Tab/index.d.ts +2 -1
- package/lib/components/Tag/DismissibleTag.d.ts +12 -12
- package/lib/components/Tag/DismissibleTag.js +33 -8
- package/lib/components/Tag/OperationalTag.d.ts +12 -12
- package/lib/components/Tag/OperationalTag.js +44 -8
- package/lib/components/Tag/SelectableTag.d.ts +12 -12
- package/lib/components/Tag/SelectableTag.js +45 -9
- package/lib/components/Tag/Tag.d.ts +3 -3
- package/lib/components/Tag/Tag.js +30 -4
- package/lib/components/TextArea/TextArea.d.ts +6 -7
- package/lib/components/TextArea/index.d.ts +2 -2
- package/lib/components/TextInput/PasswordInput.d.ts +5 -6
- package/lib/components/TextInput/PasswordInput.js +2 -2
- package/lib/components/TextInput/TextInput.d.ts +1 -2
- package/lib/components/TextInput/index.d.ts +4 -2
- package/lib/components/Theme/index.d.ts +1 -0
- package/lib/components/Theme/index.js +8 -1
- package/lib/components/Tile/Tile.d.ts +3 -4
- package/lib/components/TileGroup/TileGroup.d.ts +3 -2
- package/lib/components/TileGroup/index.d.ts +9 -0
- package/lib/components/Toggle/Toggle.js +1 -1
- package/lib/components/Tooltip/DefinitionTooltip.js +1 -1
- package/lib/components/Tooltip/Tooltip.js +16 -5
- package/lib/components/Tooltip/index.d.ts +2 -2
- package/lib/components/UnorderedList/UnorderedList.d.ts +1 -1
- package/lib/components/UnorderedList/index.d.ts +1 -0
- package/lib/index.js +30 -29
- package/lib/prop-types/deprecateValuesWithin.js +39 -0
- package/package.json +6 -6
- package/es/components/TileGroup/index.js +0 -13
- package/lib/components/TileGroup/index.js +0 -18
|
@@ -4,15 +4,11 @@
|
|
|
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 PropTypes
|
|
8
|
-
import React from 'react';
|
|
7
|
+
import PropTypes from 'prop-types';
|
|
8
|
+
import React, { ReactNode } from 'react';
|
|
9
9
|
import { PolymorphicProps } from '../../types/common';
|
|
10
10
|
import { SIZES } from './Tag';
|
|
11
11
|
export interface SelectableTagBaseProps {
|
|
12
|
-
/**
|
|
13
|
-
* Provide content to be rendered inside of a `SelectableTag`
|
|
14
|
-
*/
|
|
15
|
-
children?: React.ReactNode;
|
|
16
12
|
/**
|
|
17
13
|
* Provide a custom className that is applied to the containing <span>
|
|
18
14
|
*/
|
|
@@ -42,16 +38,16 @@ export interface SelectableTagBaseProps {
|
|
|
42
38
|
/**
|
|
43
39
|
* **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
|
|
44
40
|
*/
|
|
45
|
-
slug?:
|
|
41
|
+
slug?: ReactNode;
|
|
42
|
+
/**
|
|
43
|
+
* Provide text to be rendered inside of a the tag.
|
|
44
|
+
*/
|
|
45
|
+
text?: string;
|
|
46
46
|
}
|
|
47
47
|
export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
|
|
48
48
|
declare const SelectableTag: {
|
|
49
|
-
<T extends React.ElementType<any>>({
|
|
49
|
+
<T extends React.ElementType<any>>({ className, disabled, id, renderIcon, selected, slug, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
50
50
|
propTypes: {
|
|
51
|
-
/**
|
|
52
|
-
* Provide content to be rendered inside of a `SelectableTag`
|
|
53
|
-
*/
|
|
54
|
-
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
55
51
|
/**
|
|
56
52
|
* Provide a custom className that is applied to the containing <span>
|
|
57
53
|
*/
|
|
@@ -82,6 +78,10 @@ declare const SelectableTag: {
|
|
|
82
78
|
* **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
|
|
83
79
|
*/
|
|
84
80
|
slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
81
|
+
/**
|
|
82
|
+
* Provide text to be rendered inside of a the tag.
|
|
83
|
+
*/
|
|
84
|
+
text: PropTypes.Requireable<string>;
|
|
85
85
|
};
|
|
86
86
|
};
|
|
87
87
|
export default SelectableTag;
|
|
@@ -7,16 +7,19 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import React__default, { useState } from 'react';
|
|
10
|
+
import React__default, { useState, useLayoutEffect } from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
|
|
13
13
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
14
|
import Tag, { SIZES } from './Tag.js';
|
|
15
|
+
import '../Tooltip/DefinitionTooltip.js';
|
|
16
|
+
import { Tooltip } from '../Tooltip/Tooltip.js';
|
|
17
|
+
import '../Text/index.js';
|
|
18
|
+
import { Text } from '../Text/Text.js';
|
|
15
19
|
|
|
16
20
|
const getInstanceId = setupGetInstanceId();
|
|
17
21
|
const SelectableTag = _ref => {
|
|
18
22
|
let {
|
|
19
|
-
children,
|
|
20
23
|
className,
|
|
21
24
|
disabled,
|
|
22
25
|
id,
|
|
@@ -24,6 +27,7 @@ const SelectableTag = _ref => {
|
|
|
24
27
|
selected = false,
|
|
25
28
|
slug,
|
|
26
29
|
size,
|
|
30
|
+
text,
|
|
27
31
|
...other
|
|
28
32
|
} = _ref;
|
|
29
33
|
const prefix = usePrefix();
|
|
@@ -32,6 +36,16 @@ const SelectableTag = _ref => {
|
|
|
32
36
|
const tagClasses = cx(`${prefix}--tag--selectable`, className, {
|
|
33
37
|
[`${prefix}--tag--selectable-selected`]: selectedTag
|
|
34
38
|
});
|
|
39
|
+
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
|
|
40
|
+
const isEllipsisActive = element => {
|
|
41
|
+
setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
|
|
42
|
+
return element.offsetWidth < element.scrollWidth;
|
|
43
|
+
};
|
|
44
|
+
useLayoutEffect(() => {
|
|
45
|
+
const elementTagId = document.querySelector(`#${tagId}`);
|
|
46
|
+
const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
|
|
47
|
+
isEllipsisActive(newElement);
|
|
48
|
+
}, [prefix, tagId]);
|
|
35
49
|
let normalizedSlug;
|
|
36
50
|
if (slug && slug['type']?.displayName === 'Slug') {
|
|
37
51
|
normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
|
|
@@ -39,6 +53,7 @@ const SelectableTag = _ref => {
|
|
|
39
53
|
kind: 'inline'
|
|
40
54
|
});
|
|
41
55
|
}
|
|
56
|
+
const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
|
|
42
57
|
|
|
43
58
|
// Removing onClick from the spread operator
|
|
44
59
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -46,6 +61,26 @@ const SelectableTag = _ref => {
|
|
|
46
61
|
onClick,
|
|
47
62
|
...otherProps
|
|
48
63
|
} = other;
|
|
64
|
+
if (isEllipsisApplied) {
|
|
65
|
+
return /*#__PURE__*/React__default.createElement(Tooltip, {
|
|
66
|
+
label: text,
|
|
67
|
+
align: "bottom",
|
|
68
|
+
className: tooltipClasses,
|
|
69
|
+
leaveDelayMs: 0,
|
|
70
|
+
onMouseEnter: false
|
|
71
|
+
}, /*#__PURE__*/React__default.createElement(Tag, _extends({
|
|
72
|
+
slug: slug,
|
|
73
|
+
size: size,
|
|
74
|
+
renderIcon: renderIcon,
|
|
75
|
+
disabled: disabled,
|
|
76
|
+
className: tagClasses,
|
|
77
|
+
id: tagId,
|
|
78
|
+
onClick: () => setSelectedTag(!selectedTag)
|
|
79
|
+
}, otherProps), /*#__PURE__*/React__default.createElement(Text, {
|
|
80
|
+
title: text,
|
|
81
|
+
className: `${prefix}--tag__label`
|
|
82
|
+
}, text), normalizedSlug));
|
|
83
|
+
}
|
|
49
84
|
return /*#__PURE__*/React__default.createElement(Tag, _extends({
|
|
50
85
|
slug: slug,
|
|
51
86
|
size: size,
|
|
@@ -54,15 +89,12 @@ const SelectableTag = _ref => {
|
|
|
54
89
|
className: tagClasses,
|
|
55
90
|
id: tagId,
|
|
56
91
|
onClick: () => setSelectedTag(!selectedTag)
|
|
57
|
-
}, otherProps), /*#__PURE__*/React__default.createElement(
|
|
58
|
-
|
|
59
|
-
|
|
92
|
+
}, otherProps), normalizedSlug, /*#__PURE__*/React__default.createElement(Text, {
|
|
93
|
+
title: text,
|
|
94
|
+
className: `${prefix}--tag__label`
|
|
95
|
+
}, text));
|
|
60
96
|
};
|
|
61
97
|
SelectableTag.propTypes = {
|
|
62
|
-
/**
|
|
63
|
-
* Provide content to be rendered inside of a `SelectableTag`
|
|
64
|
-
*/
|
|
65
|
-
children: PropTypes.node,
|
|
66
98
|
/**
|
|
67
99
|
* Provide a custom className that is applied to the containing <span>
|
|
68
100
|
*/
|
|
@@ -92,7 +124,11 @@ SelectableTag.propTypes = {
|
|
|
92
124
|
/**
|
|
93
125
|
* **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
|
|
94
126
|
*/
|
|
95
|
-
slug: PropTypes.node
|
|
127
|
+
slug: PropTypes.node,
|
|
128
|
+
/**
|
|
129
|
+
* Provide text to be rendered inside of a the tag.
|
|
130
|
+
*/
|
|
131
|
+
text: PropTypes.string
|
|
96
132
|
};
|
|
97
133
|
|
|
98
134
|
export { SelectableTag as default };
|
|
@@ -4,8 +4,8 @@
|
|
|
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 PropTypes
|
|
8
|
-
import React from 'react';
|
|
7
|
+
import PropTypes from 'prop-types';
|
|
8
|
+
import React, { ReactNode } from 'react';
|
|
9
9
|
import { PolymorphicProps } from '../../types/common';
|
|
10
10
|
export declare const TYPES: {
|
|
11
11
|
red: string;
|
|
@@ -64,7 +64,7 @@ export interface TagBaseProps {
|
|
|
64
64
|
/**
|
|
65
65
|
* **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
|
|
66
66
|
*/
|
|
67
|
-
slug?:
|
|
67
|
+
slug?: ReactNode;
|
|
68
68
|
/**
|
|
69
69
|
* @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
|
|
70
70
|
*/
|
package/es/components/Tag/Tag.js
CHANGED
|
@@ -7,13 +7,15 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import React__default from 'react';
|
|
10
|
+
import React__default, { useState, useLayoutEffect } from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { Close } from '@carbon/icons-react';
|
|
13
13
|
import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
|
|
14
14
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
15
15
|
import '../Text/index.js';
|
|
16
16
|
import deprecate from '../../prop-types/deprecate.js';
|
|
17
|
+
import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
|
|
18
|
+
import '../Tooltip/Tooltip.js';
|
|
17
19
|
import { Text } from '../Text/Text.js';
|
|
18
20
|
|
|
19
21
|
var _Close;
|
|
@@ -58,6 +60,16 @@ const Tag = _ref => {
|
|
|
58
60
|
} = _ref;
|
|
59
61
|
const prefix = usePrefix();
|
|
60
62
|
const tagId = id || `tag-${getInstanceId()}`;
|
|
63
|
+
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
|
|
64
|
+
const isEllipsisActive = element => {
|
|
65
|
+
setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
|
|
66
|
+
return element.offsetWidth < element.scrollWidth;
|
|
67
|
+
};
|
|
68
|
+
useLayoutEffect(() => {
|
|
69
|
+
const elementTagId = document.querySelector(`#${tagId}`);
|
|
70
|
+
const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
|
|
71
|
+
isEllipsisActive(newElement);
|
|
72
|
+
}, [prefix, tagId]);
|
|
61
73
|
const conditions = [`${prefix}--tag--selectable`, `${prefix}--tag--filter`, `${prefix}--tag--operational`];
|
|
62
74
|
const isInteractiveTag = conditions.some(el => className?.includes(el));
|
|
63
75
|
const tagClasses = cx(`${prefix}--tag`, className, {
|
|
@@ -67,7 +79,7 @@ const Tag = _ref => {
|
|
|
67
79
|
// TODO: V12 - Remove this class
|
|
68
80
|
[`${prefix}--layout--size-${size}`]: size,
|
|
69
81
|
[`${prefix}--tag--${type}`]: type,
|
|
70
|
-
[`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag
|
|
82
|
+
[`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag && isEllipsisApplied
|
|
71
83
|
});
|
|
72
84
|
const typeText = type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : '';
|
|
73
85
|
const handleClose = event => {
|
|
@@ -93,8 +105,8 @@ const Tag = _ref => {
|
|
|
93
105
|
}, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default.createElement("div", {
|
|
94
106
|
className: `${prefix}--tag__custom-icon`
|
|
95
107
|
}, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, {
|
|
96
|
-
|
|
97
|
-
|
|
108
|
+
title: typeof children === 'string' ? children : undefined,
|
|
109
|
+
className: `${prefix}--tag__label`
|
|
98
110
|
}, children !== null && children !== undefined ? children : typeText), normalizedSlug, /*#__PURE__*/React__default.createElement("button", {
|
|
99
111
|
type: "button",
|
|
100
112
|
className: `${prefix}--tag__close-icon`,
|
|
@@ -105,13 +117,27 @@ const Tag = _ref => {
|
|
|
105
117
|
}, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
|
|
106
118
|
}
|
|
107
119
|
const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? 'button' : 'div');
|
|
120
|
+
const labelClasses = cx({
|
|
121
|
+
[`${prefix}--tag__label`]: !isInteractiveTag,
|
|
122
|
+
[`${prefix}--tag--${type}`]: type && !isInteractiveTag
|
|
123
|
+
});
|
|
108
124
|
return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
|
|
109
125
|
disabled: disabled,
|
|
110
126
|
className: tagClasses,
|
|
111
127
|
id: tagId
|
|
112
128
|
}, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default.createElement("div", {
|
|
113
129
|
className: `${prefix}--tag__custom-icon`
|
|
114
|
-
}, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(
|
|
130
|
+
}, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', isEllipsisApplied && !isInteractiveTag ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
|
|
131
|
+
openOnHover: false,
|
|
132
|
+
definition: children !== null && children !== undefined ? children : typeText,
|
|
133
|
+
className: `${prefix}--definition--tooltip--tag`
|
|
134
|
+
}, /*#__PURE__*/React__default.createElement(Text, {
|
|
135
|
+
title: children !== null && children !== undefined ? children : typeText,
|
|
136
|
+
className: labelClasses
|
|
137
|
+
}, children !== null && children !== undefined ? children : typeText)) : /*#__PURE__*/React__default.createElement(Text, {
|
|
138
|
+
title: children !== null && children !== undefined ? children : typeText,
|
|
139
|
+
className: labelClasses
|
|
140
|
+
}, children !== null && children !== undefined ? children : typeText), normalizedSlug);
|
|
115
141
|
};
|
|
116
142
|
Tag.propTypes = {
|
|
117
143
|
/**
|
|
@@ -4,8 +4,7 @@
|
|
|
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 {
|
|
8
|
-
import React from 'react';
|
|
7
|
+
import React, { ReactNode } from 'react';
|
|
9
8
|
export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
|
|
10
9
|
/**
|
|
11
10
|
* Provide a custom className that is applied directly to the underlying
|
|
@@ -31,7 +30,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
|
|
|
31
30
|
/**
|
|
32
31
|
* Provide text that is used alongside the control label for additional help
|
|
33
32
|
*/
|
|
34
|
-
helperText?:
|
|
33
|
+
helperText?: ReactNode;
|
|
35
34
|
/**
|
|
36
35
|
* Specify whether you want the underlying label to be visually hidden
|
|
37
36
|
*/
|
|
@@ -47,12 +46,12 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
|
|
|
47
46
|
/**
|
|
48
47
|
* Provide the text that is displayed when the control is in an invalid state
|
|
49
48
|
*/
|
|
50
|
-
invalidText?:
|
|
49
|
+
invalidText?: ReactNode;
|
|
51
50
|
/**
|
|
52
51
|
* Provide the text that will be read by a screen reader when visiting this
|
|
53
52
|
* control
|
|
54
53
|
*/
|
|
55
|
-
labelText:
|
|
54
|
+
labelText: ReactNode;
|
|
56
55
|
/**
|
|
57
56
|
* @deprecated
|
|
58
57
|
* `true` to use the light version. For use on $ui-01 backgrounds only.
|
|
@@ -93,7 +92,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
|
|
|
93
92
|
/**
|
|
94
93
|
* **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
|
|
95
94
|
*/
|
|
96
|
-
slug?:
|
|
95
|
+
slug?: ReactNode;
|
|
97
96
|
/**
|
|
98
97
|
* Provide the current value of the `<textarea>`
|
|
99
98
|
*/
|
|
@@ -105,7 +104,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
|
|
|
105
104
|
/**
|
|
106
105
|
* Provide the text that is displayed when the control is in warning state
|
|
107
106
|
*/
|
|
108
|
-
warnText?:
|
|
107
|
+
warnText?: ReactNode;
|
|
109
108
|
/**
|
|
110
109
|
* Specify the method used for calculating the counter number
|
|
111
110
|
*/
|
|
@@ -4,7 +4,7 @@
|
|
|
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 TextArea from './TextArea';
|
|
7
|
+
import TextArea, { type TextAreaProps } from './TextArea';
|
|
8
8
|
export { default as TextAreaSkeleton } from './TextArea.Skeleton';
|
|
9
9
|
export default TextArea;
|
|
10
|
-
export { TextArea };
|
|
10
|
+
export { TextArea, type TextAreaProps };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import React, { InputHTMLAttributes } from 'react';
|
|
2
|
-
import { ReactNodeLike } from 'prop-types';
|
|
1
|
+
import React, { InputHTMLAttributes, ReactNode } from 'react';
|
|
3
2
|
type ExcludedAttributes = 'size';
|
|
4
3
|
export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
|
|
5
4
|
/**
|
|
@@ -21,7 +20,7 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
|
|
|
21
20
|
/**
|
|
22
21
|
* Provide text that is used alongside the control label for additional help
|
|
23
22
|
*/
|
|
24
|
-
helperText?:
|
|
23
|
+
helperText?: ReactNode;
|
|
25
24
|
/**
|
|
26
25
|
* Specify whether or not the underlying label is visually hidden
|
|
27
26
|
*/
|
|
@@ -45,11 +44,11 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
|
|
|
45
44
|
/**
|
|
46
45
|
* Provide the text that is displayed when the control is in an invalid state
|
|
47
46
|
*/
|
|
48
|
-
invalidText?:
|
|
47
|
+
invalidText?: ReactNode;
|
|
49
48
|
/**
|
|
50
49
|
* Provide the text that will be read by a screen reader when visiting this control
|
|
51
50
|
*/
|
|
52
|
-
labelText:
|
|
51
|
+
labelText: ReactNode;
|
|
53
52
|
/**
|
|
54
53
|
* @deprecated The `light` prop for `PasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
|
|
55
54
|
* `true` to use the light version. For use on $ui-01 backgrounds only.
|
|
@@ -119,7 +118,7 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
|
|
|
119
118
|
/**
|
|
120
119
|
* Provide the text that is displayed when the control is in warning state
|
|
121
120
|
*/
|
|
122
|
-
warnText?:
|
|
121
|
+
warnText?: ReactNode;
|
|
123
122
|
}
|
|
124
123
|
declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<unknown>>;
|
|
125
124
|
export default PasswordInput;
|
|
@@ -139,10 +139,10 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
|
|
|
139
139
|
align = tooltipPosition;
|
|
140
140
|
}
|
|
141
141
|
if (tooltipAlignment === 'end') {
|
|
142
|
-
align = `${tooltipPosition}-
|
|
142
|
+
align = `${tooltipPosition}-end`;
|
|
143
143
|
}
|
|
144
144
|
if (tooltipAlignment === 'start') {
|
|
145
|
-
align = `${tooltipPosition}-
|
|
145
|
+
align = `${tooltipPosition}-start`;
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
if (tooltipPosition === 'right' || tooltipPosition === 'left') {
|
|
@@ -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 { ReactNodeLike } from 'prop-types';
|
|
8
7
|
import React, { ReactNode } from 'react';
|
|
9
8
|
type ExcludedAttributes = 'defaultValue' | 'id' | 'size' | 'value';
|
|
10
9
|
export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
|
|
@@ -89,7 +88,7 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
|
|
|
89
88
|
/**
|
|
90
89
|
* **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
|
|
91
90
|
*/
|
|
92
|
-
slug?:
|
|
91
|
+
slug?: ReactNode;
|
|
93
92
|
/**
|
|
94
93
|
* Specify the type of the `<input>`
|
|
95
94
|
*/
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import TextInput from './TextInput';
|
|
1
|
+
import TextInput, { type TextInputProps } from './TextInput';
|
|
2
|
+
import { type TextInputSkeletonProps } from './TextInput.Skeleton';
|
|
2
3
|
export { default as TextInputSkeleton } from './TextInput.Skeleton';
|
|
3
4
|
export default TextInput;
|
|
4
|
-
export {
|
|
5
|
+
export { type TextInputSkeletonProps };
|
|
6
|
+
export { TextInput, type TextInputProps };
|
|
@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
|
|
|
11
11
|
import React__default, { useMemo } from 'react';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
import { LayerContext } from '../Layer/LayerContext.js';
|
|
14
|
+
import { useMatchMedia } from '../../internal/useMatchMedia.js';
|
|
14
15
|
|
|
15
16
|
const ThemeContext = /*#__PURE__*/React__default.createContext({
|
|
16
17
|
theme: 'white'
|
|
@@ -62,8 +63,10 @@ function Theme(_ref2) {
|
|
|
62
63
|
[`${prefix}--layer-one`]: true
|
|
63
64
|
});
|
|
64
65
|
const value = React__default.useMemo(() => {
|
|
66
|
+
const isDark = theme && ['g90', 'g100'].includes(theme);
|
|
65
67
|
return {
|
|
66
|
-
theme
|
|
68
|
+
theme,
|
|
69
|
+
isDark
|
|
67
70
|
};
|
|
68
71
|
}, [theme]);
|
|
69
72
|
const BaseComponentAsAny = BaseComponent;
|
|
@@ -102,5 +105,8 @@ Theme.propTypes = {
|
|
|
102
105
|
function useTheme() {
|
|
103
106
|
return React__default.useContext(ThemeContext);
|
|
104
107
|
}
|
|
108
|
+
function usePrefersDarkScheme() {
|
|
109
|
+
return useMatchMedia('(prefers-color-scheme: dark)');
|
|
110
|
+
}
|
|
105
111
|
|
|
106
|
-
export { GlobalTheme, Theme, ThemeContext, useTheme };
|
|
112
|
+
export { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ChangeEvent, type ComponentType } from 'react';
|
|
2
|
-
import { ReactNodeLike } from 'prop-types';
|
|
3
2
|
export interface TileProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
3
|
children?: ReactNode;
|
|
5
4
|
className?: string;
|
|
@@ -13,7 +12,7 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
13
12
|
/**
|
|
14
13
|
* **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
|
|
15
14
|
*/
|
|
16
|
-
slug?:
|
|
15
|
+
slug?: ReactNode;
|
|
17
16
|
}
|
|
18
17
|
export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLDivElement>>;
|
|
19
18
|
export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
|
|
@@ -104,7 +103,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
104
103
|
/**
|
|
105
104
|
* **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
|
|
106
105
|
*/
|
|
107
|
-
slug?:
|
|
106
|
+
slug?: ReactNode;
|
|
108
107
|
/**
|
|
109
108
|
* Specify the tab index of the wrapper element
|
|
110
109
|
*/
|
|
@@ -149,7 +148,7 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
149
148
|
/**
|
|
150
149
|
* **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
|
|
151
150
|
*/
|
|
152
|
-
slug?:
|
|
151
|
+
slug?: ReactNode;
|
|
153
152
|
/**
|
|
154
153
|
* The `tabindex` attribute.
|
|
155
154
|
*/
|
|
@@ -4,14 +4,15 @@
|
|
|
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 PropTypes
|
|
7
|
+
import PropTypes from 'prop-types';
|
|
8
|
+
import { ReactNode } from 'react';
|
|
8
9
|
import { ReactAttr } from '../../types/common';
|
|
9
10
|
type ExcludedAttributes = 'onChange';
|
|
10
11
|
export interface TileGroupProps extends Omit<ReactAttr<HTMLFieldSetElement>, ExcludedAttributes> {
|
|
11
12
|
/**
|
|
12
13
|
* Provide a collection of <RadioTile> components to render in the group
|
|
13
14
|
*/
|
|
14
|
-
children?:
|
|
15
|
+
children?: ReactNode;
|
|
15
16
|
/**
|
|
16
17
|
* Provide an optional className to be applied to the container node
|
|
17
18
|
*/
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
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 TileGroup, { type TileGroupProps } from './TileGroup';
|
|
8
|
+
export default TileGroup;
|
|
9
|
+
export { TileGroup, type TileGroupProps };
|
|
@@ -89,7 +89,7 @@ function Toggle(_ref) {
|
|
|
89
89
|
role: "switch",
|
|
90
90
|
type: "button",
|
|
91
91
|
"aria-checked": checked,
|
|
92
|
-
"aria-labelledby": ariaLabelledby ?? labelId,
|
|
92
|
+
"aria-labelledby": ariaLabelledby ?? (labelText ? labelId : undefined),
|
|
93
93
|
disabled: disabled,
|
|
94
94
|
onClick: handleClick
|
|
95
95
|
})), /*#__PURE__*/React__default.createElement(LabelComponent, {
|
|
@@ -37,18 +37,22 @@ function Tooltip(_ref) {
|
|
|
37
37
|
const tooltipRef = useRef(null);
|
|
38
38
|
const [open, setOpen] = useDelayedState(defaultOpen);
|
|
39
39
|
const [isDragging, setIsDragging] = useState(false);
|
|
40
|
+
const [focusByMouse, setFocusByMouse] = useState(false);
|
|
40
41
|
const [isPointerIntersecting, setIsPointerIntersecting] = useState(false);
|
|
41
42
|
const id = useId('tooltip');
|
|
42
43
|
const prefix = usePrefix();
|
|
43
44
|
const child = React__default.Children.only(children);
|
|
44
45
|
const triggerProps = {
|
|
45
|
-
onFocus: () => setOpen(true),
|
|
46
|
-
onBlur: () =>
|
|
46
|
+
onFocus: () => !focusByMouse && setOpen(true),
|
|
47
|
+
onBlur: () => {
|
|
48
|
+
setOpen(false);
|
|
49
|
+
setFocusByMouse(false);
|
|
50
|
+
},
|
|
47
51
|
onClick: () => closeOnActivation && setOpen(false),
|
|
48
52
|
// This should be placed on the trigger in case the element is disabled
|
|
49
53
|
onMouseEnter,
|
|
50
54
|
onMouseLeave,
|
|
51
|
-
onMouseDown
|
|
55
|
+
onMouseDown,
|
|
52
56
|
onMouseMove: onMouseMove,
|
|
53
57
|
onTouchStart: onDragStart
|
|
54
58
|
};
|
|
@@ -80,8 +84,15 @@ function Tooltip(_ref) {
|
|
|
80
84
|
}
|
|
81
85
|
}
|
|
82
86
|
function onMouseEnter() {
|
|
83
|
-
|
|
84
|
-
|
|
87
|
+
// Interactive Tags should not support onMouseEnter
|
|
88
|
+
if (!rest?.onMouseEnter?.()) {
|
|
89
|
+
setIsPointerIntersecting(true);
|
|
90
|
+
setOpen(true, enterDelayMs);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
function onMouseDown() {
|
|
94
|
+
setFocusByMouse(true);
|
|
95
|
+
onDragStart();
|
|
85
96
|
}
|
|
86
97
|
function onMouseLeave() {
|
|
87
98
|
setIsPointerIntersecting(false);
|
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import { DefinitionTooltip } from './DefinitionTooltip';
|
|
8
|
-
import { Tooltip } from './Tooltip';
|
|
9
|
-
export { DefinitionTooltip, Tooltip };
|
|
8
|
+
import { Tooltip, type TooltipProps } from './Tooltip';
|
|
9
|
+
export { DefinitionTooltip, Tooltip, type TooltipProps };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import { type ComponentProps } from 'react';
|
|
9
|
-
interface UnorderedListProps extends ComponentProps<'ul'> {
|
|
9
|
+
export interface UnorderedListProps extends ComponentProps<'ul'> {
|
|
10
10
|
nested?: boolean | undefined;
|
|
11
11
|
isExpressive?: boolean | undefined;
|
|
12
12
|
}
|
package/es/index.js
CHANGED
|
@@ -80,6 +80,8 @@ export { default as OverflowMenuItem } from './components/OverflowMenuItem/Overf
|
|
|
80
80
|
export { default as Pagination } from './components/Pagination/Pagination.js';
|
|
81
81
|
export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
|
|
82
82
|
export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
|
|
83
|
+
export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
|
|
84
|
+
export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
|
|
83
85
|
export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButton.js';
|
|
84
86
|
export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
|
|
85
87
|
export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
|
|
@@ -117,7 +119,7 @@ export { default as TextArea } from './components/TextArea/TextArea.js';
|
|
|
117
119
|
export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
|
|
118
120
|
import './components/TextInput/index.js';
|
|
119
121
|
export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
|
|
120
|
-
export { default as TileGroup } from './components/TileGroup/
|
|
122
|
+
export { default as TileGroup } from './components/TileGroup/TileGroup.js';
|
|
121
123
|
export { default as TimePicker } from './components/TimePicker/TimePicker.js';
|
|
122
124
|
export { default as TimePickerSelect } from './components/TimePickerSelect/TimePickerSelect.js';
|
|
123
125
|
export { Toggle } from './components/Toggle/Toggle.js';
|
|
@@ -169,7 +171,7 @@ export { default as unstable__AiSkeletonText } from './components/AiSkeleton/AiS
|
|
|
169
171
|
export { DefinitionTooltip } from './components/Tooltip/DefinitionTooltip.js';
|
|
170
172
|
export { Tooltip } from './components/Tooltip/Tooltip.js';
|
|
171
173
|
import './components/Text/index.js';
|
|
172
|
-
export { GlobalTheme, Theme, ThemeContext, useTheme } from './components/Theme/index.js';
|
|
174
|
+
export { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from './components/Theme/index.js';
|
|
173
175
|
export { PrefixContext, usePrefix } from './internal/usePrefix.js';
|
|
174
176
|
export { useIdPrefix } from './internal/useIdPrefix.js';
|
|
175
177
|
export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
|
|
@@ -230,6 +232,4 @@ export { default as TableToolbarSearch } from './components/DataTable/TableToolb
|
|
|
230
232
|
export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
|
|
231
233
|
export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
|
|
232
234
|
export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
|
|
233
|
-
export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
|
|
234
|
-
export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
|
|
235
235
|
export { default as TreeNode } from './components/TreeView/TreeNode.js';
|