@carbon/react 1.53.1 → 1.54.0

package/es/components/ListBox/ListBox.js

@@ -37,8 +37,10 @@ const ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, re
     size,
     invalid,
     invalidText,
+    invalidTextId,
     warn,
     warnText,
+    warnTextId,
     light,
     isOpen,
     ...rest
@@ -70,9 +72,11 @@ const ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, re
   }), children), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--list-box__divider`
   }), invalid ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--form-requirement`
+    className: `${prefix}--form-requirement`,
+    id: invalidTextId
   }, invalidText) : null, showWarning ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--form-requirement`
+    className: `${prefix}--form-requirement`,
+    id: warnTextId
   }, warnText) : null);
 });
 ListBox.displayName = 'ListBox';
@@ -97,6 +101,10 @@ ListBox.propTypes = {
    * Specify the text to be displayed when the control is invalid
    */
   invalidText: PropTypes.node,
+  /**
+   * Specify the id to be applied to the element containing the invalid text
+   */
+  invalidTextId: PropTypes.string,
   /**
    * Specify if the control should render open
    */
@@ -122,7 +130,11 @@ ListBox.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.string,
+  /**
+   * Specify the id to be applied to the element containing the warn text
+   */
+  warnTextId: PropTypes.string
 };
 
 export { ListBox as default };

package/es/components/Loading/Loading.d.ts

@@ -30,7 +30,7 @@ export interface LoadingProps extends ReactAttr<HTMLDivElement> {
     /**
      * Specify whether you want the loader to be applied with an overlay
      */
-    withOverlay: boolean;
+    withOverlay?: boolean;
 }
 declare function Loading({ active, className: customClassName, withOverlay, small, description, ...rest }: LoadingProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Loading {

package/es/components/Menu/Menu.js

@@ -32,6 +32,8 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     onOpen,
     open,
     size = 'sm',
+    // TODO: #16004
+    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
     target = document.body,
     x = 0,
     y = 0,

package/es/components/Modal/Modal.js

@@ -16,7 +16,7 @@ import '../Button/Button.Skeleton.js';
 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 wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import debounce from 'lodash.debounce';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
@@ -24,9 +24,10 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
-import { Escape, Enter } from '../../internal/keyboard/keys.js';
+import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
 
 const getInstanceId = setupGetInstanceId();
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
@@ -82,6 +83,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
+  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -94,6 +96,13 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
+      if (focusTrapWithoutSentinels && match(evt, Tab) && innerModal.current) {
+        wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: evt.target,
+          event: evt
+        });
+      }
     }
   }
   function handleMousedown(evt) {
@@ -295,16 +304,16 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleMousedown,
-    onBlur: handleBlur,
+    onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
     className: modalClasses,
     role: "presentation",
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("span", {
+  }), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
     ref: startTrap,
     tabIndex: 0,
     role: "link",
     className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default.createElement("span", {
+  }, "Focus sentinel"), modalBody, !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
     ref: endTrap,
     tabIndex: 0,
     role: "link",

package/es/components/ModalWrapper/ModalWrapper.d.ts

@@ -59,7 +59,7 @@ export default class ModalWrapper extends React.Component<ModalWrapperProps, Mod
         shouldCloseAfterSubmit: PropTypes.Requireable<boolean>;
         status: PropTypes.Requireable<string>;
         triggerButtonIconDescription: PropTypes.Requireable<string>;
-        triggerButtonKind: PropTypes.Requireable<"primary" | "secondary" | "ghost" | "tertiary" | "danger" | "danger--primary" | "danger--ghost" | "danger--tertiary">;
+        triggerButtonKind: PropTypes.Requireable<"primary" | "secondary" | "danger" | "ghost" | "danger--primary" | "danger--ghost" | "danger--tertiary" | "tertiary">;
         withHeader: PropTypes.Requireable<boolean>;
     };
     triggerButton: React.RefObject<HTMLButtonElement>;

package/es/components/Notification/Notification.js

@@ -19,10 +19,11 @@ import { useNoInteractiveChildren, useInteractiveChildrenNeedDescription } from
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
-import wrapFocus from '../../internal/wrapFocus.js';
+import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { Text } from '../Text/Text.js';
-import { matches } from '../../internal/keyboard/match.js';
-import { Escape } from '../../internal/keyboard/keys.js';
+import { match, matches } from '../../internal/keyboard/match.js';
+import { Tab, Escape } from '../../internal/keyboard/keys.js';
 
 /**
  * Conditionally call a callback when the escape key is pressed
@@ -511,6 +512,7 @@ function ActionableNotification(_ref6) {
   const startTrap = useRef(null);
   const endTrap = useRef(null);
   const ref = useRef(null);
+  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   useIsomorphicEffect(() => {
     if (hasFocus) {
       const button = document.querySelector('button.cds--actionable-notification__action-button');
@@ -541,6 +543,15 @@ function ActionableNotification(_ref6) {
       });
     }
   }
+  function handleKeyDown(event) {
+    if (isOpen && match(event, Tab) && ref.current) {
+      wrapFocusWithoutSentinels({
+        containerNode: ref.current,
+        currentActiveNode: event.target,
+        event
+      });
+    }
+  }
   const handleClose = evt => {
     if (!onClose || onClose(evt) !== false) {
       setIsOpen(false);
@@ -559,8 +570,9 @@ function ActionableNotification(_ref6) {
     role: role,
     className: containerClassName,
     "aria-labelledby": title ? id : subtitleId,
-    onBlur: handleBlur
-  }), /*#__PURE__*/React__default.createElement("span", {
+    onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
+    onKeyDown: focusTrapWithoutSentinels ? handleKeyDown : () => {}
+  }), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
     ref: startTrap,
     tabIndex: 0,
     role: "link",
@@ -593,7 +605,7 @@ function ActionableNotification(_ref6) {
     "aria-label": deprecatedAriaLabel || ariaLabel,
     notificationType: "actionable",
     onClick: handleCloseButtonClick
-  })), /*#__PURE__*/React__default.createElement("span", {
+  })), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
     ref: endTrap,
     tabIndex: 0,
     role: "link",

package/es/components/Pagination/Pagination.Skeleton.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+export interface PaginationSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare function PaginationSkeleton({ className, ...rest }: PaginationSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default PaginationSkeleton;
+export { PaginationSkeleton };

package/es/components/Pagination/Pagination.d.ts

@@ -0,0 +1,102 @@
+/**
+ * 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 React from 'react';
+type ExcludedAttributes = 'id' | 'onChange';
+export interface PaginationPageSize {
+    text: string;
+    value: number;
+}
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, ExcludedAttributes> {
+    /**
+     * The description for the backward icon.
+     */
+    backwardText?: string;
+    /**
+     * The CSS class names.
+     */
+    className?: string;
+    /**
+     * `true` if the backward/forward buttons, as well as the page select elements,  should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The description for the forward icon.
+     */
+    forwardText?: string;
+    /**
+     * The unique ID of this component instance.
+     */
+    id?: string | number;
+    /**
+     * `true` if the current page should be the last page.
+     */
+    isLastPage?: boolean;
+    /**
+     * The function returning a translatable text showing where the current page is,
+     * in a manner of the range of items.
+     */
+    itemRangeText?: (min: number, max: number, total: number) => string;
+    /**
+     * A variant of `itemRangeText`, used if the total number of items is unknown.
+     */
+    itemText?: (min: number, max: number) => string;
+    /**
+     * The translatable text indicating the number of items per page.
+     */
+    itemsPerPageText?: string;
+    /**
+     * The callback function called when the current page changes.
+     */
+    onChange?: (data: {
+        page: number;
+        pageSize: number;
+        ref?: React.RefObject<any>;
+    }) => void;
+    /**
+     * The current page.
+     */
+    page?: number;
+    /**
+     * `true` if the select box to change the page should be disabled.
+     */
+    pageInputDisabled?: boolean;
+    pageNumberText?: string;
+    /**
+     * A function returning PII showing where the current page is.
+     */
+    pageRangeText?: (current: number, total: number) => string;
+    /**
+     * The number dictating how many items a page contains.
+     */
+    pageSize?: number;
+    /**
+     * `true` if the select box to change the items per page should be disabled.
+     */
+    pageSizeInputDisabled?: boolean;
+    /**
+     * The choices for `pageSize`.
+     */
+    pageSizes: number[] | PaginationPageSize[];
+    /**
+     * The translatable text showing the current page.
+     */
+    pageText?: (page: number, pagesUnknown?: boolean) => string;
+    /**
+     * `true` if the total number of items is unknown.
+     */
+    pagesUnknown?: boolean;
+    /**
+     * Specify the size of the Pagination.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The total number of items.
+     */
+    totalItems?: number;
+}
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
+export default Pagination;

package/es/components/Pagination/Pagination.js

@@ -27,7 +27,7 @@ function mapPageSizesToObject(sizes) {
 }
 function renderSelectItems(total) {
   let counter = 1;
-  let itemArr = [];
+  const itemArr = [];
   while (counter <= total) {
     itemArr.push( /*#__PURE__*/React__default.createElement(SelectItem, {
       key: counter,
@@ -52,7 +52,7 @@ function getPageSize(pageSizes, pageSize) {
 const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_ref, ref) {
   let {
     backwardText = 'Previous page',
-    className: customClassName,
+    className: customClassName = '',
     disabled = false,
     forwardText = 'Next page',
     id,
@@ -71,11 +71,11 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     pageText = (page, pagesUnknown) => `page ${pagesUnknown ? '' : page}`,
     pagesUnknown = false,
     size = 'md',
-    totalItems,
+    totalItems = 1,
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const inputId = useFallbackId(id);
+  const inputId = useFallbackId(id?.toString());
   const backBtnRef = useRef(null);
   const forwardBtnRef = useRef(null);
   const [pageSizes, setPageSizes] = useState(() => {
@@ -163,14 +163,14 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     // the icon button becomes disabled and the focus shifts to `main`
     // this presents an a11y problem for keyboard & screen reader users
     // instead, we want the focus to shift to the other pagination btn
-    if (nextPage === totalPages) {
+    if (nextPage === totalPages && backBtnRef?.current) {
       backBtnRef.current.focus();
     }
     if (onChange) {
       onChange({
         page: nextPage,
         pageSize,
-        backBtnRef
+        ref: backBtnRef
       });
     }
   }
@@ -182,14 +182,14 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     // the icon button becomes disabled and the focus shifts to `main`
     // this presents an a11y problem for keyboard & screen reader users
     // instead, we want the focus to shift to the other pagination btn
-    if (nextPage === 1) {
+    if (nextPage === 1 && forwardBtnRef?.current) {
       forwardBtnRef.current.focus();
     }
     if (onChange) {
       onChange({
         page: nextPage,
         pageSize,
-        forwardBtnRef
+        ref: forwardBtnRef
       });
     }
   }
@@ -320,10 +320,10 @@ Pagination.propTypes = {
   /**
    * The choices for `pageSize`.
    */
-  pageSizes: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.shape({
-    text: PropTypes.text,
-    value: PropTypes.number
-  }))]).isRequired,
+  pageSizes: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number.isRequired), PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  }).isRequired)]).isRequired,
   /**
    * The translatable text showing the current page.
    */
@@ -341,6 +341,5 @@ Pagination.propTypes = {
    */
   totalItems: PropTypes.number
 };
-var Pagination$1 = Pagination;
 
-export { Pagination$1 as default };
+export { Pagination as default };

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

@@ -0,0 +1,10 @@
+/**
+ * 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 Pagination from './Pagination';
+export * from './Pagination.Skeleton';
+export default Pagination;
+export { Pagination };

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

@@ -6,7 +6,7 @@
  */
 import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
 import { type PolymorphicProps } from '../../types/common';
-export type PopoverAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
+export type PopoverAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
 interface PopoverBaseProps {
     /**
      * Specify how the popover should align with the trigger element