@carbon/react 1.82.0 → 1.83.0-rc.0

package/es/components/AccordionItem/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { AccordionItem } from '../Accordion';
+export default AccordionItem;
+export { AccordionItem };

package/es/components/DatePicker/DatePicker.d.ts

@@ -23,7 +23,7 @@ export type CalRef = {
 export interface DatePickerProps {
     /**
      * Flatpickr prop passthrough enables direct date input, and when set to false,
-     * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
+     * 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.
      */
     allowInput?: boolean;
     /**

package/es/components/DatePicker/DatePicker.js

@@ -509,8 +509,11 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }, [inline]);
   useEffect(() => {
-    //when value prop is set to empty, this clears the flatpicker's calendar instance and text input
-    if (value === '') {
+    // when value prop is manually reset, this clears the flatpickr calendar instance and text input
+    // run if both:
+    // 1. value prop is set to a falsy value (`""`, `undefined`, `null`, etc) OR an array of all falsy values
+    // 2. flatpickr instance contains values in its `selectedDates` property so it hasn't already been cleared
+    if ((!value || Array.isArray(value) && value.every(date => !date)) && calendarRef.current?.selectedDates.length) {
       calendarRef.current?.clear();
       if (startInputField.current) {
         startInputField.current.value = '';
@@ -593,7 +596,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
 DatePicker.propTypes = {
   /**
    * Flatpickr prop passthrough enables direct date input, and when set to false,
-   * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
+   * 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.
    */
   allowInput: PropTypes.bool,
   /**

package/es/components/FileUploader/FileUploaderButton.d.ts

@@ -81,7 +81,7 @@ declare namespace FileUploaderButton {
         /**
          * Specify the type of underlying button
          */
-        buttonKind: PropTypes.Requireable<string>;
+        buttonKind: PropTypes.Requireable<"primary" | "secondary" | "danger" | "ghost" | "danger--primary" | "danger--ghost" | "danger--tertiary" | "tertiary">;
         /**
          * Provide a custom className to be applied to the container node
          */

package/es/components/FileUploader/FileUploaderButton.js

@@ -11,11 +11,12 @@ import PropTypes from 'prop-types';
 import React__default, { useState, useRef } from 'react';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
-import { ButtonKinds } from '../../prop-types/types.js';
 import { uniqueId } from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
+import { ButtonKinds } from '../Button/Button.js';
+import '../Button/Button.Skeleton.js';
 
 function FileUploaderButton(_ref) {
   let {

package/es/components/Grid/Column.d.ts

@@ -28,35 +28,35 @@ export interface ColumnBaseProps {
      * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
      * This breakpoint supports 16 columns by default.
      *
-     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
      */
     lg?: ColumnSpan;
     /**
      * Specify column span for the `max` breakpoint. This breakpoint supports 16
      * columns by default.
      *
-     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
      */
     max?: ColumnSpan;
     /**
      * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
      * This breakpoint supports 8 columns by default.
      *
-     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
      */
     md?: ColumnSpan;
     /**
      * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
      * This breakpoint supports 4 columns by default.
      *
-     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
      */
     sm?: ColumnSpan;
     /**
      * Specify column span for the `xlg` breakpoint (Default breakpoint up to
      * 1584px) This breakpoint supports 16 columns by default.
      *
-     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
      */
     xlg?: ColumnSpan;
     /**

package/es/components/Grid/Column.js

@@ -77,28 +77,28 @@ Column.propTypes = {
    * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
    * This breakpoint supports 16 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   lg: spanPropType,
   /**
    * Specify column span for the `max` breakpoint. This breakpoint supports 16
    * columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   max: spanPropType,
   /**
    * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
    * This breakpoint supports 8 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   md: spanPropType,
   /**
    * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
    * This breakpoint supports 4 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   sm: spanPropType,
   /**
@@ -110,7 +110,7 @@ Column.propTypes = {
    * Specify column span for the `xlg` breakpoint (Default breakpoint up to
    * 1584px) This breakpoint supports 16 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   xlg: spanPropType
 };
@@ -154,28 +154,28 @@ CSSGridColumn.propTypes = {
    * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
    * This breakpoint supports 16 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   lg: spanPropType,
   /**
    * Specify column span for the `max` breakpoint. This breakpoint supports 16
    * columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   max: spanPropType,
   /**
    * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
    * This breakpoint supports 8 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   md: spanPropType,
   /**
    * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
    * This breakpoint supports 4 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   sm: spanPropType,
   /**
@@ -191,7 +191,7 @@ CSSGridColumn.propTypes = {
    * Specify column span for the `xlg` breakpoint (Default breakpoint up to
    * 1584px) This breakpoint supports 16 columns by default.
    *
-   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
    */
   xlg: spanPropType
 };

package/es/components/LayoutDirection/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { LayoutDirection } from './LayoutDirection';
+export { useLayoutDirection } from './useLayoutDirection';

package/es/components/Menu/Menu.js

@@ -16,8 +16,9 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { MenuContext, menuReducer } from './MenuContext.js';
-import { canUseDOM } from '../../internal/environment.js';
+import '../LayoutDirection/LayoutDirection.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
+import { canUseDOM } from '../../internal/environment.js';
 
 const spacing = 8; // distance to keep to window edges, in px
 

package/es/components/Menu/MenuItem.js

@@ -18,8 +18,9 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Menu } from './Menu.js';
 import { MenuContext } from './MenuContext.js';
-import '../Text/index.js';
+import '../LayoutDirection/LayoutDirection.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
+import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
 var _Checkmark, _CaretLeft, _CaretRight;

package/es/components/Modal/Modal.d.ts

@@ -32,7 +32,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      */
     className?: string;
     /**
-     * Specify an label for the close button of the modal; defaults to close
+     * Specify label for the close button of the modal; defaults to close
      */
     closeButtonLabel?: string;
     /**

package/es/components/Modal/Modal.js

@@ -21,6 +21,7 @@ import { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu, wrapFocus } f
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { usePreviousValue } from '../../internal/usePreviousValue.js';
 import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { IconButton } from '../IconButton/index.js';
@@ -79,6 +80,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const startTrap = useRef(null);
   const endTrap = useRef(null);
   const [isScrollable, setIsScrollable] = useState(false);
+  const prevOpen = usePreviousValue(open);
   const modalInstanceId = `modal-${useId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -201,14 +203,14 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     }
   }, [open, prefix, enableDialogElement]);
   useEffect(() => {
-    if (!enableDialogElement && !open && launcherButtonRef) {
+    if (!enableDialogElement && prevOpen && !open && launcherButtonRef) {
       setTimeout(() => {
         if ('current' in launcherButtonRef) {
           launcherButtonRef.current?.focus();
         }
       });
     }
-  }, [open, launcherButtonRef, enableDialogElement]);
+  }, [open, prevOpen, launcherButtonRef, enableDialogElement]);
   useEffect(() => {
     if (!enableDialogElement) {
       const initialFocus = focusContainerElement => {
@@ -435,7 +437,7 @@ Modal.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Specify an label for the close button of the modal; defaults to close
+   * Specify label for the close button of the modal; defaults to close
    */
   closeButtonLabel: PropTypes.string,
   /**

package/es/components/Slider/Slider.d.ts

@@ -73,6 +73,10 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      * The label for the slider.
      */
     labelText?: ReactNode;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
     /**
      * @deprecated
      * `true` to use the light version.
@@ -215,6 +219,10 @@ declare class Slider extends PureComponent<SliderProps> {
          * The label for the slider.
          */
         labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify whether you want the underlying label to be visually hidden
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
         /**
          * `true` to use the light version.
          */

package/es/components/Slider/Slider.js

@@ -945,6 +945,7 @@ class Slider extends PureComponent {
       maxLabel = '',
       formatLabel = defaultFormatLabel,
       labelText,
+      hideLabel,
       step = 1,
       stepMultiplier: _stepMultiplier,
       inputType = 'number',
@@ -978,6 +979,7 @@ class Slider extends PureComponent {
     return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => {
       const labelId = `${id}-label`;
       const labelClasses = cx(`${prefix}--label`, {
+        [`${prefix}--visually-hidden`]: hideLabel,
         [`${prefix}--label--disabled`]: disabled
       });
       const containerClasses = cx(`${prefix}--slider-container`, {
@@ -1231,6 +1233,10 @@ _defineProperty(Slider, "propTypes", {
    * The label for the slider.
    */
   labelText: PropTypes.node,
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes.bool,
   /**
    * `true` to use the light version.
    */

package/es/components/Tabs/Tabs.js

@@ -319,9 +319,12 @@ function TabList(_ref4) {
   });
   const tabs = useRef([]);
   const debouncedOnScroll = useCallback(() => {
-    return debounce(event => {
-      setScrollLeft(event.target.scrollLeft);
+    const updateScroll = debounce(() => {
+      if (ref.current) {
+        setScrollLeft(ref.current.scrollLeft);
+      }
     }, scrollDebounceWait);
+    updateScroll();
   }, [scrollDebounceWait]);
   function onKeyDown(event) {
     if (matches(event, [ArrowRight, ArrowLeft, Home, End])) {

package/es/components/Tag/DismissibleTag.d.ts

@@ -20,6 +20,10 @@ export interface DismissibleTagBaseProps {
      * Specify if the `DismissibleTag` is disabled
      */
     disabled?: boolean;
+    /**
+     * Provide a custom tooltip label for the dismiss button
+     */
+    dismissTooltipLabel?: string;
     /**
      * Specify the id for the selectable tag.
      */

package/es/components/Tag/DismissibleTag.js

@@ -36,6 +36,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
     text,
     tagTitle,
     type,
+    dismissTooltipLabel = 'Dismiss tag',
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -69,7 +70,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
     onClick,
     ...otherProps
   } = other;
-  const dismissLabel = `Dismiss "${text}"`;
+  const dismissActionLabel = isEllipsisApplied ? dismissTooltipLabel : title;
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
     ref: combinedRef,
     type: type,
@@ -86,7 +87,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
   }, text), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tag__decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement(Tooltip, {
-    label: isEllipsisApplied ? dismissLabel : title,
+    label: dismissActionLabel,
     align: "bottom",
     className: tooltipClasses,
     leaveDelayMs: 0,
@@ -96,7 +97,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
     className: `${prefix}--tag__close-icon`,
     onClick: handleClose,
     disabled: disabled,
-    "aria-label": title
+    "aria-label": dismissActionLabel
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))))));
 });
 DismissibleTag.propTypes = {
@@ -112,6 +113,10 @@ DismissibleTag.propTypes = {
    * Specify if the `DismissibleTag` is disabled
    */
   disabled: PropTypes.bool,
+  /**
+   * Provide a custom tooltip label for the dismiss button
+   */
+  dismissTooltipLabel: PropTypes.string,
   /**
    * Specify the id for the tag.
    */

package/es/components/Tag/SelectableTag.d.ts

@@ -36,6 +36,10 @@ export interface SelectableTagBaseProps {
      * Specify the state of the selectable tag.
      */
     selected?: boolean;
+    /**
+     * Specify the default state of the selectable tag.
+     */
+    defaultSelected?: boolean;
     /**
      * Specify the size of the Tag. Currently supports either `sm`,
      * `md` (default) or `lg` sizes.

package/es/components/Tag/SelectableTag.js

@@ -17,6 +17,7 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import mergeRefs from '../../tools/mergeRefs.js';
+import { useControllableState } from '../../internal/useControllableState.js';
 import { Text } from '../Text/Text.js';
 
 const SelectableTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
@@ -27,15 +28,20 @@ const SelectableTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
     renderIcon,
     onChange,
     onClick,
-    selected = false,
+    selected,
     size,
     text,
+    defaultSelected = false,
     ...other
   } = _ref;
   const prefix = usePrefix();
   const tagRef = useRef(null);
   const tagId = id || `tag-${useId()}`;
-  const [selectedTag, setSelectedTag] = useState(selected);
+  const [selectedTag, setSelectedTag] = useControllableState({
+    value: selected,
+    onChange: onChange,
+    defaultValue: defaultSelected
+  });
   const tagClasses = cx(`${prefix}--tag--selectable`, className, {
     [`${prefix}--tag--selectable-selected`]: selectedTag
   });
@@ -48,7 +54,6 @@ const SelectableTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
   const combinedRef = mergeRefs(tagRef, forwardRef);
   const handleClick = e => {
     setSelectedTag(!selectedTag);
-    onChange?.(!selectedTag);
     onClick?.(e);
   };
   if (isEllipsisApplied) {
@@ -115,6 +120,10 @@ SelectableTag.propTypes = {
    * Specify the state of the selectable tag.
    */
   selected: PropTypes.bool,
+  /**
+   * Specify the default state of the selectable tag.
+   */
+  defaultSelected: PropTypes.bool,
   /**
    * Specify the size of the Tag. Currently supports either `sm`,
    * `md` (default) or `lg` sizes.

package/es/components/UIShell/Switcher.js

@@ -12,7 +12,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
-import getDisplayName from '../../prop-types/tools/getDisplayName.js';
+import SwitcherItem from './SwitcherItem.js';
 
 const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
   const switcherRef = useRef(null);
@@ -38,7 +38,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
       direction
     } = _ref;
     const enabledIndices = React__default.Children.toArray(children).reduce((acc, curr, i) => {
-      if (/*#__PURE__*/React__default.isValidElement(curr) && Object.keys(curr.props).length !== 0 && getDisplayName(curr.type) === 'SwitcherItem') {
+      if (/*#__PURE__*/React__default.isValidElement(curr) && Object.keys(curr.props).length !== 0 && curr.type === SwitcherItem) {
         acc.push(i);
       }
       return acc;
@@ -66,7 +66,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
   };
   const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
     // only setup click handlers if onChange event is passed
-    if (/*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'SwitcherItem') {
+    if (/*#__PURE__*/React__default.isValidElement(child) && child.type === SwitcherItem) {
       return /*#__PURE__*/React__default.cloneElement(child, {
         handleSwitcherItemFocus,
         index,

package/es/feature-flags.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export {};

package/es/index.js

@@ -192,6 +192,8 @@ export { Heading, Section } from './components/Heading/index.js';
 export { IconButton, IconButtonKinds } from './components/IconButton/index.js';
 export { Layer, useLayer } from './components/Layer/index.js';
 export { Layout as unstable_Layout } from './components/Layout/index.js';
+export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
+export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2/index.js';
 export { Popover, PopoverContent } from './components/Popover/index.js';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
@@ -214,8 +216,6 @@ export { default as unstable_Pagination } from './components/Pagination/experime
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
-export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
-export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
 export { Text as unstable_Text } from './components/Text/Text.js';
 export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';
 export { default as DataTable } from './components/DataTable/DataTable.js';

package/es/internal/debounce.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { debounce } from 'es-toolkit/compat';
+export default debounce;

package/es/internal/environment.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Indicate whether current execution environment can access the DOM.
+ *
+ * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
+ */
+export declare const canUseDOM: boolean;

package/es/internal/useId.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default, { useLayoutEffect, useEffect, useState } from 'react';
+import React__default, { useState, useEffect, useLayoutEffect } from 'react';
 import { setupGetInstanceId } from '../tools/setupGetInstanceId.js';
 import { canUseDOM } from './environment.js';
 import { useIdPrefix } from './useIdPrefix.js';

package/es/internal/usePreviousValue.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Stores the previous value of a given input.
+ *
+ * @param value - The current value.
+ * @returns The value before the current render.
+ *
+ * @example
+ * const [count, setCount] = useState(0);
+ * const prevCount = usePreviousValue(count);
+ */
+export declare const usePreviousValue: <T>(value: T) => T | undefined;

package/es/internal/usePreviousValue.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useRef, useEffect } from 'react';
+
+/**
+ * Stores the previous value of a given input.
+ *
+ * @param value - The current value.
+ * @returns The value before the current render.
+ *
+ * @example
+ * const [count, setCount] = useState(0);
+ * const prevCount = usePreviousValue(count);
+ */
+const usePreviousValue = value => {
+  const ref = useRef(undefined);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+export { usePreviousValue };

package/es/prop-types/AriaPropTypes.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+export declare const AriaLabelPropType: PropTypes.ValidationMap<any>;

package/lib/components/AccordionItem/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { AccordionItem } from '../Accordion';
+export default AccordionItem;
+export { AccordionItem };

package/lib/components/DatePicker/DatePicker.d.ts

@@ -23,7 +23,7 @@ export type CalRef = {
 export interface DatePickerProps {
     /**
      * Flatpickr prop passthrough enables direct date input, and when set to false,
-     * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
+     * 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.
      */
     allowInput?: boolean;
     /**