@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.
Files changed (156) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +1106 -990
  2. package/es/components/Accordion/Accordion.d.ts +1 -1
  3. package/es/components/Accordion/index.d.ts +2 -2
  4. package/es/components/Button/Button.js +2 -2
  5. package/es/components/Button/index.d.ts +2 -1
  6. package/es/components/Checkbox/Checkbox.d.ts +6 -7
  7. package/es/components/ComboBox/ComboBox.d.ts +4 -5
  8. package/es/components/ComboBox/ComboBox.js +268 -261
  9. package/es/components/ComposedModal/ComposedModal.d.ts +1 -2
  10. package/es/components/DataTable/TableHeader.d.ts +4 -5
  11. package/es/components/DataTable/TableSlugRow.d.ts +3 -2
  12. package/es/components/DatePicker/DatePicker.d.ts +4 -5
  13. package/es/components/Dropdown/Dropdown.d.ts +6 -7
  14. package/es/components/Dropdown/index.d.ts +2 -2
  15. package/es/components/FormLabel/index.d.ts +2 -2
  16. package/es/components/Grid/Column.d.ts +2 -2
  17. package/es/components/Grid/GridTypes.d.ts +1 -2
  18. package/es/components/Grid/index.d.ts +3 -1
  19. package/es/components/IconButton/index.d.ts +3 -4
  20. package/es/components/InlineLoading/index.d.ts +2 -2
  21. package/es/components/ListBox/next/ListBoxTrigger.js +1 -0
  22. package/es/components/Loading/index.d.ts +2 -2
  23. package/es/components/Menu/Menu.js +1 -1
  24. package/es/components/Menu/MenuItem.js +13 -2
  25. package/es/components/Modal/Modal.d.ts +8 -9
  26. package/es/components/Modal/index.d.ts +2 -2
  27. package/es/components/MultiSelect/FilterableMultiSelect.d.ts +1 -2
  28. package/es/components/MultiSelect/MultiSelect.d.ts +10 -9
  29. package/es/components/Notification/Notification.d.ts +2 -2
  30. package/es/components/NumberInput/NumberInput.d.ts +12 -2
  31. package/es/components/NumberInput/NumberInput.js +2 -2
  32. package/es/components/NumberInput/index.d.ts +1 -1
  33. package/es/components/OverflowMenu/OverflowMenu.d.ts +10 -6
  34. package/es/components/OverflowMenu/index.d.ts +13 -0
  35. package/es/components/PasswordInput/index.d.ts +3 -0
  36. package/es/components/Popover/index.d.ts +8 -2
  37. package/es/components/Popover/index.js +26 -1
  38. package/es/components/ProgressBar/ProgressBar.d.ts +1 -1
  39. package/es/components/ProgressBar/index.d.ts +2 -2
  40. package/es/components/ProgressIndicator/ProgressIndicator.d.ts +2 -2
  41. package/es/components/ProgressIndicator/index.d.ts +2 -0
  42. package/es/components/RadioButton/RadioButton.d.ts +3 -4
  43. package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts +7 -8
  44. package/es/components/Select/Select.d.ts +1 -2
  45. package/es/components/Slider/Slider.d.ts +5 -5
  46. package/es/components/Slider/Slider.js +1 -1
  47. package/es/components/StructuredList/index.d.ts +2 -0
  48. package/es/components/Switch/Switch.d.ts +1 -1
  49. package/es/components/Switch/index.d.ts +2 -2
  50. package/es/components/Tab/index.d.ts +2 -1
  51. package/es/components/Tag/DismissibleTag.d.ts +12 -12
  52. package/es/components/Tag/DismissibleTag.js +34 -9
  53. package/es/components/Tag/OperationalTag.d.ts +12 -12
  54. package/es/components/Tag/OperationalTag.js +45 -9
  55. package/es/components/Tag/SelectableTag.d.ts +12 -12
  56. package/es/components/Tag/SelectableTag.js +46 -10
  57. package/es/components/Tag/Tag.d.ts +3 -3
  58. package/es/components/Tag/Tag.js +31 -5
  59. package/es/components/TextArea/TextArea.d.ts +6 -7
  60. package/es/components/TextArea/index.d.ts +2 -2
  61. package/es/components/TextInput/PasswordInput.d.ts +5 -6
  62. package/es/components/TextInput/PasswordInput.js +2 -2
  63. package/es/components/TextInput/TextInput.d.ts +1 -2
  64. package/es/components/TextInput/index.d.ts +4 -2
  65. package/es/components/Theme/index.d.ts +1 -0
  66. package/es/components/Theme/index.js +8 -2
  67. package/es/components/Tile/Tile.d.ts +3 -4
  68. package/es/components/TileGroup/TileGroup.d.ts +3 -2
  69. package/es/components/TileGroup/index.d.ts +9 -0
  70. package/es/components/Toggle/Toggle.js +1 -1
  71. package/es/components/Tooltip/DefinitionTooltip.js +1 -1
  72. package/es/components/Tooltip/Tooltip.js +16 -5
  73. package/es/components/Tooltip/index.d.ts +2 -2
  74. package/es/components/UnorderedList/UnorderedList.d.ts +1 -1
  75. package/es/components/UnorderedList/index.d.ts +1 -0
  76. package/es/index.js +4 -4
  77. package/es/prop-types/deprecateValuesWithin.js +35 -0
  78. package/lib/components/Accordion/Accordion.d.ts +1 -1
  79. package/lib/components/Accordion/index.d.ts +2 -2
  80. package/lib/components/Button/Button.js +2 -2
  81. package/lib/components/Button/index.d.ts +2 -1
  82. package/lib/components/Checkbox/Checkbox.d.ts +6 -7
  83. package/lib/components/ComboBox/ComboBox.d.ts +4 -5
  84. package/lib/components/ComboBox/ComboBox.js +267 -261
  85. package/lib/components/ComposedModal/ComposedModal.d.ts +1 -2
  86. package/lib/components/DataTable/TableHeader.d.ts +4 -5
  87. package/lib/components/DataTable/TableSlugRow.d.ts +3 -2
  88. package/lib/components/DatePicker/DatePicker.d.ts +4 -5
  89. package/lib/components/Dropdown/Dropdown.d.ts +6 -7
  90. package/lib/components/Dropdown/index.d.ts +2 -2
  91. package/lib/components/FormLabel/index.d.ts +2 -2
  92. package/lib/components/Grid/Column.d.ts +2 -2
  93. package/lib/components/Grid/GridTypes.d.ts +1 -2
  94. package/lib/components/Grid/index.d.ts +3 -1
  95. package/lib/components/IconButton/index.d.ts +3 -4
  96. package/lib/components/InlineLoading/index.d.ts +2 -2
  97. package/lib/components/ListBox/next/ListBoxTrigger.js +1 -0
  98. package/lib/components/Loading/index.d.ts +2 -2
  99. package/lib/components/Menu/Menu.js +1 -1
  100. package/lib/components/Menu/MenuItem.js +13 -2
  101. package/lib/components/Modal/Modal.d.ts +8 -9
  102. package/lib/components/Modal/index.d.ts +2 -2
  103. package/lib/components/MultiSelect/FilterableMultiSelect.d.ts +1 -2
  104. package/lib/components/MultiSelect/MultiSelect.d.ts +10 -9
  105. package/lib/components/Notification/Notification.d.ts +2 -2
  106. package/lib/components/NumberInput/NumberInput.d.ts +12 -2
  107. package/lib/components/NumberInput/NumberInput.js +2 -2
  108. package/lib/components/NumberInput/index.d.ts +1 -1
  109. package/lib/components/OverflowMenu/OverflowMenu.d.ts +10 -6
  110. package/lib/components/OverflowMenu/index.d.ts +13 -0
  111. package/lib/components/PasswordInput/index.d.ts +3 -0
  112. package/lib/components/Popover/index.d.ts +8 -2
  113. package/lib/components/Popover/index.js +26 -1
  114. package/lib/components/ProgressBar/ProgressBar.d.ts +1 -1
  115. package/lib/components/ProgressBar/index.d.ts +2 -2
  116. package/lib/components/ProgressIndicator/ProgressIndicator.d.ts +2 -2
  117. package/lib/components/ProgressIndicator/index.d.ts +2 -0
  118. package/lib/components/RadioButton/RadioButton.d.ts +3 -4
  119. package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts +7 -8
  120. package/lib/components/Select/Select.d.ts +1 -2
  121. package/lib/components/Slider/Slider.d.ts +5 -5
  122. package/lib/components/Slider/Slider.js +1 -1
  123. package/lib/components/StructuredList/index.d.ts +2 -0
  124. package/lib/components/Switch/Switch.d.ts +1 -1
  125. package/lib/components/Switch/index.d.ts +2 -2
  126. package/lib/components/Tab/index.d.ts +2 -1
  127. package/lib/components/Tag/DismissibleTag.d.ts +12 -12
  128. package/lib/components/Tag/DismissibleTag.js +33 -8
  129. package/lib/components/Tag/OperationalTag.d.ts +12 -12
  130. package/lib/components/Tag/OperationalTag.js +44 -8
  131. package/lib/components/Tag/SelectableTag.d.ts +12 -12
  132. package/lib/components/Tag/SelectableTag.js +45 -9
  133. package/lib/components/Tag/Tag.d.ts +3 -3
  134. package/lib/components/Tag/Tag.js +30 -4
  135. package/lib/components/TextArea/TextArea.d.ts +6 -7
  136. package/lib/components/TextArea/index.d.ts +2 -2
  137. package/lib/components/TextInput/PasswordInput.d.ts +5 -6
  138. package/lib/components/TextInput/PasswordInput.js +2 -2
  139. package/lib/components/TextInput/TextInput.d.ts +1 -2
  140. package/lib/components/TextInput/index.d.ts +4 -2
  141. package/lib/components/Theme/index.d.ts +1 -0
  142. package/lib/components/Theme/index.js +8 -1
  143. package/lib/components/Tile/Tile.d.ts +3 -4
  144. package/lib/components/TileGroup/TileGroup.d.ts +3 -2
  145. package/lib/components/TileGroup/index.d.ts +9 -0
  146. package/lib/components/Toggle/Toggle.js +1 -1
  147. package/lib/components/Tooltip/DefinitionTooltip.js +1 -1
  148. package/lib/components/Tooltip/Tooltip.js +16 -5
  149. package/lib/components/Tooltip/index.d.ts +2 -2
  150. package/lib/components/UnorderedList/UnorderedList.d.ts +1 -1
  151. package/lib/components/UnorderedList/index.d.ts +1 -0
  152. package/lib/index.js +30 -29
  153. package/lib/prop-types/deprecateValuesWithin.js +39 -0
  154. package/package.json +6 -6
  155. package/es/components/TileGroup/index.js +0 -13
  156. 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, { ReactNodeLike } from 'prop-types';
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?: ReactNodeLike;
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>>({ children, className, disabled, id, renderIcon, selected, slug, size, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
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("div", {
58
- className: `${prefix}--interactive--tag-children`
59
- }, children, normalizedSlug));
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, { ReactNodeLike } from 'prop-types';
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?: ReactNodeLike;
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
  */
@@ -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
- className: `${prefix}--tag__label`,
97
- title: typeof children === 'string' ? children : undefined
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(Text, null, children !== null && children !== undefined ? children : typeText), normalizedSlug);
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 { ReactNodeLike } from 'prop-types';
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?: ReactNodeLike;
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?: ReactNodeLike;
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: ReactNodeLike;
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?: ReactNodeLike;
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?: ReactNodeLike;
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?: ReactNodeLike;
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?: ReactNodeLike;
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: ReactNodeLike;
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?: ReactNodeLike;
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}-right`;
142
+ align = `${tooltipPosition}-end`;
143
143
  }
144
144
  if (tooltipAlignment === 'start') {
145
- align = `${tooltipPosition}-left`;
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?: ReactNodeLike;
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 { TextInput };
5
+ export { type TextInputSkeletonProps };
6
+ export { TextInput, type TextInputProps };
@@ -49,4 +49,5 @@ export declare namespace Theme {
49
49
  * Get access to the current theme
50
50
  */
51
51
  export declare function useTheme(): GlobalThemeProps;
52
+ export declare function usePrefersDarkScheme(): boolean;
52
53
  export {};
@@ -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?: ReactNodeLike;
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?: ReactNodeLike;
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?: ReactNodeLike;
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, { ReactNodeLike } from 'prop-types';
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?: ReactNodeLike;
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, {
@@ -18,7 +18,7 @@ import { Escape } from '../../internal/keyboard/keys.js';
18
18
 
19
19
  const DefinitionTooltip = _ref => {
20
20
  let {
21
- align = 'bottom-left',
21
+ align = 'bottom-start',
22
22
  className,
23
23
  children,
24
24
  definition,
@@ -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: () => setOpen(false),
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: onDragStart,
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
- setIsPointerIntersecting(true);
84
- setOpen(true, enterDelayMs);
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
  }
@@ -5,3 +5,4 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  export { default, default as UnorderedList } from './UnorderedList';
8
+ export { type UnorderedListProps } from './UnorderedList';
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/index.js';
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';