@carbon/react 1.71.0-rc.0 → 1.71.1

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 (70) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +770 -770
  2. package/es/components/Checkbox/Checkbox.d.ts +5 -0
  3. package/es/components/Checkbox/Checkbox.js +16 -7
  4. package/es/components/CheckboxGroup/CheckboxGroup.d.ts +5 -0
  5. package/es/components/CheckboxGroup/CheckboxGroup.js +16 -7
  6. package/es/components/ComboBox/ComboBox.d.ts +1 -1
  7. package/es/components/ComposedModal/ComposedModal.d.ts +5 -0
  8. package/es/components/ComposedModal/ComposedModal.js +16 -10
  9. package/es/components/FluidNumberInput/FluidNumberInput.d.ts +4 -0
  10. package/es/components/FluidSelect/FluidSelect.d.ts +4 -0
  11. package/es/components/FluidSelect/FluidSelect.js +5 -1
  12. package/es/components/FluidTextArea/FluidTextArea.d.ts +4 -0
  13. package/es/components/FluidTextArea/FluidTextArea.js +5 -1
  14. package/es/components/FluidTextInput/FluidPasswordInput.d.ts +4 -0
  15. package/es/components/FluidTextInput/FluidPasswordInput.js +5 -1
  16. package/es/components/FluidTextInput/FluidTextInput.d.ts +4 -0
  17. package/es/components/FluidTextInput/FluidTextInput.js +5 -1
  18. package/es/components/FluidTimePicker/FluidTimePicker.d.ts +4 -0
  19. package/es/components/FluidTimePicker/FluidTimePicker.js +23 -7
  20. package/es/components/Modal/Modal.d.ts +5 -0
  21. package/es/components/Modal/Modal.js +16 -10
  22. package/es/components/PaginationNav/PaginationNav.js +15 -3
  23. package/es/components/RadioButton/RadioButton.d.ts +5 -0
  24. package/es/components/RadioButton/RadioButton.js +16 -7
  25. package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts +5 -0
  26. package/es/components/RadioButtonGroup/RadioButtonGroup.js +16 -7
  27. package/es/components/RadioTile/RadioTile.d.ts +5 -0
  28. package/es/components/RadioTile/RadioTile.js +17 -8
  29. package/es/components/Tag/DismissibleTag.d.ts +11 -2
  30. package/es/components/Tag/DismissibleTag.js +13 -5
  31. package/es/components/Tag/Tag.d.ts +5 -0
  32. package/es/components/Tag/Tag.js +14 -7
  33. package/es/components/Tile/Tile.d.ts +21 -1
  34. package/es/components/Tile/Tile.js +68 -48
  35. package/es/internal/wrapFocus.js +1 -2
  36. package/lib/components/Checkbox/Checkbox.d.ts +5 -0
  37. package/lib/components/Checkbox/Checkbox.js +16 -7
  38. package/lib/components/CheckboxGroup/CheckboxGroup.d.ts +5 -0
  39. package/lib/components/CheckboxGroup/CheckboxGroup.js +16 -7
  40. package/lib/components/ComboBox/ComboBox.d.ts +1 -1
  41. package/lib/components/ComposedModal/ComposedModal.d.ts +5 -0
  42. package/lib/components/ComposedModal/ComposedModal.js +16 -10
  43. package/lib/components/FluidNumberInput/FluidNumberInput.d.ts +4 -0
  44. package/lib/components/FluidSelect/FluidSelect.d.ts +4 -0
  45. package/lib/components/FluidSelect/FluidSelect.js +5 -1
  46. package/lib/components/FluidTextArea/FluidTextArea.d.ts +4 -0
  47. package/lib/components/FluidTextArea/FluidTextArea.js +5 -1
  48. package/lib/components/FluidTextInput/FluidPasswordInput.d.ts +4 -0
  49. package/lib/components/FluidTextInput/FluidPasswordInput.js +5 -1
  50. package/lib/components/FluidTextInput/FluidTextInput.d.ts +4 -0
  51. package/lib/components/FluidTextInput/FluidTextInput.js +5 -1
  52. package/lib/components/FluidTimePicker/FluidTimePicker.d.ts +4 -0
  53. package/lib/components/FluidTimePicker/FluidTimePicker.js +23 -7
  54. package/lib/components/Modal/Modal.d.ts +5 -0
  55. package/lib/components/Modal/Modal.js +16 -10
  56. package/lib/components/PaginationNav/PaginationNav.js +15 -3
  57. package/lib/components/RadioButton/RadioButton.d.ts +5 -0
  58. package/lib/components/RadioButton/RadioButton.js +16 -7
  59. package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts +5 -0
  60. package/lib/components/RadioButtonGroup/RadioButtonGroup.js +16 -7
  61. package/lib/components/RadioTile/RadioTile.d.ts +5 -0
  62. package/lib/components/RadioTile/RadioTile.js +17 -8
  63. package/lib/components/Tag/DismissibleTag.d.ts +11 -2
  64. package/lib/components/Tag/DismissibleTag.js +13 -5
  65. package/lib/components/Tag/Tag.d.ts +5 -0
  66. package/lib/components/Tag/Tag.js +14 -7
  67. package/lib/components/Tile/Tile.d.ts +21 -1
  68. package/lib/components/Tile/Tile.js +67 -47
  69. package/lib/internal/wrapFocus.js +1 -6
  70. package/package.json +4 -5
