@carbon/react 1.82.1 → 1.83.0-rc.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 (62) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +925 -880
  2. package/es/components/AccordionItem/index.d.ts +9 -0
  3. package/es/components/DatePicker/DatePicker.d.ts +1 -1
  4. package/es/components/DatePicker/DatePicker.js +6 -3
  5. package/es/components/FileUploader/FileUploaderButton.d.ts +1 -1
  6. package/es/components/FileUploader/FileUploaderButton.js +2 -1
  7. package/es/components/Grid/Column.d.ts +5 -5
  8. package/es/components/Grid/Column.js +10 -10
  9. package/es/components/LayoutDirection/index.d.ts +8 -0
  10. package/es/components/Menu/Menu.js +2 -1
  11. package/es/components/Menu/MenuItem.js +2 -1
  12. package/es/components/Modal/Modal.d.ts +1 -1
  13. package/es/components/Modal/Modal.js +5 -3
  14. package/es/components/Slider/Slider.d.ts +8 -0
  15. package/es/components/Slider/Slider.js +6 -0
  16. package/es/components/Tabs/Tabs.js +5 -2
  17. package/es/components/Tag/DismissibleTag.d.ts +4 -0
  18. package/es/components/Tag/DismissibleTag.js +8 -3
  19. package/es/components/Tag/SelectableTag.d.ts +4 -0
  20. package/es/components/Tag/SelectableTag.js +12 -3
  21. package/es/components/UIShell/Switcher.js +3 -3
  22. package/es/feature-flags.d.ts +7 -0
  23. package/es/index.js +2 -2
  24. package/es/internal/debounce.d.ts +8 -0
  25. package/es/internal/environment.d.ts +12 -0
  26. package/es/internal/useId.js +1 -1
  27. package/es/internal/usePreviousValue.d.ts +17 -0
  28. package/es/internal/usePreviousValue.js +28 -0
  29. package/es/prop-types/AriaPropTypes.d.ts +8 -0
  30. package/lib/components/AccordionItem/index.d.ts +9 -0
  31. package/lib/components/DatePicker/DatePicker.d.ts +1 -1
  32. package/lib/components/DatePicker/DatePicker.js +6 -3
  33. package/lib/components/FileUploader/FileUploaderButton.d.ts +1 -1
  34. package/lib/components/FileUploader/FileUploaderButton.js +3 -2
  35. package/lib/components/Grid/Column.d.ts +5 -5
  36. package/lib/components/Grid/Column.js +10 -10
  37. package/lib/components/LayoutDirection/index.d.ts +8 -0
  38. package/lib/components/Menu/Menu.js +2 -1
  39. package/lib/components/Menu/MenuItem.js +2 -1
  40. package/lib/components/Modal/Modal.d.ts +1 -1
  41. package/lib/components/Modal/Modal.js +5 -3
  42. package/lib/components/Slider/Slider.d.ts +8 -0
  43. package/lib/components/Slider/Slider.js +6 -0
  44. package/lib/components/Tabs/Tabs.js +5 -2
  45. package/lib/components/Tag/DismissibleTag.d.ts +4 -0
  46. package/lib/components/Tag/DismissibleTag.js +8 -3
  47. package/lib/components/Tag/SelectableTag.d.ts +4 -0
  48. package/lib/components/Tag/SelectableTag.js +12 -3
  49. package/lib/components/UIShell/Switcher.js +3 -3
  50. package/lib/feature-flags.d.ts +7 -0
  51. package/lib/index.js +4 -4
  52. package/lib/internal/debounce.d.ts +8 -0
  53. package/lib/internal/environment.d.ts +12 -0
  54. package/lib/internal/usePreviousValue.d.ts +17 -0
  55. package/lib/internal/usePreviousValue.js +32 -0
  56. package/lib/prop-types/AriaPropTypes.d.ts +8 -0
  57. package/package.json +4 -4
  58. package/telemetry.yml +1 -0
  59. package/es/prop-types/tools/getDisplayName.js +0 -34
  60. package/es/prop-types/types.js +0 -13
  61. package/lib/prop-types/tools/getDisplayName.js +0 -38
  62. package/lib/prop-types/types.js +0 -17
@@ -521,8 +521,11 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
521
521
  }
