@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
@@ -0,0 +1,9 @@
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 { AccordionItem } from '../Accordion';
8
+ export default AccordionItem;
9
+ export { AccordionItem };
@@ -23,7 +23,7 @@ export type CalRef = {
23
23
  export interface DatePickerProps {
24
24
  /**
25
25
  * Flatpickr prop passthrough enables direct date input, and when set to false,
26
- * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
26
+ * we must clear dates manually by resetting the value prop to to a falsy value (such as `""`, `null`, or `undefined`) or an array of all falsy values, making it a controlled input.
27
27
  */
28
28
  allowInput?: boolean;
29
29
  /**
@@ -509,8 +509,11 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
509
509
  }
510
510
  }, [inline]);
511
511
  useEffect(() => {
512
- //when value prop is set to empty, this clears the flatpicker's calendar instance and text input
513
- if (value === '') {
512
+ // when value prop is manually reset, this clears the flatpickr calendar instance and text input
513
+ // run if both:
514
+ // 1. value prop is set to a falsy value (`""`, `undefined`, `null`, etc) OR an array of all falsy values
515
+ // 2. flatpickr instance contains values in its `selectedDates` property so it hasn't already been cleared
516
+ if ((!value || Array.isArray(value) && value.every(date => !date)) && calendarRef.current?.selectedDates.length) {
514
517
  calendarRef.current?.clear();
515
518
  if (startInputField.current) {
516
519
  startInputField.current.value = '';
@@ -593,7 +596,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
593
596
  DatePicker.propTypes = {
594
597
  /**
595
598
  * Flatpickr prop passthrough enables direct date input, and when set to false,
596
- * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
599
+ * 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.
597
600
  */
598
601
  allowInput: PropTypes.bool,
599
602
  /**
@@ -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
  */
@@ -11,11 +11,12 @@ import PropTypes from 'prop-types';
11
11
  import React__default, { useState, useRef } from 'react';
12
12
  import { Enter, Space } from '../../internal/keyboard/keys.js';
13
13
  import { matches } from '../../internal/keyboard/match.js';
14
- import { ButtonKinds } from '../../prop-types/types.js';
15
14
  import { uniqueId } from '../../tools/uniqueId.js';
16
15
  import { usePrefix } from '../../internal/usePrefix.js';
17
16
  import deprecate from '../../prop-types/deprecate.js';
18
17
  import { noopFn } from '../../internal/noopFn.js';
18
+ import { ButtonKinds } from '../Button/Button.js';
19
+ import '../Button/Button.Skeleton.js';
19
20
 
20
21
  function FileUploaderButton(_ref) {
21
22
  let {
@@ -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
  /**
@@ -77,28 +77,28 @@ Column.propTypes = {
77
77
  * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
78
78
  * This breakpoint supports 16 columns by default.
79
79
  *
80
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
80
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
81
81
  */
82
82
  lg: spanPropType,
83
83
  /**
84
84
  * Specify column span for the `max` breakpoint. This breakpoint supports 16
85
85
  * columns by default.
86
86
  *
87
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
87
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
88
88
  */
89
89
  max: spanPropType,
90
90
  /**
91
91
  * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
92
92
  * This breakpoint supports 8 columns by default.
93
93
  *
94
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
94
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
95
95
  */
96
96
  md: spanPropType,
97
97
  /**
98
98
  * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
99
99
  * This breakpoint supports 4 columns by default.
100
100
  *
101
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
101
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
102
102
  */
103
103
  sm: spanPropType,
104
104
  /**
@@ -110,7 +110,7 @@ Column.propTypes = {
110
110
  * Specify column span for the `xlg` breakpoint (Default breakpoint up to
111
111
  * 1584px) This breakpoint supports 16 columns by default.
112
112
  *
113
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
113
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
114
114
  */
115
115
  xlg: spanPropType
116
116
  };
@@ -154,28 +154,28 @@ CSSGridColumn.propTypes = {
154
154
  * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
155
155
  * This breakpoint supports 16 columns by default.
156
156
  *
157
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
157
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
158
158
  */
159
159
  lg: spanPropType,
160
160
  /**
161
161
  * Specify column span for the `max` breakpoint. This breakpoint supports 16
162
162
  * columns by default.
163
163
  *
164
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
164
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
165
165
  */
166
166
  max: spanPropType,
167
167
  /**
168
168
  * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
169
169
  * This breakpoint supports 8 columns by default.
170
170
  *
171
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
171
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
172
172
  */
173
173
  md: spanPropType,
174
174
  /**
175
175
  * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
176
176
  * This breakpoint supports 4 columns by default.
177
177
  *
178
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
178
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
179
179
  */
180
180
  sm: spanPropType,
181
181
  /**
@@ -191,7 +191,7 @@ CSSGridColumn.propTypes = {
191
191
  * Specify column span for the `xlg` breakpoint (Default breakpoint up to
192
192
  * 1584px) This breakpoint supports 16 columns by default.
193
193
  *
194
- * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
194
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
195
195
  */
196
196
  xlg: spanPropType
197
197
  };
@@ -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';
@@ -16,8 +16,9 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
16
16
  import { usePrefix } from '../../internal/usePrefix.js';
17
17
  import deprecate from '../../prop-types/deprecate.js';
18
18
  import { MenuContext, menuReducer } from './MenuContext.js';
19
- import { canUseDOM } from '../../internal/environment.js';
19
+ import '../LayoutDirection/LayoutDirection.js';
20
20
  import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
21
+ import { canUseDOM } from '../../internal/environment.js';
21
22
 
22
23
  const spacing = 8; // distance to keep to window edges, in px
23
24
 
@@ -18,8 +18,9 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
18
18
  import { usePrefix } from '../../internal/usePrefix.js';
19
19
  import { Menu } from './Menu.js';
20
20
  import { MenuContext } from './MenuContext.js';
21
- import '../Text/index.js';
21
+ import '../LayoutDirection/LayoutDirection.js';
22
22
  import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
23
+ import '../Text/index.js';
23
24
  import { Text } from '../Text/Text.js';
24
25
 
25
26
  var _Checkmark, _CaretLeft, _CaretRight;
@@ -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
  /**
@@ -21,6 +21,7 @@ import { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu, wrapFocus } f
21
21
  import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
22
22
  import { useId } from '../../internal/useId.js';
23
23
  import { usePrefix } from '../../internal/usePrefix.js';
24
+ import { usePreviousValue } from '../../internal/usePreviousValue.js';
24
25
  import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
25
26
  import { match } from '../../internal/keyboard/match.js';
26
27
  import { IconButton } from '../IconButton/index.js';
@@ -79,6 +80,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
79
80
  const startTrap = useRef(null);
80
81
  const endTrap = useRef(null);
81
82
  const [isScrollable, setIsScrollable] = useState(false);
83
+ const prevOpen = usePreviousValue(open);
82
84
  const modalInstanceId = `modal-${useId()}`;
83
85
  const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
84
86
  const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -201,14 +203,14 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
201
203
  }
202
204
  }, [open, prefix, enableDialogElement]);
203
205
  useEffect(() => {
204
- if (!enableDialogElement && !open && launcherButtonRef) {
206
+ if (!enableDialogElement && prevOpen && !open && launcherButtonRef) {
205
207
  setTimeout(() => {
206
208
  if ('current' in launcherButtonRef) {
207
209
  launcherButtonRef.current?.focus();
208
210
  }
209
211
  });
210
212
  }
211
- }, [open, launcherButtonRef, enableDialogElement]);
213
+ }, [open, prevOpen, launcherButtonRef, enableDialogElement]);
212
214
  useEffect(() => {
213
215
  if (!enableDialogElement) {
214
216
  const initialFocus = focusContainerElement => {
@@ -435,7 +437,7 @@ Modal.propTypes = {
435
437
  */
436
438
  className: PropTypes.string,
437
439
  /**
438
- * Specify an label for the close button of the modal; defaults to close
440
+ * Specify label for the close button of the modal; defaults to close
439
441
  */
440
442
  closeButtonLabel: PropTypes.string,
441
443
  /**
@@ -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
  */
@@ -945,6 +945,7 @@ class Slider extends PureComponent {
945
945
  maxLabel = '',
946
946
  formatLabel = defaultFormatLabel,
947
947
  labelText,
948
+ hideLabel,
948
949
  step = 1,
949
950
  stepMultiplier: _stepMultiplier,
950
951
  inputType = 'number',
@@ -978,6 +979,7 @@ class Slider extends PureComponent {
978
979
  return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => {
979
980
  const labelId = `${id}-label`;
980
981
  const labelClasses = cx(`${prefix}--label`, {
982
+ [`${prefix}--visually-hidden`]: hideLabel,
981
983
  [`${prefix}--label--disabled`]: disabled
982
984
  });
983
985
  const containerClasses = cx(`${prefix}--slider-container`, {
@@ -1231,6 +1233,10 @@ _defineProperty(Slider, "propTypes", {
1231
1233
  * The label for the slider.
1232
1234
  */
1233
1235
  labelText: PropTypes.node,
1236
+ /**
1237
+ * Specify whether you want the underlying label to be visually hidden
1238
+ */
1239
+ hideLabel: PropTypes.bool,
1234
1240
  /**
1235
1241
  * `true` to use the light version.
1236
1242
  */
@@ -319,9 +319,12 @@ function TabList(_ref4) {
319
319
  });
320
320
  const tabs = useRef([]);
321
321
  const debouncedOnScroll = useCallback(() => {
322
- return debounce(event => {
323
- setScrollLeft(event.target.scrollLeft);
322
+ const updateScroll = debounce(() => {
323
+ if (ref.current) {
324
+ setScrollLeft(ref.current.scrollLeft);
325
+ }
324
326
  }, scrollDebounceWait);
327
+ updateScroll();
325
328
  }, [scrollDebounceWait]);
326
329
  function onKeyDown(event) {
327
330
  if (matches(event, [ArrowRight, ArrowLeft, Home, 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
  */
@@ -36,6 +36,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
36
36
  text,
37
37
  tagTitle,
38
38
  type,
39
+ dismissTooltipLabel = 'Dismiss tag',
39
40
  ...other
40
41
  } = _ref;
41
42
  const prefix = usePrefix();
@@ -69,7 +70,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
69
70
  onClick,
70
71
  ...otherProps
71
72
  } = other;
72
- const dismissLabel = `Dismiss "${text}"`;
73
+ const dismissActionLabel = isEllipsisApplied ? dismissTooltipLabel : title;
73
74
  return /*#__PURE__*/React__default.createElement(Tag, _extends({
74
75
  ref: combinedRef,
75
76
  type: type,
@@ -86,7 +87,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
86
87
  }, text), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
87
88
  className: `${prefix}--tag__decorator`
88
89
  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement(Tooltip, {
89
- label: isEllipsisApplied ? dismissLabel : title,
90
+ label: dismissActionLabel,
90
91
  align: "bottom",
91
92
  className: tooltipClasses,
92
93
  leaveDelayMs: 0,
@@ -96,7 +97,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
96
97
  className: `${prefix}--tag__close-icon`,
97
98
  onClick: handleClose,
98
99
  disabled: disabled,
99
- "aria-label": title
100
+ "aria-label": dismissActionLabel
100
101
  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))))));
101
102
  });
102
103
  DismissibleTag.propTypes = {
@@ -112,6 +113,10 @@ DismissibleTag.propTypes = {
112
113
  * Specify if the `DismissibleTag` is disabled
113
114
  */
114
115
  disabled: PropTypes.bool,
116
+ /**
117
+ * Provide a custom tooltip label for the dismiss button
118
+ */
119
+ dismissTooltipLabel: PropTypes.string,
115
120
  /**
116
121
  * Specify the id for the tag.
117
122
  */
@@ -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.
@@ -17,6 +17,7 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
17
17
  import '../Text/index.js';
18
18
  import { isEllipsisActive } from './isEllipsisActive.js';
19
19
  import mergeRefs from '../../tools/mergeRefs.js';
20
+ import { useControllableState } from '../../internal/useControllableState.js';
20
21
  import { Text } from '../Text/Text.js';
21
22
 
22
23
  const SelectableTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
@@ -27,15 +28,20 @@ const SelectableTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
27
28
  renderIcon,
28
29
  onChange,
29
30
  onClick,
30
- selected = false,
31
+ selected,
31
32
  size,
32
33
  text,
34
+ defaultSelected = false,
33
35
  ...other
34
36
  } = _ref;
35
37
  const prefix = usePrefix();
36
38
  const tagRef = useRef(null);
37
39
  const tagId = id || `tag-${useId()}`;
38
- const [selectedTag, setSelectedTag] = useState(selected);
40
+ const [selectedTag, setSelectedTag] = useControllableState({
41
+ value: selected,
42
+ onChange: onChange,
43
+ defaultValue: defaultSelected
44
+ });
39
45
  const tagClasses = cx(`${prefix}--tag--selectable`, className, {
40
46
  [`${prefix}--tag--selectable-selected`]: selectedTag
41
47
  });
@@ -48,7 +54,6 @@ const SelectableTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
48
54
  const combinedRef = mergeRefs(tagRef, forwardRef);
49
55
  const handleClick = e => {
50
56
  setSelectedTag(!selectedTag);
51
- onChange?.(!selectedTag);
52
57
  onClick?.(e);
53
58
  };
54
59
  if (isEllipsisApplied) {
@@ -115,6 +120,10 @@ SelectableTag.propTypes = {
115
120
  * Specify the state of the selectable tag.
116
121
  */
117
122
  selected: PropTypes.bool,
123
+ /**
124
+ * Specify the default state of the selectable tag.
125
+ */
126
+ defaultSelected: PropTypes.bool,
118
127
  /**
119
128
  * Specify the size of the Tag. Currently supports either `sm`,
120
129
  * `md` (default) or `lg` sizes.
@@ -12,7 +12,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
12
12
  import { useMergedRefs } from '../../internal/useMergedRefs.js';
13
13
  import PropTypes from 'prop-types';
14
14
  import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
15
- import getDisplayName from '../../prop-types/tools/getDisplayName.js';
15
+ import SwitcherItem from './SwitcherItem.js';
16
16
 
17
17
  const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
18
18
  const switcherRef = useRef(null);
@@ -38,7 +38,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
38
38
  direction
39
39
  } = _ref;
40
40
  const enabledIndices = React__default.Children.toArray(children).reduce((acc, curr, i) => {
41
- if (/*#__PURE__*/React__default.isValidElement(curr) && Object.keys(curr.props).length !== 0 && getDisplayName(curr.type) === 'SwitcherItem') {
41
+ if (/*#__PURE__*/React__default.isValidElement(curr) && Object.keys(curr.props).length !== 0 && curr.type === SwitcherItem) {
42
42
  acc.push(i);
43
43
  }
44
44
  return acc;
@@ -66,7 +66,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
66
66
  };
67
67
  const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
68
68
  // only setup click handlers if onChange event is passed
69
- if (/*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'SwitcherItem') {
69
+ if (/*#__PURE__*/React__default.isValidElement(child) && child.type === SwitcherItem) {
70
70
  return /*#__PURE__*/React__default.cloneElement(child, {
71
71
  handleSwitcherItemFocus,
72
72
  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/es/index.js CHANGED
@@ -192,6 +192,8 @@ export { Heading, Section } from './components/Heading/index.js';
192
192
  export { IconButton, IconButtonKinds } from './components/IconButton/index.js';
193
193
  export { Layer, useLayer } from './components/Layer/index.js';
194
194
  export { Layout as unstable_Layout } from './components/Layout/index.js';
195
+ export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
196
+ export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
195
197
  export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2/index.js';
196
198
  export { Popover, PopoverContent } from './components/Popover/index.js';
197
199
  export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
@@ -214,8 +216,6 @@ export { default as unstable_Pagination } from './components/Pagination/experime
214
216
  export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
215
217
  export { default as ContainedList } from './components/ContainedList/ContainedList.js';
216
218
  export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
217
- export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
218
- export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
219
219
  export { Text as unstable_Text } from './components/Text/Text.js';
220
220
  export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';
221
221
  export { default as DataTable } from './components/DataTable/DataTable.js';
@@ -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;
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import React__default, { useLayoutEffect, useEffect, useState } from 'react';
8
+ import React__default, { useState, useEffect, useLayoutEffect } from 'react';
9
9
  import { setupGetInstanceId } from '../tools/setupGetInstanceId.js';
10
10
  import { canUseDOM } from './environment.js';
11
11
  import { useIdPrefix } from './useIdPrefix.js';
@@ -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,28 @@
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
+ import { useRef, useEffect } from 'react';
9
+
10
+ /**
11
+ * Stores the previous value of a given input.
12
+ *
13
+ * @param value - The current value.
14
+ * @returns The value before the current render.
15
+ *
16
+ * @example
17
+ * const [count, setCount] = useState(0);
18
+ * const prevCount = usePreviousValue(count);
19
+ */
20
+ const usePreviousValue = value => {
21
+ const ref = useRef(undefined);
22
+ useEffect(() => {
23
+ ref.current = value;
24
+ }, [value]);
25
+ return ref.current;
26
+ };
27
+
28
+ export { 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>;
@@ -0,0 +1,9 @@
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 { AccordionItem } from '../Accordion';
8
+ export default AccordionItem;
9
+ export { AccordionItem };
@@ -23,7 +23,7 @@ export type CalRef = {
23
23
  export interface DatePickerProps {
24
24
  /**
25
25
  * Flatpickr prop passthrough enables direct date input, and when set to false,
26
- * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
26
+ * we must clear dates manually by resetting the value prop to to a falsy value (such as `""`, `null`, or `undefined`) or an array of all falsy values, making it a controlled input.
27
27
  */
28
28
  allowInput?: boolean;
29
29
  /**