@carbon/react 1.50.0 → 1.51.0

package/README.md

@@ -51,6 +51,25 @@ to include `node_modules` in its `includePaths` option. For more information,
 checkout the [configuration](../styles/docs/sass.md#configuration) section in
 our Sass docs.
 
+### TypeScript
+
+There is an ongoing project to add `*.d.ts` files to `@carbon/react`. Though not
+all components have yet been typed, you can still use the project successfully
+in a TypeScript setting, provided you amend to your `tsconfig.json` or
+equivalent configuration file. Include the `skipLibCheck: true` compiler option:
+
+```json
+{
+  "compilerOptions": {
+    "skipLibCheck": true
+  }
+}
+```
+
+To track the progress of TypeScript adoption, check out:
+
+- [TypeScript Adoption](https://github.com/orgs/carbon-design-system/projects/53)
+
 ## Usage
 
 The `@carbon/react` package provides components and icons for the Carbon Design

package/es/components/AiSkeleton/AiSkeletonIcon.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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';
+import React from 'react';
+interface AiSkeletonIconProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * The CSS styles.
+     */
+    style?: React.CSSProperties;
+}
+declare const AiSkeletonIcon: {
+    ({ className, ...rest }: AiSkeletonIconProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The CSS styles.
+         */
+        style: PropTypes.Requireable<object>;
+    };
+};
+export default AiSkeletonIcon;

package/es/components/AiSkeleton/AiSkeletonPlaceholder.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 interface AiSkeletonPlaceholderProps {
+    /**
+     * Add a custom class to the component to set the height and width
+     */
+    className?: string;
+}
+declare const AiSkeletonPlaceholder: {
+    ({ className, ...other }: AiSkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Add a custom class to the component
+         * to set the height and width
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default AiSkeletonPlaceholder;

package/es/components/AiSkeleton/AiSkeletonText.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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';
+interface AiSkeletonTextProps {
+    /**
+     * Specify an optional className to be applied to the container node.
+     */
+    className?: string;
+    /**
+     * Generates skeleton text at a larger size.
+     */
+    heading?: boolean;
+    /**
+     * The number of lines shown if paragraph is true.
+     */
+    lineCount?: number;
+    /**
+     * Set this to true to generate multiple lines of text.
+     */
+    paragraph?: boolean;
+    /**
+     * Width (in px or %) of single line of text or max-width of paragraph lines.
+     */
+    width?: string;
+}
+declare const AiSkeletonText: {
+    ({ className, ...rest }: AiSkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * generates skeleton text at a larger size
+         */
+        heading: PropTypes.Requireable<boolean>;
+        /**
+         * the number of lines shown if paragraph is true
+         */
+        lineCount: PropTypes.Requireable<number>;
+        /**
+         * will generate multiple lines of text
+         */
+        paragraph: PropTypes.Requireable<boolean>;
+        /**
+         * width (in px or %) of single line of text or max-width of paragraph lines
+         */
+        width: PropTypes.Requireable<string>;
+    };
+};
+export default AiSkeletonText;

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 AiSkeletonPlaceholder from './AiSkeletonPlaceholder';
+import AiSkeletonIcon from './AiSkeletonIcon';
+import AiSkeletonText from './AiSkeletonText';
+export { AiSkeletonText, AiSkeletonIcon, AiSkeletonPlaceholder };

package/es/components/ComposedModal/ComposedModal.js

@@ -6,11 +6,14 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect } from 'react';
 import { isElement } from 'react-is';
 import PropTypes from 'prop-types';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalFooter } from './ModalFooter.js';
+import debounce from 'lodash.debounce';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
+import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';
 import toggleClass from '../../tools/toggleClass.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
@@ -28,18 +31,39 @@ const ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const contentClass = cx(`${prefix}--modal-content`, hasForm && `${prefix}--modal-content--with-form`, hasScrollingContent && `${prefix}--modal-scroll-content`, customClassName);
-  const hasScrollingContentProps = hasScrollingContent ? {
+  const contentRef = useRef(null);
+  const [isScrollable, setIsScrollable] = useState(false);
+  const contentClass = cx({
+    [`${prefix}--modal-content`]: true,
+    [`${prefix}--modal-content--with-form`]: hasForm,
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
+    customClassName
+  });
+  useIsomorphicEffect(() => {
+    if (contentRef.current) {
+      setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+    }
+    function handler() {
+      if (contentRef.current) {
+        setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+      }
+    }
+    const debouncedHandler = debounce(handler, 200);
+    window.addEventListener('resize', debouncedHandler);
+    return () => {
+      debouncedHandler.cancel();
+      window.removeEventListener('resize', debouncedHandler);
+    };
+  }, []);
+  const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
     tabIndex: 0,
     role: 'region'
   } : {};
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: contentClass
   }, hasScrollingContentProps, rest, {
-    ref: ref
-  }), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--modal-content--overflow-indicator`
-  }));
+    ref: mergeRefs(contentRef, ref)
+  }), children);
 });
 ModalBody.propTypes = {
   /**

package/es/components/Copy/Copy.js

@@ -41,7 +41,7 @@ function Copy(_ref) {
     handleFadeOut();
   }, [handleFadeOut]);
   const handleAnimationEnd = event => {
-    if (event.animationName === 'hide-feedback') {
+    if (event.animationName === `${prefix}--hide-feedback`) {
       setAnimation('');
     }
   };

package/es/components/DataTable/DataTable.d.ts

@@ -53,7 +53,7 @@ export interface DataTableRow<ColTypes extends any[]> {
 export interface DataTableHeader {
     key: string;
     header: React.ReactNode;
-    slug: React.ReactElement;
+    slug?: React.ReactElement;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     headers: Array<DataTableHeader>;
@@ -341,7 +341,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         sortDirection: DataTableSortState;
         isSortable: boolean | undefined;
         isSortHeader: boolean;
-        slug: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        slug: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
         onClick: (event: any) => void;
     };
     /**

package/es/components/DataTable/TableToolbarSearch.d.ts

@@ -6,12 +6,12 @@
  */
 import PropTypes from 'prop-types';
 import { ChangeEvent, FocusEvent, ReactNode } from 'react';
-export interface TableToolbarSearchProps {
-    children?: ReactNode;
-    /**
-     * Provide an optional class name for the search container
-     */
-    className?: string;
+import { SearchProps } from '../Search';
+import { InternationalProps } from '../../types/common';
+export type TableToolbarTranslationKey = 'carbon.table.toolbar.search.label' | 'carbon.table.toolbar.search.placeholder';
+type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
+export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
+export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, InternationalProps<TableToolbarTranslationKey> {
     /**
      * Specifies if the search should initially render in an expanded state
      */
@@ -20,70 +20,43 @@ export interface TableToolbarSearchProps {
      * Provide an optional default value for the Search component
      */
     defaultValue?: string;
-    /**
-     * Specifies if the search should be disabled
-     */
-    disabled?: boolean;
     /**
      * Specifies if the search should expand
      */
     expanded?: boolean;
-    /**
-     * Provide an optional id for the search container
-     */
-    id?: string;
     /**
      * Provide an optional label text for the Search component icon
      */
-    labelText?: string;
+    labelText?: ReactNode;
     /**
      * Provide an optional function to be called when the search input loses focus, this will be
      * passed the event as the first parameter and a function to handle the expanding of the search
      * input as the second
      */
-    onBlur?: (event: FocusEvent<HTMLInputElement>, handleExpand: (event: FocusEvent<HTMLInputElement>, value: boolean) => void) => void;
+    onBlur?(event: FocusEvent<HTMLInputElement>, handleExpand: TableToolbarSearchHandleExpand): void;
     /**
      * Provide an optional hook that is called each time the input is updated
      */
     onChange?: (event: '' | ChangeEvent<HTMLInputElement>, value?: string) => void;
-    /**
-     * Optional callback called when the search value is cleared.
-     */
-    onClear?: () => void;
     /**
      * Provide an optional hook that is called each time the input is expanded
      */
-    onExpand?: (event: FocusEvent<HTMLInputElement>, value: boolean) => void;
+    onExpand?(event: FocusEvent<HTMLInputElement>, newExpand: boolean): void;
     /**
      * Provide an optional function to be called when the search input gains focus, this will be
      * passed the event as the first parameter and a function to handle the expanding of the search
      * input as the second.
      */
-    onFocus?: (event: FocusEvent<HTMLInputElement>, handleExpand: (event: FocusEvent<HTMLInputElement>, value: boolean) => void) => void;
+    onFocus?(event: FocusEvent<HTMLInputElement>, handleExpand: TableToolbarSearchHandleExpand): void;
     /**
-     * Whether the search should be allowed to expand
+     * Whether the search should be allowed to expand.
      */
     persistent?: boolean;
-    /**
-     * Provide an optional placeholder text for the Search component
-     */
-    placeholder?: string;
     /**
      * Provide an optional className for the overall container of the Search
      */
     searchContainerClass?: string;
-    /**
-     * Specify the size of the Search
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
-     */
     tabIndex?: number | string;
-    /**
-     * Provide custom text for the component for each translation id
-     */
-    translateWithId?: (id: string) => string;
 }
 declare const TableToolbarSearch: {
     ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;

package/es/components/DataTable/TableToolbarSearch.js

@@ -48,7 +48,7 @@ const TableToolbarSearch = _ref => {
   const {
     current: controlled
   } = useRef(expandedProp !== undefined);
-  const [expandedState, setExpandedState] = useState(defaultExpanded || defaultValue);
+  const [expandedState, setExpandedState] = useState(Boolean(defaultExpanded || defaultValue));
   const expanded = controlled ? expandedProp : expandedState;
   const [value, setValue] = useState(defaultValue || '');
   const uniqueId = useMemo(getInstanceId, []);

package/es/components/Modal/Modal.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import toggleClass from '../../tools/toggleClass.js';
@@ -17,6 +17,8 @@ import ButtonSet from '../ButtonSet/ButtonSet.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
+import debounce from 'lodash.debounce';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { IconButton } from '../IconButton/index.js';
@@ -66,9 +68,11 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const prefix = usePrefix();
   const button = useRef(null);
   const secondaryButton = useRef();
+  const contentRef = useRef(null);
   const innerModal = useRef(null);
   const startTrap = useRef(null);
   const endTrap = useRef(null);
+  const [isScrollable, setIsScrollable] = useState(false);
   const modalInstanceId = `modal-${getInstanceId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -134,7 +138,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     [`${prefix}--modal-container--full-width`]: isFullWidth
   });
   const contentClasses = cx(`${prefix}--modal-content`, {
-    [`${prefix}--modal-scroll-content`]: hasScrollingContent
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable
   });
   const footerClasses = cx(`${prefix}--modal-footer`, {
     [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
@@ -146,7 +150,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const modalHeadingStr = asStringOrUndefined(modalHeading);
   const ariaLabel = modalLabelStr || ariaLabelProp || modalAriaLabel || modalHeadingStr;
   const getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
-  const hasScrollingContentProps = hasScrollingContent ? {
+  const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
     tabIndex: 0,
     role: 'region',
     'aria-label': ariaLabel,
@@ -194,6 +198,22 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, danger, prefix]);
+  useIsomorphicEffect(() => {
+    if (contentRef.current) {
+      setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+    }
+    function handler() {
+      if (contentRef.current) {
+        setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+      }
+    }
+    const debouncedHandler = debounce(handler, 200);
+    window.addEventListener('resize', debouncedHandler);
+    return () => {
+      debouncedHandler.cancel();
+      window.removeEventListener('resize', debouncedHandler);
+    };
+  }, []);
 
   // Slug is always size `lg`
   let normalizedSlug;
@@ -237,11 +257,10 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
   }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: contentRef,
     id: modalBodyId,
     className: contentClasses
-  }, hasScrollingContentProps), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--modal-content--overflow-indicator`
-  }), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
+  }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
     className: footerClasses,
     "aria-busy": loadingActive
   }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref3, i) => {

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -51,6 +51,10 @@ interface MultiSelectSortingProps<ItemType> {
 }
 export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
     className?: string;
+    /**
+     * Specify the text that should be read for screen readers that describes that all items are deleted
+     */
+    clearAnnouncement?: string;
     /**
      * Specify the text that should be read for screen readers that describes total items selected
      */

package/es/components/MultiSelect/MultiSelect.js

@@ -71,6 +71,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     sortItems = defaultSortItems,
     compareItems = defaultCompareItems,
     clearSelectionText = 'To clear selection, press Delete or Backspace',
+    clearAnnouncement = 'all items have been cleared',
     clearSelectionDescription = 'Total items selected: ',
     light,
     invalid,
@@ -102,6 +103,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const [isOpen, setIsOpen] = useState(open || false);
   const [prevOpenProp, setPrevOpenProp] = useState(open);
   const [topItems, setTopItems] = useState([]);
+  const [itemsCleared, setItemsCleared] = useState(false);
   const {
     selectedItems: controlledSelectedItems,
     onItemChange,
@@ -148,7 +150,11 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           clearSelection();
           e.stopPropagation();
         }
+        if (!isOpen && match(e, Delete) && selectedItems.length > 0) {
+          setItemsCleared(true);
+        }
         if ((match(e, Space) || match(e, ArrowDown) || match(e, Enter)) && !isOpen) {
+          setItemsCleared(false);
           setIsOpenWrapper(true);
         }
       }
@@ -383,7 +389,10 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }, itemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
       key: itemProps.id
     }, item)) : itemText)));
-  }))), !inline && !invalid && !warn && helperText && /*#__PURE__*/React__default.createElement("div", {
+  })), itemsCleared && /*#__PURE__*/React__default.createElement("span", {
+    "aria-live": "assertive",
+    "aria-label": clearAnnouncement
+  })), !inline && !invalid && !warn && helperText && /*#__PURE__*/React__default.createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText));

package/es/components/NumberInput/NumberInput.js

@@ -130,7 +130,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
       return;
     }
     const state = {
-      value: event.target.value,
+      value: Number(event.target.value),
       direction: value < event.target.value ? 'up' : 'down'
     };
     setValue(state.value);

package/es/components/PaginationNav/PaginationNav.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright IBM Corp. 2020
+ *
+ * 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 React from 'react';
+interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
+     * Set this to true if you are having performance problems with large data sets.
+     */
+    disableOverflow?: boolean;
+    /**
+     * The number of items to be shown.
+     */
+    itemsShown?: number;
+    /**
+     * Whether user should be able to loop through the items when reaching first / last.
+     */
+    loop?: boolean;
+    /**
+     * The callback function called when the current page changes.
+     */
+    onChange?: (data: number) => void;
+    /**
+     * The index of current page.
+     */
+    page?: number;
+    /**
+     * The total number of items.
+     */
+    totalItems?: number;
+    /**
+     * Specify a custom translation function that takes in a message identifier
+     * and returns the localized string for the message
+     */
+    translateWithId?: (id: string) => string;
+}
+declare const PaginationNav: React.ForwardRefExoticComponent<PaginationNavProps & React.RefAttributes<HTMLElement>>;
+export default PaginationNav;