@carbon/react 1.46.1-rc.0 → 1.47.0-rc.0

package/lib/components/ModalWrapper/ModalWrapper.js

@@ -15,9 +15,10 @@ var React = require('react');
 var Modal = require('../Modal/Modal.js');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
-var types = require('../../prop-types/types.js');
 var warning = require('../../internal/warning.js');
 var noopFn = require('../../internal/noopFn.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,25 +40,25 @@ class ModalWrapper extends React__default["default"].Component {
       });
     });
     _rollupPluginBabelHelpers.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());
       }
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "handleOnRequestSubmit", () => {
+    _rollupPluginBabelHelpers.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__) {
@@ -77,12 +78,12 @@ class ModalWrapper extends React__default["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 = {
@@ -95,8 +96,8 @@ class ModalWrapper extends React__default["default"].Component {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       role: "presentation",
       onKeyDown: evt => {
-        if (evt.which === 27) {
-          this.handleClose();
+        if (match.match(evt, keys.Escape)) {
+          this.handleClose(evt);
           onKeyDown(evt);
         }
       }
@@ -137,7 +138,7 @@ _rollupPluginBabelHelpers.defineProperty(ModalWrapper, "propTypes", {
   shouldCloseAfterSubmit: PropTypes__default["default"].bool,
   status: PropTypes__default["default"].string,
   triggerButtonIconDescription: PropTypes__default["default"].string,
-  triggerButtonKind: PropTypes__default["default"].oneOf(types.ButtonKinds),
+  triggerButtonKind: PropTypes__default["default"].oneOf(Button.ButtonKinds),
   withHeader: PropTypes__default["default"].bool
 });
 

package/lib/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/lib/components/OverflowMenu/OverflowMenu.js

@@ -252,7 +252,7 @@ class OverflowMenu extends React.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/lib/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/lib/components/PrimaryButton/PrimaryButton.js

@@ -21,6 +21,5 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const PrimaryButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
   kind: "primary"
 }, props));
-var PrimaryButton$1 = PrimaryButton;
 
-exports["default"] = PrimaryButton$1;
+exports["default"] = PrimaryButton;

package/lib/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/lib/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/lib/components/ProgressBar/ProgressBar.js

@@ -44,10 +44,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) {
@@ -55,7 +55,7 @@ function ProgressBar(_ref) {
   } else if (isFinished) {
     cappedValue = max;
   }
-  const percentage = cappedValue / max;
+  const percentage = (cappedValue ?? NaN) / max;
   const wrapperClasses = cx__default["default"](`${prefix}--progress-bar`, `${prefix}--progress-bar--${size}`, `${prefix}--progress-bar--${type}`, {
     [`${prefix}--progress-bar--indeterminate`]: indeterminate,
     [`${prefix}--progress-bar--finished`]: isFinished,
@@ -80,12 +80,14 @@ function ProgressBar(_ref) {
       }, props));
     });
   }