@@ -54,6 +54,7 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
54
54
  let {
55
55
  children,
56
56
  className,
57
+ decorator,
57
58
  id,
58
59
  type,
59
60
  filter,
@@ -97,10 +98,10 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
97
98
  }
98
99
  };
99
100
 
100
- // Slug is always size `md` and `inline`
101
- let normalizedSlug;
102
- if (slug && slug['type']?.displayName === 'AILabel' && !isInteractiveTag) {
103
- normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
101
+ // AILabel is always size `sm` and `inline`
102
+ let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
103
+ if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel' && !isInteractiveTag) {
104
+ normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
104
105
  size: 'sm',
105
106
  kind: 'inline'
106
107
  });
@@ -115,7 +116,7 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
115
116
  }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, {
116
117
  title: typeof children === 'string' ? children : undefined,
117
118
  className: `${prefix}--tag__label`
118
- }, children !== null && children !== undefined ? children : typeText), normalizedSlug, /*#__PURE__*/React__default["default"].createElement("button", {
119
+ }, children !== null && children !== undefined ? children : typeText), normalizedDecorator, /*#__PURE__*/React__default["default"].createElement("button", {
119
120
  type: "button",
120
121
  className: `${prefix}--tag__close-icon`,
121
122
  onClick: handleClose,
@@ -146,7 +147,9 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
146
147
  }, children !== null && children !== undefined ? children : typeText)) : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
147
148
  title: children !== null && children !== undefined && typeof children === 'string' ? children : typeText,
148
149
  className: labelClasses
149
- }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
150
+ }, children !== null && children !== undefined ? children : typeText), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
151
+ className: `${prefix}--tag__decorator`
152
+ }, normalizedDecorator) : '');
150
153
  });
