@carbon/react 1.31.3 → 1.32.0

package/lib/components/Link/Link.d.ts

@@ -4,8 +4,8 @@
  * 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, { AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
-interface LinkProps {
+import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
      * @description Indicates the element that represents the
      *   current item within a container or set of related

package/lib/components/Link/Link.js

@@ -44,7 +44,8 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_re
   const rel = target === '_blank' ? 'noopener' : undefined;
   const linkProps = {
     className,
-    rel
+    rel,
+    target
   };
 
   // Reference for disabled links:

package/lib/components/MenuButton/index.js

@@ -15,6 +15,7 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var Menu = require('../Menu/Menu.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');

package/lib/components/Modal/Modal.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var toggleClass = require('../../tools/toggleClass.js');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');

package/lib/components/ModalWrapper/ModalWrapper.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 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');
 

package/lib/components/Notification/Notification.d.ts

@@ -0,0 +1,531 @@
+/**
+ * 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 { type ReactNode, type MouseEvent, type ComponentType, type FunctionComponent, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import { type ButtonProps } from '../Button';
+export interface NotificationActionButtonProps extends ButtonProps<'button'> {
+    /**
+     * Specify the content of the notification action button.
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the notification action button
+     */
+    className?: string;
+    /**
+     * Specify if the visual treatment of the button should be for an inline notification
+     */
+    inline?: boolean;
+    /**
+     * Optionally specify a click handler for the notification action button.
+     */
+    onClick?(): void;
+}
+export declare function NotificationActionButton({ children, className: customClassName, onClick, inline, ...rest }: NotificationActionButtonProps): JSX.Element;
+export declare namespace NotificationActionButton {
+    var propTypes: {
+        /**
+         * Specify the content of the notification action button.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the notification action button
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the visual treatment of the button should be for an inline notification
+         */
+        inline: PropTypes.Requireable<boolean>;
+        /**
+         * Optionally specify a click handler for the notification action button.
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+/**
+ * NotificationButton
+ * ==================
+ */
+export interface NotificationButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Specify an optional icon for the Button through a string,
+     * if provided. However, regular "close" icon is preferred.
+     */
+    name?: string;
+    /**
+     * Specify the notification type
+     */
+    notificationType?: 'toast' | 'inline' | 'actionable';
+    /**
+     * Optional prop to allow overriding the icon rendering.
+     * Can be a React component class
+     */
+    renderIcon?: ComponentType<{
+        className?: string;
+        name?: string;
+    }> | FunctionComponent<{
+        className?: string;
+        name?: string;
+    }>;
+}
+export declare function NotificationButton({ 'aria-label': ariaLabel, ariaLabel: deprecatedAriaLabel, className, type, renderIcon: IconTag, name, notificationType, ...rest }: NotificationButtonProps): JSX.Element;
+export declare namespace NotificationButton {
+    var propTypes: {
+        /**
+         * Specify a label to be read by screen readers on the container node
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Specify a label to be read by screen readers on the container note.
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Specify an optional className to be applied to the notification button
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify an optional icon for the Button through a string,
+         * if something but regular "close" icon is desirable
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Specify the notification type
+         */
+        notificationType: PropTypes.Requireable<string>;
+        /**
+         * Optional prop to allow overriding the icon rendering.
+         * Can be a React component class
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Optional prop to specify the type of the Button
+         */
+        type: PropTypes.Requireable<string>;
+    };
+    var defaultProps: {
+        "aria-label": string;
+        notificationType: string;
+        type: string;
+        renderIcon: any;
+    };
+}
+export interface NotificationIconProps {
+    iconDescription: string;
+    kind: 'error' | 'success' | 'warning' | 'warning-alt' | 'info' | 'info-square';
+    notificationType: 'inline' | 'toast';
+}
+/**
+ * ToastNotification
+ * =================
+ */
+export interface ToastNotificationProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Provide a description for "close" icon button that can be read by screen readers
+     */
+    'aria-label'?: string;
+    /**
+     * Specify the caption
+     */
+    caption?: string;
+    /**
+     * Specify the content
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the notification box
+     */
+    className?: string;
+    /**
+     * Specify the close button should be disabled, or not
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Specify what state the notification represents
+     */
+    kind: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
+    /**
+     * Specify whether you are using the low contrast variant of the ToastNotification.
+     */
+    lowContrast?: boolean;
+    /**
+     * Provide a function that is called when menu is closed
+     */
+    onClose?(event: MouseEvent): boolean | void;
+    /**
+     * Provide a function that is called when the close button is clicked
+     */
+    onCloseButtonClick(event: MouseEvent): void;
+    /**
+     * By default, this value is "status". You can also provide an alternate
+     * role if it makes sense from the accessibility-side
+     */
+    role: 'alert' | 'log' | 'status';
+    /**
+     * Provide a description for "status" icon that can be read by screen readers
+     */
+    statusIconDescription?: string;
+    /**
+     * Specify the subtitle
+     */
+    subtitle?: string;
+    /**
+     * Specify an optional duration the notification should be closed in
+     */
+    timeout?: number;
+    /**
+     * Specify the title
+     */
+    title?: string;
+}
+export declare function ToastNotification({ ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, role, onClose, onCloseButtonClick, statusIconDescription, className, children, kind, lowContrast, hideCloseButton, timeout, title, caption, subtitle, ...rest }: ToastNotificationProps): JSX.Element | null;
+export declare namespace ToastNotification {
+    var propTypes: {
+        /**
+         * Provide a description for "close" icon button that can be read by screen readers
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Provide a description for "close" icon button that can be read by screen readers
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Specify the caption
+         */
+        caption: PropTypes.Requireable<string>;
+        /**
+         * Specify the content
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the notification box
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the close button should be disabled, or not
+         */
+        hideCloseButton: PropTypes.Requireable<boolean>;
+        /**
+         * Specify what state the notification represents
+         */
+        kind: PropTypes.Requireable<string>;
+        /**
+         * Specify whether you are using the low contrast variant of the ToastNotification.
+         */
+        lowContrast: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a function that is called when menu is closed
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a function that is called when the close button is clicked
+         */
+        onCloseButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * By default, this value is "status". You can also provide an alternate
+         * role if it makes sense from the accessibility-side
+         */
+        role: PropTypes.Requireable<string>;
+        /**
+         * Provide a description for "status" icon that can be read by screen readers
+         */
+        statusIconDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify the subtitle
+         */
+        subtitle: PropTypes.Requireable<string>;
+        /**
+         * Specify an optional duration the notification should be closed in
+         */
+        timeout: PropTypes.Requireable<number>;
+        /**
+         * Specify the title
+         */
+        title: PropTypes.Requireable<string>;
+    };
+    var defaultProps: {
+        kind: string;
+        role: string;
+        onCloseButtonClick: () => void;
+        hideCloseButton: boolean;
+        timeout: number;
+    };
+}
+/**
+ * InlineNotification
+ * ==================
+ */
+export interface InlineNotificationProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Provide a description for "close" icon button that can be read by screen readers
+     */
+    'aria-label'?: string;
+    /**
+     * Specify the content
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the notification box
+     */
+    className?: string;
+    /**
+     * Specify the close button should be disabled, or not
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Specify what state the notification represents
+     */
+    kind: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
+    /**
+     * Specify whether you are using the low contrast variant of the InlineNotification.
+     */
+    lowContrast?: boolean;
+    /**
+     * Provide a function that is called when menu is closed
+     */
+    onClose?(event: MouseEvent): boolean | void;
+    /**
+     * Provide a function that is called when the close button is clicked
+     */
+    onCloseButtonClick(event: MouseEvent): void;
+    /**
+     * By default, this value is "status". You can also provide an alternate
+     * role if it makes sense from the accessibility-side.
+     */
+    role: 'alert' | 'log' | 'status';
+    /**
+     * Provide a description for "status" icon that can be read by screen readers
+     */
+    statusIconDescription?: string;
+    /**
+     * Specify the subtitle
+     */
+    subtitle?: string;
+    /**
+     * Specify the title
+     */
+    title?: string;
+}
+export declare function InlineNotification({ ['aria-label']: ariaLabel, children, title, subtitle, role, onClose, onCloseButtonClick, statusIconDescription, className, kind, lowContrast, hideCloseButton, ...rest }: InlineNotificationProps): JSX.Element | null;
+export declare namespace InlineNotification {
+    var propTypes: {
+        /**
+         * Provide a description for "close" icon button that can be read by screen readers
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Specify the content
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the notification box
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the close button should be disabled, or not
+         */
+        hideCloseButton: PropTypes.Requireable<boolean>;
+        /**
+         * Specify what state the notification represents
+         */
+        kind: PropTypes.Requireable<string>;
+        /**
+         * Specify whether you are using the low contrast variant of the InlineNotification.
+         */
+        lowContrast: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a function that is called when menu is closed
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a function that is called when the close button is clicked
+         */
+        onCloseButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * By default, this value is "status". You can also provide an alternate
+         * role if it makes sense from the accessibility-side.
+         */
+        role: PropTypes.Requireable<string>;
+        /**
+         * Provide a description for "status" icon that can be read by screen readers
+         */
+        statusIconDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify the subtitle
+         */
+        subtitle: PropTypes.Requireable<string>;
+        /**
+         * Specify the title
+         */
+        title: PropTypes.Requireable<string>;
+    };
+    var defaultProps: {
+        kind: string;
+        role: string;
+        onCloseButtonClick: () => void;
+        hideCloseButton: boolean;
+    };
+}
+/**
+ * ActionableNotification
+ * ======================
+ */
+export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pass in the action button label that will be rendered within the ActionableNotification.
+     */
+    actionButtonLabel: string;
+    /**
+     * Provide a description for "close" icon button that can be read by screen readers
+     */
+    'aria-label'?: string;
+    /**
+     * Specify the content
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the notification box
+     */
+    className?: string;
+    /**
+     * Specify if pressing the escape key should close notifications
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Specify if focus should be moved to the component when the notification contains actions
+     */
+    hasFocus?: boolean;
+    /**
+     * Specify the close button should be disabled, or not
+     */
+    hideCloseButton?: boolean;
+    inline?: boolean;
+    /**
+     * Specify what state the notification represents
+     */
+    kind: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
+    /**
+     * Specify whether you are using the low contrast variant of the ActionableNotification.
+     */
+    lowContrast?: boolean;
+    /**
+     * Provide a function that is called when the action is clicked
+     */
+    onActionButtonClick?(): void;
+    /**
+     * Provide a function that is called when menu is closed.
+     * Default behavior of hiding the notification is prevented if this function returns false.
+     */
+    onClose?(event: MouseEvent): boolean | void;
+    /**
+     * Provide a function that is called when the close button is clicked
+     */
+    onCloseButtonClick(event: MouseEvent): void;
+    /**
+     * By default, this value is "alertdialog". You can also provide an alternate
+     * role if it makes sense from from an accessibility perspective.
+     */
+    role?: string;
+    /**
+     * Provide a description for "status" icon that can be read by screen readers
+     */
+    statusIconDescription?: string;
+    /**
+     * Specify the subtitle
+     */
+    subtitle?: string;
+    /**
+     * Specify the title
+     */
+    title?: string;
+}
+export declare function ActionableNotification({ actionButtonLabel, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, children, role, onActionButtonClick, onClose, onCloseButtonClick, statusIconDescription, className, inline, kind, lowContrast, hideCloseButton, hasFocus, closeOnEscape, title, subtitle, ...rest }: ActionableNotificationProps): JSX.Element | null;
+export declare namespace ActionableNotification {
+    var propTypes: {
+        /**
+         * Pass in the action button label that will be rendered within the ActionableNotification.
+         */
+        actionButtonLabel: PropTypes.Validator<string>;
+        /**
+         * Provide a description for "close" icon button that can be read by screen readers
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Provide a description for "close" icon button that can be read by screen readers
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Specify the content
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the notification box
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if pressing the escape key should close notifications
+         */
+        closeOnEscape: PropTypes.Requireable<boolean>;
+        /**
+         * Specify if focus should be moved to the component when the notification contains actions
+         */
+        hasFocus: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the close button should be disabled, or not
+         */
+        hideCloseButton: PropTypes.Requireable<boolean>;
+        inline: PropTypes.Requireable<boolean>;
+        /**
+         * Specify what state the notification represents
+         */
+        kind: PropTypes.Validator<string>;
+        /**
+         * Specify whether you are using the low contrast variant of the ActionableNotification.
+         */
+        lowContrast: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a function that is called when the action is clicked
+         */
+        onActionButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a function that is called when menu is closed
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a function that is called when the close button is clicked
+         */
+        onCloseButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * By default, this value is "alertdialog". You can also provide an alternate
+         * role if it makes sense from the accessibility-side.
+         */
+        role: PropTypes.Requireable<string>;
+        /**
+         * Provide a description for "status" icon that can be read by screen readers
+         */
+        statusIconDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify the subtitle
+         */
+        subtitle: PropTypes.Requireable<string>;
+        /**
+         * Specify the title
+         */
+        title: PropTypes.Requireable<string>;
+    };
+    var defaultProps: {
+        kind: string;
+        role: string;
+        onCloseButtonClick: () => void;
+        hideCloseButton: boolean;
+        hasFocus: boolean;
+        closeOnEscape: boolean;
+        inline: boolean;
+    };
+}