@carbon/react 1.46.1 → 1.47.0-rc.0

package/es/components/Accordion/AccordionItem.js

@@ -64,7 +64,9 @@ function AccordionItem(_ref) {
       content.current.style.maxBlockSize = '';
     } else {
       // accordion opens
-      content.current.style.maxBlockSize = content.current.scrollHeight + 15 + 'px';
+      content.current.style.maxBlockSize =
+      // Scroll height plus top/bottom padding
+      content.current.scrollHeight + 32 + 'px';
     }
     const nextValue = !isOpen;
     setIsOpen(nextValue);

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

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import { ContentSwitcherProps } from './ContentSwitcher';
+declare const ContentSwitcher: import("react").FunctionComponent<ContentSwitcherProps>;
+export default ContentSwitcher;
+export { ContentSwitcher };

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

@@ -4,7 +4,7 @@
  * 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, { MouseEventHandler, PropsWithChildren } from 'react';
+import React, { type MouseEventHandler, type PropsWithChildren } from 'react';
 import { TableRowProps } from './TableRow';
 interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
     /**

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { ReactNodeLike } from 'prop-types';
-import React, { MouseEventHandler } from 'react';
+import React, { type MouseEventHandler } from 'react';
 import { ReactAttr } from '../../types/common';
 interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement> {
     /**

package/es/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 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, { ErrorInfo, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundaryContext } from './ErrorBoundaryContext';
+/**
+ * React introduced additional lifecycle methods in v16 for capturing errors
+ * that occur in a specific sub-tree of components. This component helps to
+ * consolidate some of the duplication that occurs when using these lifecycle
+ * methods across a codebase. In addition, it allows you to specify the fallback
+ * UI to display when an error occurs in the sub-tree through the `fallback`
+ * prop.
+ *
+ * This component roughly follows the React.js docs example code for these
+ * methods. In addition, it takes advantage of an `ErrorBoundaryContext` so that
+ * consumers can specify their own logic for logging errors. For example,
+ * reporting an error in the UI to an external service for every `ErrorBoundary`
+ * used.
+ *
+ * Reference:
+ * https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
+ */
+interface ErrorBoundaryProps {
+    children?: ReactNode;
+    fallback?: ReactNode;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+}
+export default class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        fallback: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    static contextType: React.Context<import("./ErrorBoundaryContext").ErrorBoundaryContextType>;
+    context: React.ContextType<typeof ErrorBoundaryContext>;
+    static getDerivedStateFromError(): ErrorBoundaryState;
+    state: ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    componentDidUpdate(prevProps: ErrorBoundaryProps): void;
+    render(): React.ReactNode;
+}
+export {};

package/es/components/ErrorBoundary/ErrorBoundary.js

@@ -27,9 +27,11 @@ import { ErrorBoundaryContext } from './ErrorBoundaryContext.js';
  * Reference:
  * https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
  */
+
 class ErrorBoundary extends React__default.Component {
   constructor() {
     super(...arguments);
+    _defineProperty(this, "context", void 0);
     _defineProperty(this, "state", {
       hasError: false
     });

package/es/components/ErrorBoundary/ErrorBoundaryContext.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { ErrorInfo } from 'react';
+export interface ErrorBoundaryContextType {
+    log: (error: Error, errorInfo: ErrorInfo) => void;
+}
+export declare const ErrorBoundaryContext: import("react").Context<ErrorBoundaryContextType>;

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export { default as ErrorBoundary } from './ErrorBoundary';
+export { ErrorBoundaryContext } from './ErrorBoundaryContext';

package/es/components/FeatureFlags/index.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { createScope, FeatureFlags as FeatureFlags$1 } from '@carbon/feature-flags';
+import { FeatureFlags as FeatureFlags$1, createScope } from '@carbon/feature-flags';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useRef, useEffect, createContext } from 'react';
+import React__default, { createContext, useContext, useState, useRef, useEffect } from 'react';
 
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable

package/es/components/FluidDropdown/FluidDropdown.Skeleton.js

@@ -17,9 +17,10 @@ const FluidDropdownSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const wrapperClasses = cx(className, `${prefix}--skeleton`, `${prefix}--list-box`);
+  const wrapperContainerClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
+  const wrapperClasses = cx(`${prefix}--skeleton`, `${prefix}--list-box`);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--list-box__wrapper--fluid`
+    className: wrapperContainerClasses
   }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, rest), /*#__PURE__*/React__default.createElement("span", {

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -35,7 +35,7 @@ const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineChe
     disabled,
     id,
     name,
-    onClick,
+    onClick: onClick ? onClickCheckBoxInput : onClick,
     onChange: evt => {
       onChange(evt.target.checked, id, evt);
     },
@@ -51,6 +51,13 @@ const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineChe
       inputRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
+  function onClickCheckBoxInput(evt) {
+    // If the previous "indeterminate" is true, change "checked" to false. If it is not undefined, we're working on `TableSelectAll`
+    if (indeterminate) {
+      evt.target.checked = false;
+    }
+    onClick(evt);
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--checkbox--inline`
   }, /*#__PURE__*/React__default.createElement("input", inputProps),

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