151
154
  Tag.propTypes = {
152
155
  /**
@@ -162,6 +165,10 @@ Tag.propTypes = {
162
165
  * Provide a custom className that is applied to the containing <span>
163
166
  */
164
167
  className: PropTypes__default["default"].string,
168
+ /**
169
+ * **Experimental:** Provide a `decorator` component to be rendered inside the `Tag` component
170
+ */
171
+ decorator: PropTypes__default["default"].node,
165
172
  /**
166
173
  * Specify if the `Tag` is disabled
167
174
  */
@@ -191,7 +198,7 @@ Tag.propTypes = {
191
198
  /**
192
199
  * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
193
200
  */
194
- slug: PropTypes__default["default"].node,
201
+ slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
195
202
  /**
196
203
  * Text to show on clear filters
197
204
  */
@@ -2,6 +2,10 @@ import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAt
2
2
  export interface TileProps extends HTMLAttributes<HTMLDivElement> {
3
3
  children?: ReactNode;
4
4
  className?: string;
5
+ /**
6
+ * **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
7
+ */
8
+ decorator?: ReactNode;
5
9
  /** @deprecated */
6
10
  light?: boolean;
7
11
  /**
@@ -10,7 +14,8 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
10
14
  */
11
15
  hasRoundedCorners?: boolean;
12
16
  /**
13
- * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
17
+ * @deprecated please use `decorator` instead.
18
+ * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
14
19
  */
15
20
  slug?: ReactNode;
16
21
  }
@@ -18,6 +23,10 @@ export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.Ref
18
23
  export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
19
24
  children?: ReactNode;
20
25
  className?: string;
26
+ /**
27
+ * **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
28
+ */
29
+ decorator?: boolean | ReactNode;
21
30
  /** @deprecated */
22
31
  light?: boolean;
23
32
  /**
@@ -56,6 +65,7 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
56
65
  */
57
66
  rel?: string;
58
67
  /**
68
+ * @deprecated please use `decorator` instead.
59
69
  * **Experimental**: Specify if a `Slug` icon should be rendered inside the `ClickableTile`
60
70
  */
61
71
  slug?: boolean;
@@ -64,6 +74,10 @@ export declare const ClickableTile: React.ForwardRefExoticComponent<ClickableTil
64
74
  export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
65
75
  children?: ReactNode;
66
76
  className?: string;
77
+ /**
78
+ * **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
79
+ */
80
+ decorator?: ReactNode;
67
81
  /** @deprecated */
68
82
  light?: boolean;
69
83
  /**
@@ -101,6 +115,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
101
115
  */
102
116
  selected?: boolean;
103
117
  /**
118
+ * @deprecated please use `decorator` instead.
104
119
  * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
105
120
  */
106
121
  slug?: ReactNode;
@@ -122,6 +137,10 @@ export declare const SelectableTile: React.ForwardRefExoticComponent<SelectableT
122
137
  export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
123
138
  children?: ReactNode;
124
139
  className?: string;
140
+ /**
141
+ * **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
142
+ */
143
+ decorator?: ReactNode;
125
144
  /** @deprecated */
126
145
  light?: boolean;
127
146
  /**
@@ -146,6 +165,7 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
146
165
  */
147
166
  onKeyUp?(event: KeyboardEvent): void;
148
167
  /**
168
+ * @deprecated please use `decorator` instead.
149
169
  * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
150
170
  */
151
171
  slug?: ReactNode;
@@ -34,11 +34,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
34
34
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
35
35
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
36
36
 
37
- var _rect, _path, _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
37
+ var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
38
38
  const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_ref, ref) {
39
39
  let {
40
40
  children,
41
41
  className,
42
+ decorator,
42
43
  light = false,
43
44
  slug,
44
45
  hasRoundedCorners = false,
@@ -48,12 +49,16 @@ const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_re
48
49
  const tileClasses = cx__default["default"](`${prefix}--tile`, {
49
50
  [`${prefix}--tile--light`]: light,
50
51
  [`${prefix}--tile--slug`]: slug,
51
- [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
52
+ [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
53
+ [`${prefix}--tile--decorator`]: decorator,
54
+ [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
52
55
  }, className);
53
56
  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
54
57
  className: tileClasses,
55
58
  ref: ref
56
- }, rest), children, slug);
59
+ }, rest), children, slug, decorator && /*#__PURE__*/React__default["default"].createElement("div", {
60
+ className: `${prefix}--tile--inner-decorator`
61
+ }, decorator));
57
62
  });
58
63
  Tile.displayName = 'Tile';