-  const ref = React.useRef();
+  const ref = React.useRef(null);
   useIsomorphicEffect["default"](() => {
-    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["default"].createElement("div", {
@@ -104,9 +106,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["default"].createElement("div", {
     className: `${prefix}--progress-bar__bar`,
     ref: ref

package/lib/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/lib/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 };

package/lib/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,179 @@
+/**
+ * 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';
+interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
+    /**
+     * Provide `<ProgressStep>` components to be rendered in the
+     * `<ProgressIndicator>`
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional className to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Optionally specify the current step array index
+     */
+    currentIndex?: number;
+    /**
+     * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+     */
+    onChange?: (data: number) => void;
+    /**
+     * Specify whether the progress steps should be split equally in size in the div
+     */
+    spaceEqually?: boolean;
+    /**
+     * Determines whether or not the ProgressIndicator should be rendered vertically.
+     */
+    vertical?: boolean;
+}
+declare function ProgressIndicator({ children, className: customClassName, currentIndex: controlledIndex, onChange, spaceEqually, vertical, ...rest }: ProgressIndicatorProps): JSX.Element;
+declare namespace ProgressIndicator {
+    var propTypes: {
+        /**
+         * Provide `<ProgressStep>` components to be rendered in the
+         * `<ProgressIndicator>`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional className to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Optionally specify the current step array index
+         */
+        currentIndex: PropTypes.Requireable<number>;
+        /**
+         * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify whether the progress steps should be split equally in size in the div
+         */
+        spaceEqually: PropTypes.Requireable<boolean>;
+        /**
+         * Determines whether or not the ProgressIndicator should be rendered vertically.
+         */
+        vertical: PropTypes.Requireable<boolean>;
+    };
+}
+interface ProgressStepProps {
+    /**
+     * Provide an optional className to be applied to the containing `<li>` node
+     */
+    className?: string;
+    /**
+     * Specify whether the step has been completed
+     */
+    complete?: boolean;
+    /**
+     * Specify whether the step is the current step
+     */
+    current?: boolean;
+    /**
+     * Provide a description for the `<ProgressStep>`
+     */
+    description?: string;
+    /**
+     * Specify whether the step is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Index of the current step within the ProgressIndicator
+     */
+    index?: number;
+    /**
+     * Specify whether the step is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the label for the `<ProgressStep>`
+     */
+    label: string;
+    /**
+     * A callback called if the step is clicked or the enter key is pressed
+     */
+    onClick?: (event: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Provide the props that describe a progress step tooltip
+     */
+    overflowTooltipProps?: object;
+    /**
+     * Provide an optional secondary label
+     */
+    secondaryLabel?: string;
+    /**
+     * The ID of the tooltip content.
+     */
+    tooltipId?: string;
+    /**
+     * Optional method that takes in a message id and returns an
+     * internationalized string.
+     */
+    translateWithId?: (id: string) => string;
+}
+declare function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t, ...rest }: ProgressStepProps): JSX.Element;
+declare namespace ProgressStep {
+    var propTypes: {
+        /**
+         * Provide an optional className to be applied to the containing `<li>` node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the step has been completed
+         */
+        complete: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the step is the current step
+         */
+        current: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a description for the `<ProgressStep>`
+         */
+        description: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the step is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Index of the current step within the ProgressIndicator
+         */
+        index: PropTypes.Requireable<number>;
+        /**
+         * Specify whether the step is invalid
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the label for the `<ProgressStep>`
+         */
+        label: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * A callback called if the step is clicked or the enter key is pressed
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide the props that describe a progress step tooltip
+         */
+        overflowTooltipProps: PropTypes.Requireable<object>;
+        /**
+         * Provide an optional secondary label
+         */
+        secondaryLabel: PropTypes.Requireable<string>;
+        /**
+         * The ID of the tooltip content.
+         */
+        tooltipId: PropTypes.Requireable<string>;
+        /**
+         * Optional method that takes in a message id and returns an
+         * internationalized string.
+         */
+        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export { ProgressIndicator, ProgressStep };

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -52,7 +52,7 @@ function ProgressIndicator(_ref) {
     [`${prefix}--progress`]: true,
     [`${prefix}--progress--vertical`]: vertical,
     [`${prefix}--progress--space-equal`]: spaceEqually && !vertical,
-    [customClassName]: customClassName
+    [customClassName ?? '']: customClassName
   });
   if (controlledIndex !== prevControlledIndex) {
     setCurrentIndex(controlledIndex);
@@ -140,15 +140,13 @@ function ProgressStep(_ref2) {
     [`${prefix}--progress-step--complete`]: complete,
     [`${prefix}--progress-step--incomplete`]: !complete && !current,
     [`${prefix}--progress-step--disabled`]: disabled,
-    [className]: className
+    [className ?? '']: className
   });
   const handleKeyDown = e => {
-    if (match.matches(e, [keys.Enter, keys.Space])) {
-      onClick();
+    if (match.matches(e, [keys.Enter, keys.Space]) && onClick) {
+      onClick(e);
     }
   };
-
-  // eslint-disable-next-line react/prop-types
   const SVGIcon = _ref3 => {
     let {
       complete,

package/lib/components/ProgressIndicator/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 ProgressIndicatorSkeleton } from './ProgressIndicator.Skeleton';
+export * from './ProgressIndicator';

package/lib/components/Search/Search.js

@@ -130,14 +130,15 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
     "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "aria-label": "button",
     "aria-labelledby": onExpand ? uniqueId : undefined,
-    role: onExpand ? 'button' : undefined,
+    role: "button",
     className: `${prefix}--search-magnifier`,
     onClick: onExpand,
     onKeyDown: handleExpandButtonKeyDown,
     tabIndex: onExpand && !isExpanded ? 0 : -1,
     ref: expandButtonRef,
-    "aria-expanded": onExpand && isExpanded ? true : undefined,
+    "aria-expanded": onExpand && isExpanded ? true : false,
     "aria-controls": onExpand ? uniqueId : undefined
   }, /*#__PURE__*/React__default["default"].createElement(CustomSearchIcon, {
     icon: renderIcon

package/lib/components/SecondaryButton/SecondaryButton.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 SecondaryButton: <T extends React.ElementType<any>>(props: ButtonProps<T>) => JSX.Element;
+export default SecondaryButton;

package/lib/components/SecondaryButton/SecondaryButton.js

@@ -21,6 +21,5 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const SecondaryButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
   kind: "secondary"
 }, props));
-var SecondaryButton$1 = SecondaryButton;
 
-exports["default"] = SecondaryButton$1;
+exports["default"] = SecondaryButton;

package/lib/components/SecondaryButton/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 SecondaryButton from './SecondaryButton';
+export default SecondaryButton;
+export { SecondaryButton };

package/lib/components/SkeletonIcon/SkeletonIcon.js

@@ -44,6 +44,5 @@ SkeletonIcon.propTypes = {
    */
   style: PropTypes__default["default"].object
 };
-var SkeletonIcon$1 = SkeletonIcon;
 
-exports["default"] = SkeletonIcon$1;
+exports["default"] = SkeletonIcon;

package/lib/components/SkeletonIcon/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 SkeletonIcon from './SkeletonIcon';
+export default SkeletonIcon;
+export { SkeletonIcon };

package/lib/components/Slider/Slider.Skeleton.js

@@ -88,7 +88,6 @@ SliderSkeleton.propTypes = {
    */
   twoHandles: PropTypes__default["default"].bool
 };
-var SliderSkeleton$1 = SliderSkeleton;
 
 exports.SliderSkeleton = SliderSkeleton;
-exports["default"] = SliderSkeleton$1;
+exports["default"] = SliderSkeleton;

package/lib/components/Slider/Slider.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, { KeyboardEventHandler, PureComponent } from 'react';
+import React, { type KeyboardEventHandler, PureComponent } from 'react';
 import PropTypes, { ReactNodeLike } from 'prop-types';
 /**
  * Distinguish two handles by lower and upper positions.

package/lib/components/Slider/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" />
+declare const Slider: import("react").FunctionComponent<import("./Slider").SliderProps>;
+export { default as SliderSkeleton } from './Slider.Skeleton';
+export default Slider;
+export { Slider };