522
522
  }, [inline]);
523
523
  React.useEffect(() => {
524
- //when value prop is set to empty, this clears the flatpicker's calendar instance and text input
525
- if (value === '') {
524
+ // when value prop is manually reset, this clears the flatpickr calendar instance and text input
525
+ // run if both:
526
+ // 1. value prop is set to a falsy value (`""`, `undefined`, `null`, etc) OR an array of all falsy values
527
+ // 2. flatpickr instance contains values in its `selectedDates` property so it hasn't already been cleared
528
+ if ((!value || Array.isArray(value) && value.every(date => !date)) && calendarRef.current?.selectedDates.length) {
526
529
  calendarRef.current?.clear();
527
530
  if (startInputField.current) {
528
531
  startInputField.current.value = '';
@@ -605,7 +608,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
605
608
  DatePicker.propTypes = {
606
609
  /**
607
610
  * Flatpickr prop passthrough enables direct date input, and when set to false,
608
- * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
611
+ * we must clear dates manually by resetting the value prop to a falsy value (such as `""`, `null`, or `undefined`) or an array of all falsy values, making it a controlled input.
609
612
  */
610
613
  allowInput: PropTypes__default["default"].bool,
611
614
  /**
@@ -81,7 +81,7 @@ declare namespace FileUploaderButton {
81
81
  /**
82
82
  * Specify the type of underlying button
83
83
  */
84
- buttonKind: PropTypes.Requireable<string>;
84
+ buttonKind: PropTypes.Requireable<"primary" | "secondary" | "danger" | "ghost" | "danger--primary" | "danger--ghost" | "danger--tertiary" | "tertiary">;
85
85
  /**
86
86
  * Provide a custom className to be applied to the container node
87
87
  */
@@ -15,11 +15,12 @@ var PropTypes = require('prop-types');
15
15
  var React = require('react');
16
16
  var keys = require('../../internal/keyboard/keys.js');
17
17
  var match = require('../../internal/keyboard/match.js');
18
- var types = require('../../prop-types/types.js');
19
18
  var uniqueId = require('../../tools/uniqueId.js');
20
19
  var usePrefix = require('../../internal/usePrefix.js');
21
20
  var deprecate = require('../../prop-types/deprecate.js');
22
21
  var noopFn = require('../../internal/noopFn.js');
22
+ var Button = require('../Button/Button.js');
23
+ require('../Button/Button.Skeleton.js');
23
24
 
24
25
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
25
26
 
@@ -123,7 +124,7 @@ FileUploaderButton.propTypes = {
123
124
  /**
124
125
  * Specify the type of underlying button
125
126
  */
126
- buttonKind: PropTypes__default["default"].oneOf(types.ButtonKinds),
127
+ buttonKind: PropTypes__default["default"].oneOf(Button.ButtonKinds),
127
128
  /**
128
129
  * Provide a custom className to be applied to the container node
129
130
  */
@@ -28,35 +28,35 @@ export interface ColumnBaseProps {
28
28
  * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
29
29
  * This breakpoint supports 16 columns by default.
30
30
  *
31
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
31
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
32
32
  */
33
33
  lg?: ColumnSpan;
34
34
  /**
35
35
  * Specify column span for the `max` breakpoint. This breakpoint supports 16
36
36
  * columns by default.
37
37
  *
38
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
38
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
39
39
  */
40
40
  max?: ColumnSpan;
41
41
  /**
42
42
  * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
43
43
  * This breakpoint supports 8 columns by default.
44
44
  *
45
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
45
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
46
46
  */
47
47
  md?: ColumnSpan;
48
48
  /**
49
49
  * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
50
50
  * This breakpoint supports 4 columns by default.
51
51
  *
52
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
52
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
53
53
  */
54
54
  sm?: ColumnSpan;
55
55
  /**
56
56
  * Specify column span for the `xlg` breakpoint (Default breakpoint up to
57
57
  * 1584px) This breakpoint supports 16 columns by default.
58
58
  *
59
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
59
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
60
60
  */
61
61
  xlg?: ColumnSpan;
62
62
  /**
@@ -106,28 +106,28 @@ Column.propTypes = {
106
106
  * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
107
107
  * This breakpoint supports 16 columns by default.
108
108
  *
109
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
109
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
110
110
  */
111
111
  lg: spanPropType,
112
112
  /**
113
113
  * Specify column span for the `max` breakpoint. This breakpoint supports 16
114
114
  * columns by default.
115
115
  *
116
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
116
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
117
117
  */
118
118
  max: spanPropType,
119
119
  /**
120
120
  * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
121
121
  * This breakpoint supports 8 columns by default.
122
122
  *
123
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
123
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
124
124
  */
125
125
  md: spanPropType,
126
126
  /**
127
127
  * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
128
128
  * This breakpoint supports 4 columns by default.
129
129
  *
130
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
130
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
131
131
  */
132
132
  sm: spanPropType,
133
133
  /**
@@ -139,7 +139,7 @@ Column.propTypes = {
139
139
  * Specify column span for the `xlg` breakpoint (Default breakpoint up to
140
140
  * 1584px) This breakpoint supports 16 columns by default.
141
141
  *
142
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
142
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
143
143
  */
144
144
  xlg: spanPropType
145
145
  };
@@ -183,28 +183,28 @@ CSSGridColumn.propTypes = {
183
183
  * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
184
184
  * This breakpoint supports 16 columns by default.
185
185
  *
186
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
186
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
187
187
  */
188
188
  lg: spanPropType,
189
189
  /**
190
190
  * Specify column span for the `max` breakpoint. This breakpoint supports 16
191
191
  * columns by default.
192
192
  *
193
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
193
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
194
194
  */
195
195
  max: spanPropType,
196
196
  /**
197
197
  * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
198
198
  * This breakpoint supports 8 columns by default.
199
199
  *
200
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
200
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
201
201
  */
202
202
  md: spanPropType,
203
203
  /**
204
204
  * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
205
205
  * This breakpoint supports 4 columns by default.
206
206
  *
207
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
207
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
208
208
  */
209
209
  sm: spanPropType,
210
210
  /**
@@ -220,7 +220,7 @@ CSSGridColumn.propTypes = {
220
220
  * Specify column span for the `xlg` breakpoint (Default breakpoint up to
221
221
  * 1584px) This breakpoint supports 16 columns by default.
222
222
  *
223
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
223
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
224
224
  */
225
225
  xlg: spanPropType
226
226
  };
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ export { LayoutDirection } from './LayoutDirection';
8
+ export { useLayoutDirection } from './useLayoutDirection';
@@ -20,8 +20,9 @@ var useMergedRefs = require('../../internal/useMergedRefs.js');
20
20
  var usePrefix = require('../../internal/usePrefix.js');
21
21
  var deprecate = require('../../prop-types/deprecate.js');
22
22
  var MenuContext = require('./MenuContext.js');
23
- var environment = require('../../internal/environment.js');
23
+ require('../LayoutDirection/LayoutDirection.js');
24
24
  var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
25
+ var environment = require('../../internal/environment.js');
25
26
 
26
27
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
27
28
 
@@ -22,8 +22,9 @@ var useMergedRefs = require('../../internal/useMergedRefs.js');
22
22
  var usePrefix = require('../../internal/usePrefix.js');
23
23
  var Menu = require('./Menu.js');
24
24
  var MenuContext = require('./MenuContext.js');
25
- require('../Text/index.js');
25
+ require('../LayoutDirection/LayoutDirection.js');
26
26
  var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
27
+ require('../Text/index.js');
27
28
  var Text = require('../Text/Text.js');
28
29
 
29
30
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -32,7 +32,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
32
32
  */
33
33
  className?: string;
34
34
  /**
35
- * Specify an label for the close button of the modal; defaults to close
35
+ * Specify label for the close button of the modal; defaults to close
36
36
  */
37
37
  closeButtonLabel?: string;
38
38
  /**
@@ -25,6 +25,7 @@ var wrapFocus = require('../../internal/wrapFocus.js');
25
25
  var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
26
26
  var useId = require('../../internal/useId.js');
27
27
  var usePrefix = require('../../internal/usePrefix.js');
28
+ var usePreviousValue = require('../../internal/usePreviousValue.js');
28
29
  var keys = require('../../internal/keyboard/keys.js');
29
30
  var match = require('../../internal/keyboard/match.js');
30
31
  var index$2 = require('../IconButton/index.js');
@@ -89,6 +90,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
89
90
  const startTrap = React.useRef(null);
90
91
  const endTrap = React.useRef(null);
91
92
  const [isScrollable, setIsScrollable] = React.useState(false);
93
+ const prevOpen = usePreviousValue.usePreviousValue(open);
92
94
  const modalInstanceId = `modal-${useId.useId()}`;
93
95
  const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
94
96
  const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -211,14 +213,14 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
211
213
  }
212
214
  }, [open, prefix, enableDialogElement]);
213
215
  React.useEffect(() => {
214
- if (!enableDialogElement && !open && launcherButtonRef) {
216
+ if (!enableDialogElement && prevOpen && !open && launcherButtonRef) {
215
217
  setTimeout(() => {
216
218
  if ('current' in launcherButtonRef) {
217
219
  launcherButtonRef.current?.focus();
218
220
  }
219
221
  });
220
222
  }
221
- }, [open, launcherButtonRef, enableDialogElement]);
223
+ }, [open, prevOpen, launcherButtonRef, enableDialogElement]);
222
224
  React.useEffect(() => {
223
225
  if (!enableDialogElement) {
224
226
  const initialFocus = focusContainerElement => {
@@ -445,7 +447,7 @@ Modal.propTypes = {
445
447
  */
446
448
  className: PropTypes__default["default"].string,
447
449
  /**
448
- * Specify an label for the close button of the modal; defaults to close
450
+ * Specify label for the close button of the modal; defaults to close
449
451
  */
450
452
  closeButtonLabel: PropTypes__default["default"].string,
451
453
  /**
@@ -73,6 +73,10 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
73
73
  * The label for the slider.
74
74
  */
75
75
  labelText?: ReactNode;
76
+ /**
77
+ * Specify whether you want the underlying label to be visually hidden
78
+ */
79
+ hideLabel?: boolean;
76
80
  /**
77
81
  * @deprecated
78
82
  * `true` to use the light version.
@@ -215,6 +219,10 @@ declare class Slider extends PureComponent<SliderProps> {
215
219
  * The label for the slider.
216
220
  */
217
221
  labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
222
+ /**
223
+ * Specify whether you want the underlying label to be visually hidden
224
+ */
225
+ hideLabel: PropTypes.Requireable<boolean>;
218
226
  /**
219
227
  * `true` to use the light version.
220
228
  */
@@ -955,6 +955,7 @@ class Slider extends React.PureComponent {
955
955
  maxLabel = '',
956
956
  formatLabel = defaultFormatLabel,
957
957
  labelText,
958
+ hideLabel,
958
959
  step = 1,
959
960
  stepMultiplier: _stepMultiplier,
960
961
  inputType = 'number',
@@ -988,6 +989,7 @@ class Slider extends React.PureComponent {
988
989
  return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => {
989
990
  const labelId = `${id}-label`;
990
991
  const labelClasses = cx__default["default"](`${prefix}--label`, {
992
+ [`${prefix}--visually-hidden`]: hideLabel,
991
993
  [`${prefix}--label--disabled`]: disabled
992
994
  });
993
995
  const containerClasses = cx__default["default"](`${prefix}--slider-container`, {
@@ -1241,6 +1243,10 @@ _rollupPluginBabelHelpers.defineProperty(Slider, "propTypes", {
1241
1243
  * The label for the slider.
1242
1244
  */
1243
1245
  labelText: PropTypes__default["default"].node,
1246
+ /**
1247
+ * Specify whether you want the underlying label to be visually hidden
1248
+ */
1249
+ hideLabel: PropTypes__default["default"].bool,
1244
1250
  /**
1245
1251
  * `true` to use the light version.
1246
1252
  */
@@ -329,9 +329,12 @@ function TabList(_ref4) {
329
329
  });
330
330
  const tabs = React.useRef([]);
331
331
  const debouncedOnScroll = React.useCallback(() => {
332
- return debounce.debounce(event => {
333
- setScrollLeft(event.target.scrollLeft);
332
+ const updateScroll = debounce.debounce(() => {
333
+ if (ref.current) {
334
+ setScrollLeft(ref.current.scrollLeft);
335
+ }
334
336
  }, scrollDebounceWait);
337
+ updateScroll();
335
338
  }, [scrollDebounceWait]);
336
339
  function onKeyDown(event) {
337
340
  if (match.matches(event, [keys.ArrowRight, keys.ArrowLeft, keys.Home, keys.End])) {
@@ -20,6 +20,10 @@ export interface DismissibleTagBaseProps {
20
20
  * Specify if the `DismissibleTag` is disabled
21
21
  */
22
22
  disabled?: boolean;
23
+ /**
24
+ * Provide a custom tooltip label for the dismiss button
25
+ */
26
+ dismissTooltipLabel?: string;
23
27
  /**
24
28
  * Specify the id for the selectable tag.
25
29
  */
@@ -46,6 +46,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
46
46
  text,
47
47
  tagTitle,
48
48
  type,
49
+ dismissTooltipLabel = 'Dismiss tag',
49
50
  ...other
50
51
  } = _ref;
51
52
  const prefix = usePrefix.usePrefix();
@@ -79,7 +80,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
79
80
  onClick,
80
81
  ...otherProps
81
82
  } = other;
82
- const dismissLabel = `Dismiss "${text}"`;
83
+ const dismissActionLabel = isEllipsisApplied ? dismissTooltipLabel : title;
83
84
  return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
84
85
  ref: combinedRef,
85
86
  type: type,
@@ -96,7 +97,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
96
97
  }, text), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
97
98
  className: `${prefix}--tag__decorator`
98
99
  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
99
- label: isEllipsisApplied ? dismissLabel : title,
100
+ label: dismissActionLabel,
100
101
  align: "bottom",
101
102
  className: tooltipClasses,
102
103
  leaveDelayMs: 0,
@@ -106,7 +107,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
106
107
  className: `${prefix}--tag__close-icon`,
107
108
  onClick: handleClose,
108
109
  disabled: disabled,
109
- "aria-label": title
110
+ "aria-label": dismissActionLabel
110
111
  }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))))));
111
112
  });
112
113
  DismissibleTag.propTypes = {
@@ -122,6 +123,10 @@ DismissibleTag.propTypes = {
122
123
  * Specify if the `DismissibleTag` is disabled
123
124
  */
124
125
  disabled: PropTypes__default["default"].bool,
126
+ /**
127
+ * Provide a custom tooltip label for the dismiss button
128
+ */
129
+ dismissTooltipLabel: PropTypes__default["default"].string,
125
130
  /**
126
131
  * Specify the id for the tag.
127
132
  */
@@ -36,6 +36,10 @@ export interface SelectableTagBaseProps {
36
36
  * Specify the state of the selectable tag.
37
37
  */
38
38
  selected?: boolean;
39
+ /**
40
+ * Specify the default state of the selectable tag.
41
+ */
42
+ defaultSelected?: boolean;
39
43
  /**
40
44
  * Specify the size of the Tag. Currently supports either `sm`,
41
45
  * `md` (default) or `lg` sizes.
@@ -21,6 +21,7 @@ var Tooltip = require('../Tooltip/Tooltip.js');
21
21
  require('../Text/index.js');
22
22
  var isEllipsisActive = require('./isEllipsisActive.js');
23
23
  var mergeRefs = require('../../tools/mergeRefs.js');
24
+ var useControllableState = require('../../internal/useControllableState.js');
24
25
  var Text = require('../Text/Text.js');
25
26
 
26
27
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -37,15 +38,20 @@ const SelectableTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
37
38
  renderIcon,
38
39
  onChange,
39
40
  onClick,
40
- selected = false,
41
+ selected,
41
42
  size,
42
43
  text,
44
+ defaultSelected = false,
43
45
  ...other
44
46
  } = _ref;
45
47
  const prefix = usePrefix.usePrefix();
46
48
  const tagRef = React.useRef(null);
47
49
  const tagId = id || `tag-${useId.useId()}`;
48
- const [selectedTag, setSelectedTag] = React.useState(selected);
50
+ const [selectedTag, setSelectedTag] = useControllableState.useControllableState({
51
+ value: selected,
52
+ onChange: onChange,
53
+ defaultValue: defaultSelected
54
+ });
49
55
  const tagClasses = cx__default["default"](`${prefix}--tag--selectable`, className, {
50
56
  [`${prefix}--tag--selectable-selected`]: selectedTag
51
57
  });
@@ -58,7 +64,6 @@ const SelectableTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
58
64
  const combinedRef = mergeRefs["default"](tagRef, forwardRef);
59
65
  const handleClick = e => {
60
66
  setSelectedTag(!selectedTag);
61
- onChange?.(!selectedTag);
62
67
  onClick?.(e);
63
68
  };
64
69
  if (isEllipsisApplied) {
@@ -125,6 +130,10 @@ SelectableTag.propTypes = {
125
130
  * Specify the state of the selectable tag.
126
131
  */
127
132
  selected: PropTypes__default["default"].bool,
133
+ /**
134
+ * Specify the default state of the selectable tag.
135
+ */
136
+ defaultSelected: PropTypes__default["default"].bool,
128
137
  /**
129
138
  * Specify the size of the Tag. Currently supports either `sm`,
130
139
  * `md` (default) or `lg` sizes.
@@ -16,7 +16,7 @@ var usePrefix = require('../../internal/usePrefix.js');
16
16
  var useMergedRefs = require('../../internal/useMergedRefs.js');
17
17
  var PropTypes = require('prop-types');
18
18
  var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
19
- var getDisplayName = require('../../prop-types/tools/getDisplayName.js');
19
+ var SwitcherItem = require('./SwitcherItem.js');
20
20
 
21
21
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
22
22
 
@@ -48,7 +48,7 @@ const Switcher = /*#__PURE__*/React.forwardRef(function Switcher(props, forwardR
48
48
  direction
49
49
  } = _ref;
50
50
  const enabledIndices = React__default["default"].Children.toArray(children).reduce((acc, curr, i) => {
51
- if (/*#__PURE__*/React__default["default"].isValidElement(curr) && Object.keys(curr.props).length !== 0 && getDisplayName["default"](curr.type) === 'SwitcherItem') {
51
+ if (/*#__PURE__*/React__default["default"].isValidElement(curr) && Object.keys(curr.props).length !== 0 && curr.type === SwitcherItem["default"]) {
52
52
  acc.push(i);
53
53
  }
54
54
  return acc;
@@ -76,7 +76,7 @@ const Switcher = /*#__PURE__*/React.forwardRef(function Switcher(props, forwardR
76
76
  };
77
77
  const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => {
78
78
  // only setup click handlers if onChange event is passed
79
- if (/*#__PURE__*/React__default["default"].isValidElement(child) && child.type && getDisplayName["default"](child.type) === 'SwitcherItem') {
79
+ if (/*#__PURE__*/React__default["default"].isValidElement(child) && child.type === SwitcherItem["default"]) {
80
80
  return /*#__PURE__*/React__default["default"].cloneElement(child, {
81
81
  handleSwitcherItemFocus,
82
82
  index,
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ export {};
package/lib/index.js CHANGED
@@ -195,6 +195,8 @@ var index$f = require('./components/Heading/index.js');
195
195
  var index$g = require('./components/IconButton/index.js');
196
196
  var index$h = require('./components/Layer/index.js');
197
197
  var index$2 = require('./components/Layout/index.js');
198
+ var LayoutDirection = require('./components/LayoutDirection/LayoutDirection.js');
199
+ var useLayoutDirection = require('./components/LayoutDirection/useLayoutDirection.js');
198
200
  var index$3 = require('./components/OverflowMenuV2/index.js');
199
201
  var index$i = require('./components/Popover/index.js');
200
202
  var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
@@ -217,8 +219,6 @@ var Pagination = require('./components/Pagination/experimental/Pagination.js');
217
219
  var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
218
220
  var ContainedList = require('./components/ContainedList/ContainedList.js');
219
221
  var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
220
- var LayoutDirection = require('./components/LayoutDirection/LayoutDirection.js');
221
- var useLayoutDirection = require('./components/LayoutDirection/useLayoutDirection.js');
222
222
  var Text = require('./components/Text/Text.js');
223
223
  var TextDirection = require('./components/Text/TextDirection.js');
224
224
  var DataTable = require('./components/DataTable/DataTable.js');
@@ -474,6 +474,8 @@ exports.IconButtonKinds = index$g.IconButtonKinds;
474
474
  exports.Layer = index$h.Layer;
475
475
  exports.useLayer = index$h.useLayer;
476
476
  exports.unstable_Layout = index$2.Layout;
477
+ exports.unstable_LayoutDirection = LayoutDirection.LayoutDirection;
478
+ exports.unstable_useLayoutDirection = useLayoutDirection.useLayoutDirection;
477
479
  exports.unstable_OverflowMenuV2 = index$3.OverflowMenuV2;
478
480
  exports.Popover = index$i.Popover;
479
481
  exports.PopoverContent = index$i.PopoverContent;
@@ -509,8 +511,6 @@ exports.unstable_Pagination = Pagination["default"];
509
511
  exports.ContainedListItem = ContainedListItem["default"];
510
512
  exports.ContainedList = ContainedList["default"];
511
513
  exports.SliderSkeleton = Slider_Skeleton["default"];
512
- exports.unstable_LayoutDirection = LayoutDirection.LayoutDirection;
513
- exports.unstable_useLayoutDirection = useLayoutDirection.useLayoutDirection;
514
514
  exports.unstable_Text = Text.Text;
515
515
  exports.unstable_TextDirection = TextDirection.TextDirection;
516
516
  exports.DataTable = DataTable["default"];
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright IBM Corp. 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { debounce } from 'es-toolkit/compat';
8
+ export default debounce;
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /**
8
+ * Indicate whether current execution environment can access the DOM.
9
+ *
10
+ * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
11
+ */
12
+ export declare const canUseDOM: boolean;
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Copyright IBM Corp. 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /**
8
+ * Stores the previous value of a given input.
9
+ *
10
+ * @param value - The current value.
11
+ * @returns The value before the current render.
12
+ *
13
+ * @example
14
+ * const [count, setCount] = useState(0);
15
+ * const prevCount = usePreviousValue(count);
16
+ */
17
+ export declare const usePreviousValue: <T>(value: T) => T | undefined;
@@ -0,0 +1,32 @@
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
+
8
+ 'use strict';
9
+
10
+ Object.defineProperty(exports, '__esModule', { value: true });
11
+
12
+ var React = require('react');
13
+
14
+ /**
15
+ * Stores the previous value of a given input.
16
+ *
17
+ * @param value - The current value.
18
+ * @returns The value before the current render.
19
+ *
20
+ * @example
21
+ * const [count, setCount] = useState(0);
22
+ * const prevCount = usePreviousValue(count);
23
+ */
24
+ const usePreviousValue = value => {
25
+ const ref = React.useRef(undefined);
26
+ React.useEffect(() => {
27
+ ref.current = value;
28
+ }, [value]);
29
+ return ref.current;
30
+ };
31
+
32
+ exports.usePreviousValue = usePreviousValue;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import PropTypes from 'prop-types';
8
+ export declare const AriaLabelPropType: PropTypes.ValidationMap<any>;
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.82.1",
4
+ "version": "1.83.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "types": "lib/index.d.ts",
@@ -55,8 +55,8 @@
55
55
  "@carbon/feature-flags": "^0.26.0",
56
56
  "@carbon/icons-react": "^11.60.0",
57
57
  "@carbon/layout": "^11.34.0",
58
- "@carbon/styles": "^1.81.0",
59
- "@carbon/utilities": "^0.5.1",
58
+ "@carbon/styles": "^1.82.0-rc.0",
59
+ "@carbon/utilities": "^0.6.0-rc.0",
60
60
  "@floating-ui/react": "^0.27.4",
61
61
  "@ibm/telemetry-js": "^1.5.0",
62
62
  "classnames": "2.5.1",
@@ -147,5 +147,5 @@
147
147
  "**/*.scss",
148
148
  "**/*.css"
149
149
  ],
150
- "gitHead": "b57fe786d9a3086249c70a5bb50a835d795cb876"
150
+ "gitHead": "184bbaf4d986f623be415b47b933c56b19655774"
151
151
  }
package/telemetry.yml CHANGED
@@ -322,6 +322,7 @@ collect:
322
322
  # Dialog
323
323
  - modal
324
324
  # DismissibleTag
325
+ - dismissTooltipLabel
325
326
  - tagTitle
326
327
  # ErrorBoundary
327
328
  - fallback