@@ -0,0 +1,75 @@
+/**
+ * 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, { ReactNode } from 'react';
+import { ButtonKinds } from '../Button';
+interface ModalWrapperProps {
+    buttonTriggerClassName?: string;
+    buttonTriggerText?: ReactNode;
+    children?: ReactNode;
+    disabled?: boolean;
+    handleOpen?: React.MouseEventHandler<HTMLButtonElement>;
+    handleSubmit?: React.ReactEventHandler<HTMLElement>;
+    id?: string;
+    modalBeforeContent?: boolean;
+    modalHeading?: string;
+    modalLabel?: string;
+    modalText?: string;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    passiveModal?: boolean;
+    preventCloseOnClickOutside?: boolean;
+    primaryButtonText?: string;
+    renderTriggerButtonIcon: React.ElementType;
+    secondaryButtonText?: string;
+    selectorPrimaryFocus?: string;
+    shouldCloseAfterSubmit?: boolean;
+    status?: string;
+    triggerButtonIconDescription?: string;
+    triggerButtonKind: (typeof ButtonKinds)[number];
+    withHeader?: boolean;
+}
+interface ModelWrapperState {
+    isOpen: boolean;
+}
+export default class ModalWrapper extends React.Component<ModalWrapperProps, ModelWrapperState> {
+    if(__DEV__: any): void;
+    static propTypes: {
+        buttonTriggerClassName: PropTypes.Requireable<string>;
+        buttonTriggerText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        handleOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        handleSubmit: PropTypes.Requireable<(...args: any[]) => any>;
+        id: PropTypes.Requireable<string>;
+        modalBeforeContent: PropTypes.Requireable<boolean>;
+        modalHeading: PropTypes.Requireable<string>;
+        modalLabel: PropTypes.Requireable<string>;
+        modalText: PropTypes.Requireable<string>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        passiveModal: PropTypes.Requireable<boolean>;
+        preventCloseOnClickOutside: PropTypes.Requireable<boolean>;
+        primaryButtonText: PropTypes.Requireable<string>;
+        renderTriggerButtonIcon: PropTypes.Requireable<object>;
+        secondaryButtonText: PropTypes.Requireable<string>;
+        selectorPrimaryFocus: PropTypes.Requireable<string>;
+        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">;
+        withHeader: PropTypes.Requireable<boolean>;
+    };
+    triggerButton: React.RefObject<HTMLButtonElement>;
+    modal: React.RefObject<HTMLDivElement>;
+    state: {
+        isOpen: boolean;
+    };
+    handleOpen: () => void;
+    handleClose: (evt: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleOnRequestSubmit: (evt: React.KeyboardEvent<HTMLDivElement>) => void;
+    render(): JSX.Element;
+}
+export {};

package/es/components/ModalWrapper/ModalWrapper.js

@@ -9,11 +9,12 @@ import { defineProperty as _defineProperty, extends as _extends } from '../../_v
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import Modal from '../Modal/Modal.js';
-import Button from '../Button/Button.js';
+import Button, { ButtonKinds } from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
-import { ButtonKinds } from '../../prop-types/types.js';
 import { warning } from '../../internal/warning.js';
 import { noopFn } from '../../internal/noopFn.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
 
 let didWarnAboutDeprecation = false;
 class ModalWrapper extends React__default.Component {
@@ -30,25 +31,25 @@ class ModalWrapper extends React__default.Component {
       });
     });
     _defineProperty(this, "handleClose", evt => {
-      const innerModal = this.modal.current.querySelector('div');
-      if (this.modal.current && evt && !innerModal.contains(evt.target) && this.props.preventCloseOnClickOutside) {
+      const innerModal = this.modal.current?.querySelector('div');
+      if (this.modal.current && evt && !innerModal?.contains(evt.target) && this.props.preventCloseOnClickOutside) {
         return;
       } else {
         this.setState({
           isOpen: false
-        }, () => this.triggerButton.current.focus());
+        }, () => this.triggerButton.current?.focus());
       }
     });
-    _defineProperty(this, "handleOnRequestSubmit", () => {
+    _defineProperty(this, "handleOnRequestSubmit", evt => {
       const {
         handleSubmit,
         shouldCloseAfterSubmit
       } = this.props;
       if (handleSubmit && shouldCloseAfterSubmit) {
-        handleSubmit();
-        this.handleClose();
+        handleSubmit(evt);
+        this.handleClose(evt);
       }
-      handleSubmit();
+      handleSubmit?.(evt);
     });
   }
   if(__DEV__) {
@@ -68,12 +69,12 @@ class ModalWrapper extends React__default.Component {
       triggerButtonKind = 'primary',
       disabled = false,
       handleSubmit,
-      // eslint-disable-line no-unused-vars
+      // eslint-disable-line @typescript-eslint/no-unused-vars
       shouldCloseAfterSubmit = true,
-      // eslint-disable-line no-unused-vars
+      // eslint-disable-line @typescript-eslint/no-unused-vars
       selectorPrimaryFocus = '[data-modal-primary-focus]',
       preventCloseOnClickOutside = false,
-      // eslint-disable-line no-unused-vars
+      // eslint-disable-line @typescript-eslint/no-unused-vars
       ...other
     } = this.props;
     const props = {
@@ -86,8 +87,8 @@ class ModalWrapper extends React__default.Component {
     return /*#__PURE__*/React__default.createElement("div", {
       role: "presentation",
       onKeyDown: evt => {
-        if (evt.which === 27) {
-          this.handleClose();
+        if (match(evt, Escape)) {
+          this.handleClose(evt);
           onKeyDown(evt);
         }
       }

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

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

package/es/components/OverflowMenu/OverflowMenu.js

@@ -241,7 +241,7 @@ class OverflowMenu extends Component {
             current: triggerEl
           } = this._triggerRef;
           if (typeof target.matches === 'function') {
-            if (!menuBody.contains(target) && triggerEl && !target.matches(`.${this.context}--overflow-menu,.${this.context}--overflow-menu-options`)) {
+            if (!menuBody.contains(target) && triggerEl && !target.matches(`.${this.context}--overflow-menu:first-child,.${this.context}--overflow-menu-options:first-child`)) {
               this.closeMenuAndFocus();
             }
           }

package/es/components/PrimaryButton/PrimaryButton.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 React from 'react';
+import { ButtonProps } from '../Button';
+declare const PrimaryButton: <T extends React.ElementType<any>>(props: ButtonProps<T>) => JSX.Element;
+export default PrimaryButton;

package/es/components/PrimaryButton/PrimaryButton.js

@@ -13,6 +13,5 @@ import '../Button/Button.Skeleton.js';
 const PrimaryButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({
   kind: "primary"
 }, props));
-var PrimaryButton$1 = PrimaryButton;
 
-export { PrimaryButton$1 as default };
+export { PrimaryButton as default };

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

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

package/es/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright IBM Corp. 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+interface ProgressBarProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * The current progress as a textual representation.
+     */
+    helperText?: string;
+    /**
+     * Whether the label should be visually hidden.
+     */
+    hideLabel?: boolean;
+    /**
+     * A label describing the progress bar.
+     */
+    label: string;
+    /**
+     * The maximum value.
+     */
+    max?: number;
+    /**
+     * Specify the size of the progress bar.
+     */
+    size?: 'small' | 'big';
+    /**
+     * Specify the status.
+     */
+    status?: 'active' | 'finished' | 'error';
+    /**
+     * Defines the alignment variant of the progress bar.
+     */
+    type?: 'default' | 'inline' | 'indented';
+    /**
+     * The current value.
+     */
+    value?: number;
+}
+declare function ProgressBar({ className, helperText, hideLabel, label, max, size, status, type, value, }: ProgressBarProps): JSX.Element;
+declare namespace ProgressBar {
+    var propTypes: {
+        /**
+         * Additional CSS class names.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The current progress as a textual representation.
+         */
+        helperText: PropTypes.Requireable<string>;
+        /**
+         * Whether the label should be visually hidden.
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+        /**
+         * A label describing the progress bar.
+         */
+        label: PropTypes.Validator<string>;
+        /**
+         * The maximum value.
+         */
+        max: PropTypes.Requireable<number>;
+        /**
+         * Specify the size of the ProgressBar.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Specify the status.
+         */
+        status: PropTypes.Requireable<string>;
+        /**
+         * Defines the alignment variant of the progress bar.
+         */
+        type: PropTypes.Requireable<string>;
+        /**
+         * The current value.
+         */
+        value: PropTypes.Requireable<number>;
+    };
+}
+export default ProgressBar;

package/es/components/ProgressBar/ProgressBar.js

@@ -34,10 +34,10 @@ function ProgressBar(_ref) {
   const isError = status === 'error';
   const indeterminate = !isFinished && !isError && (value === null || value === undefined);
   let cappedValue = value;
-  if (cappedValue > max) {
+  if (cappedValue && cappedValue > max) {
     cappedValue = max;
   }
-  if (cappedValue < 0) {
+  if (cappedValue && cappedValue < 0) {
     cappedValue = 0;
   }
   if (isError) {
@@ -45,7 +45,7 @@ function ProgressBar(_ref) {
   } else if (isFinished) {
     cappedValue = max;
   }
-  const percentage = cappedValue / max;
+  const percentage = (cappedValue ?? NaN) / max;
   const wrapperClasses = cx(`${prefix}--progress-bar`, `${prefix}--progress-bar--${size}`, `${prefix}--progress-bar--${type}`, {
     [`${prefix}--progress-bar--indeterminate`]: indeterminate,
     [`${prefix}--progress-bar--finished`]: isFinished,
@@ -70,12 +70,14 @@ function ProgressBar(_ref) {
       }, props));
     });
   }
-  const ref = useRef();
+  const ref = useRef(null);
   useIsomorphicEffect(() => {
-    if (!isFinished && !isError) {
-      ref.current.style.transform = `scaleX(${percentage})`;
-    } else {
-      ref.current.style.transform = null;
+    if (ref.current) {
+      if (!isFinished && !isError) {
+        ref.current.style.transform = `scaleX(${percentage})`;
+      } else {
+        ref.current.style.transform = '';
+      }
     }
   }, [percentage, isFinished, isError]);
   return /*#__PURE__*/React__default.createElement("div", {
@@ -94,9 +96,9 @@ function ProgressBar(_ref) {
     "aria-invalid": isError,
     "aria-labelledby": labelId,
     "aria-describedby": helperText ? helperTextId : undefined,
-    "aria-valuemin": !indeterminate ? 0 : null,
-    "aria-valuemax": !indeterminate ? max : null,
-    "aria-valuenow": !indeterminate ? cappedValue : null
+    "aria-valuemin": !indeterminate ? 0 : undefined,
+    "aria-valuemax": !indeterminate ? max : undefined,
+    "aria-valuenow": !indeterminate ? cappedValue : undefined
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--progress-bar__bar`,
     ref: ref

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2021
+ *
+ * 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 ProgressBar from './ProgressBar';
+export default ProgressBar;
+export { ProgressBar };

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

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+interface ProgressIndicatorSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Determines whether or not the ProgressIndicator should be rendered vertically.
+     */
+    vertical?: boolean;
+}
+declare function ProgressIndicatorSkeleton({ className, vertical, ...rest }: ProgressIndicatorSkeletonProps): JSX.Element;
+declare namespace ProgressIndicatorSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Determines whether or not the ProgressIndicator should be rendered vertically.
+         */
+        vertical: PropTypes.Requireable<boolean>;
+    };
+}
+export default ProgressIndicatorSkeleton;
+export { ProgressIndicatorSkeleton };