59
64
  Tile.propTypes = {
@@ -65,6 +70,10 @@ Tile.propTypes = {
65
70
  * The CSS class names.
66
71
  */
67
72
  className: PropTypes__default["default"].string,
73
+ /**
74
+ * **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
75
+ */
76
+ decorator: PropTypes__default["default"].node,
68
77
  /**
69
78
  * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
70
79
  * when `slug` prop is present
@@ -80,13 +89,14 @@ Tile.propTypes = {
80
89
  /**
81
90
  * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
82
91
  */
83
- slug: PropTypes__default["default"].node
92
+ slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `Tile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
84
93
  };
85
94
  const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function ClickableTile(_ref2, ref) {
86
95
  let {
87
96
  children,
88
97
  className,
89
98
  clicked = false,
99
+ decorator,
90
100
  disabled,
91
101
  href,
92
102
  light,
@@ -102,7 +112,9 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
102
112
  [`${prefix}--tile--is-clicked`]: clicked,
103
113
  [`${prefix}--tile--light`]: light,
104
114
  [`${prefix}--tile--slug`]: slug,
105
- [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
115
+ [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
116
+ [`${prefix}--tile--decorator`]: decorator,
117
+ [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
106
118
  }, className);
107
119
  const [isSelected, setIsSelected] = React.useState(clicked);
108
120
  function handleOnClick(evt) {
@@ -117,25 +129,6 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
117
129
  }
118
130
  onKeyDown(evt);
119
131
  }
120
-
121
- // To Do: Replace with an an icon from `@carbon/react`
122
- // since the hollow slug in `ClickableTile` is not interactive
123
- const hollowSlugIcon = /*#__PURE__*/React__default["default"].createElement("svg", {
124
- className: `${prefix}--tile--slug-icon`,
125
- width: "24",
126
- height: "24",
127
- viewBox: "0 0 24 24",
128
- fill: "none",
129
- xmlns: "http://www.w3.org/2000/svg"
130
- }, _rect || (_rect = /*#__PURE__*/React__default["default"].createElement("rect", {
131
- x: "0.5",
132
- y: "0.5",
133
- width: "23",
134
- height: "23"
135
- })), _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
136
- d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
137
- fill: "#161616"
138
- })));
139
132
  const v12DefaultIcons = index.useFeatureFlag('enable-v12-tile-default-icons');
140
133
  if (v12DefaultIcons) {
141
134
  if (!Icon) {
@@ -157,9 +150,14 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
157
150
  onKeyDown: handleOnKeyDown,
158
151
  ref: ref,
159
152
  disabled: disabled
160
- }, rest), slug ? /*#__PURE__*/React__default["default"].createElement("div", {
153
+ }, rest), slug || decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
161
154
  className: `${prefix}--tile-content`
162
- }, children) : children, slug && hollowSlugIcon, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
155
+ }, children) : children, (slug === true || decorator === true) && /*#__PURE__*/React__default["default"].createElement(iconsReact.AiLabel, {
156
+ size: "24",
157
+ className: `${prefix}--tile--ai-label-icon`
158
+ }), /*#__PURE__*/React__default["default"].isValidElement(decorator) && /*#__PURE__*/React__default["default"].createElement("div", {
159
+ className: `${prefix}--tile--inner-decorator`
160
+ }, decorator), Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
163
161
  className: iconClasses,
164
162
  "aria-hidden": "true"
165
163
  }));
@@ -178,6 +176,10 @@ ClickableTile.propTypes = {
178
176
  * Boolean for whether a tile has been clicked.
179
177
  */
180
178
  clicked: PropTypes__default["default"].bool,
179
+ /**
180
+ * **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
181
+ */
182
+ decorator: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].node]),
181
183
  /**
182
184
  * Specify whether the ClickableTile should be disabled
183
185
  */
@@ -219,6 +221,7 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
219
221
  let {
220
222
  children,
221
223
  className,
224
+ decorator,
222
225
  disabled,
223
226
  id,
224
227
  light,
@@ -242,14 +245,16 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
242
245
  [`${prefix}--tile--light`]: light,
243
246
  [`${prefix}--tile--disabled`]: disabled,
244
247
  [`${prefix}--tile--slug`]: slug,
245
- [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
248
+ [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
249
+ [`${prefix}--tile--decorator`]: decorator,
250
+ [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
246
251
  }, className);
247
252
 
248
253
  // TODO: rename to handleClick when handleClick prop is deprecated
249
254
  function handleOnClick(evt) {
250
255
  evt.preventDefault();
251
256
  evt?.persist?.();
252
- if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
257
+ if (normalizedDecorator && decoratorRef.current && decoratorRef.current.contains(evt.target)) {
253
258
  return;
254
259
  }
255
260
  setIsSelected(!isSelected);
@@ -276,13 +281,13 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
276
281
  setPrevSelected(selected);
277
282
  }
278
283
 
279
- // Slug is always size `xs`
280
- const slugRef = React.useRef(null);
281
- let normalizedSlug;
282
- if (slug && slug['type']?.displayName === 'AILabel') {
283
- normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
284
+ // AILabel is always size `xs`
285
+ const decoratorRef = React.useRef(null);
286
+ let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
287
+ if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
288
+ normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
284
289
  size: 'xs',
285
- ref: slugRef
290
+ ref: decoratorRef
286
291
  });
287
292
  }
288
293
  return (
@@ -307,12 +312,18 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
307
312
  as: "label",
308
313
  htmlFor: id,
309
314
  className: `${prefix}--tile-content`
310
- }, children), normalizedSlug)
315
+ }, children), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
316
+ className: `${prefix}--tile--inner-decorator`
317
+ }, normalizedDecorator) : '')
311
318
  );
312
319
  });
313
320
  SelectableTile.propTypes = {
314
321
  children: PropTypes__default["default"].node,
315
322
  className: PropTypes__default["default"].string,
323
+ /**
324
+ * **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
325
+ */
326
+ decorator: PropTypes__default["default"].node,
316
327
  /**
317
328
  * Specify whether the SelectableTile should be disabled
318
329
  */
@@ -335,7 +346,7 @@ SelectableTile.propTypes = {
335
346
  * The `name` of the `<input>`.
336
347
  * @deprecated
337
348
  */
338
- name: PropTypes__default["default"].string,
349
+ name: deprecate["default"](PropTypes__default["default"].string, 'The `name` property is no longer used. It will be removed in the next major release.'),
339
350
  /**
340
351
  * The empty handler of the `<input>`.
341
352
  */
@@ -355,7 +366,7 @@ SelectableTile.propTypes = {
355
366
  /**
356
367
  * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
357
368
  */
358
- slug: PropTypes__default["default"].node,
369
+ slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `SelectableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
359
370
  /**
360
371
  * Specify the tab index of the wrapper element
361
372
  */
@@ -368,13 +379,14 @@ SelectableTile.propTypes = {
368
379
  * The value of the `<input>`.
369
380
  * @deprecated
370
381
  */
371
- value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired
382
+ value: deprecate["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]), 'The `value` property is no longer used. It will be removed in the next major release.`')
372
383
  };
373
384
  const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableTile(_ref4, forwardRef) {
374
385
  let {
375
386
  tabIndex = 0,
376
387
  className,
377
388
  children,
389
+ decorator,
378
390
  expanded = false,
379
391
  tileMaxHeight = 0,
380
392
  // eslint-disable-line
@@ -449,7 +461,9 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
449
461
  [`${prefix}--tile--is-expanded`]: isExpanded,
450
462
  [`${prefix}--tile--light`]: light,
451
463
  [`${prefix}--tile--slug`]: slug,
452
- [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
464
+ [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
465
+ [`${prefix}--tile--decorator`]: decorator,
466
+ [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
453
467
  }, className);
454
468
  const chevronInteractiveClassNames = cx__default["default"](`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
455
469
  const childrenAsArray = getChildren();
@@ -476,10 +490,10 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
476
490
 
477
491
  // Interactive elements or elements that are given a role should be treated
478
492
  // the same because elements with a role can not be rendered inside a `button`
479
- if (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current) && !useNoInteractiveChildren.getRoleContent(belowTheFold.current) && !useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current) && !useNoInteractiveChildren.getRoleContent(aboveTheFold.current) && !slug) {
493
+ if (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current) && !useNoInteractiveChildren.getRoleContent(belowTheFold.current) && !useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current) && !useNoInteractiveChildren.getRoleContent(aboveTheFold.current) && !(slug || decorator)) {
480
494
  setInteractive(false);
481
495
  }
482
- }, [slug]);
496
+ }, [slug, decorator]);
483
497
  useIsomorphicEffect["default"](() => {
484
498
  if (!tile.current) {
485
499
  return;
@@ -503,10 +517,10 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
503
517
  }, []);
504
518
  const belowTheFoldId = useId.useId('expandable-tile-interactive');
505
519
 
506
- // Slug is always size `xs`
507
- let normalizedSlug;
508
- if (slug && slug['type']?.displayName === 'AILabel') {
509
- normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
520
+ // AILabel is always size `xs`
521
+ let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
522
+ if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
523
+ normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
510
524
  size: 'xs'
511
525
  });
512
526
  }
@@ -516,7 +530,9 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
516
530
  className: interactiveClassNames
517
531
  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
518
532
  ref: tileContent
519
- }, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("div", {
533
+ }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
534
+ className: `${prefix}--tile--inner-decorator`
535
+ }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement("div", {
520
536
  ref: aboveTheFold,
521
537
  className: `${prefix}--tile-content`
522
538
  }, childrenAsArray[0]), /*#__PURE__*/React__default["default"].createElement("button", {
@@ -559,6 +575,10 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
559
575
  ExpandableTile.propTypes = {
560
576
  children: PropTypes__default["default"].node,
561
577
  className: PropTypes__default["default"].string,
578
+ /**
579
+ * **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
580
+ */
581
+ decorator: PropTypes__default["default"].node,
562
582
  /**
563
583
  * `true` if the tile is expanded.
564
584
  */
@@ -588,7 +608,7 @@ ExpandableTile.propTypes = {
588
608
  /**
589
609
  * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
590
610
  */
591
- slug: PropTypes__default["default"].node,
611
+ slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `ExpandableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
592
612
  /**
593
613
  * The `tabindex` attribute.
594
614
  */
@@ -9,15 +9,10 @@
9
9
 
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
- var findLast = require('lodash.findlast');
13
12
  var React = require('react');
14
13
  var navigation = require('./keyboard/navigation.js');
15
14
  var tabbable = require('tabbable');
16
15
 
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var findLast__default = /*#__PURE__*/_interopDefaultLegacy(findLast);
20
-
21
16
  /**
22
17
  * @param {Node} node A DOM node.
23
18
  * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
@@ -53,7 +48,7 @@ function wrapFocus(_ref) {
53
48
  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
54
49
  const comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
55
50
  if (currentActiveNode === startTrapNode || comparisonResult & navigation.DOCUMENT_POSITION_BROAD_PRECEDING) {
56
- const tabbable = findLast__default["default"](bodyNode.querySelectorAll(navigation.selectorTabbable), elem => Boolean(elem.offsetParent));
51
+ const tabbable = [...bodyNode.querySelectorAll(navigation.selectorTabbable)].reverse().find(elem => Boolean(elem.offsetParent));
57
52
  if (tabbable) {
58
53
  tabbable.focus();
59
54
  } else if (bodyNode !== oldActiveNode) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/react",
3
3
  "description": "React components for the Carbon Design System",
4
- "version": "1.71.0-rc.0",
4
+ "version": "1.71.1",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -50,9 +50,9 @@
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.24.7",
52
52
  "@carbon/feature-flags": "^0.24.0",
53
- "@carbon/icons-react": "^11.52.0",
53
+ "@carbon/icons-react": "^11.53.0",
54
54
  "@carbon/layout": "^11.28.0",
55
- "@carbon/styles": "^1.70.0-rc.0",
55
+ "@carbon/styles": "^1.70.0",
56
56
  "@floating-ui/react": "^0.26.0",
57
57
  "@ibm/telemetry-js": "^1.5.0",
58
58
  "classnames": "2.5.1",
@@ -61,7 +61,6 @@
61
61
  "flatpickr": "4.6.13",
62
62
  "invariant": "^2.2.3",
63
63
  "lodash.debounce": "^4.0.8",
64
- "lodash.findlast": "^4.5.0",
65
64
  "lodash.omit": "^4.5.0",
66
65
  "lodash.throttle": "^4.1.1",
67
66
  "prop-types": "^15.7.2",
@@ -146,5 +145,5 @@
146
145
  "**/*.scss",
147
146
  "**/*.css"
148
147
  ],
149
- "gitHead": "d3bd715a72872535c5b4156720828fe1cd9365f5"
148
+ "gitHead": "c0223bda5d6b6f30b20631cf5b8ea0ec45fd39b3"
150
149
  }