@carbon/react 1.31.2 → 1.32.0-rc.0

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;
+    };
+}

package/lib/components/Notification/Notification.js

@@ -16,6 +16,7 @@ var deprecate = require('../../prop-types/deprecate.js');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -86,9 +87,16 @@ NotificationActionButton.propTypes = {
    */
   onClick: PropTypes__default["default"].func
 };
+
+/**
+ * NotificationButton
+ * ==================
+ */
+
 function NotificationButton(_ref2) {
   let {
-    ['aria-label']: ariaLabel,
+    'aria-label': ariaLabel,
+    // @ts-expect-error: deprecated prop
     ariaLabel: deprecatedAriaLabel,
     className,
     type,
@@ -154,6 +162,12 @@ NotificationButton.defaultProps = {
   type: 'button',
   renderIcon: iconsReact.Close
 };
+
+/**
+ * NotificationIcon
+ * ================
+ */
+
 const iconTypes = {
   error: iconsReact.ErrorFilled,
   success: iconsReact.CheckmarkFilled,
@@ -183,9 +197,16 @@ NotificationIcon.propTypes = {
   kind: PropTypes__default["default"].oneOf(['error', 'success', 'warning', 'warning-alt', 'info', 'info-square']).isRequired,
   notificationType: PropTypes__default["default"].oneOf(['inline', 'toast']).isRequired
 };
+
+/**
+ * ToastNotification
+ * =================
+ */
+
 function ToastNotification(_ref4) {
   let {
     ['aria-label']: ariaLabel,
+    // @ts-expect-error: deprecated prop
     ariaLabel: deprecatedAriaLabel,
     role,
     onClose,
@@ -265,7 +286,7 @@ function ToastNotification(_ref4) {
     onClick: handleCloseButtonClick,
     "aria-hidden": "true",
     "aria-label": deprecatedAriaLabel || ariaLabel,
-    tabIndex: "-1"
+    tabIndex: -1
   }));
 }
 ToastNotification.propTypes = {
@@ -320,7 +341,7 @@ ToastNotification.propTypes = {
    */
   statusIconDescription: PropTypes__default["default"].string,
   /**
-   * Specify the sub-title
+   * Specify the subtitle
    */
   subtitle: PropTypes__default["default"].string,
   /**
@@ -339,6 +360,12 @@ ToastNotification.defaultProps = {
   hideCloseButton: false,
   timeout: 0
 };
+
+/**
+ * InlineNotification
+ * ==================
+ */
+
 function InlineNotification(_ref5) {
   let {
     ['aria-label']: ariaLabel,
@@ -401,7 +428,7 @@ function InlineNotification(_ref5) {
     onClick: handleCloseButtonClick,
     "aria-hidden": "true",
     "aria-label": ariaLabel,
-    tabIndex: "-1"
+    tabIndex: -1
   }));
 }
 InlineNotification.propTypes = {
@@ -447,7 +474,7 @@ InlineNotification.propTypes = {
    */
   statusIconDescription: PropTypes__default["default"].string,
   /**
-   * Specify the sub-title
+   * Specify the subtitle
    */
   subtitle: PropTypes__default["default"].string,
   /**
@@ -461,10 +488,17 @@ InlineNotification.defaultProps = {
   onCloseButtonClick: () => {},
   hideCloseButton: false
 };
+
+/**
+ * ActionableNotification
+ * ======================
+ */
+
 function ActionableNotification(_ref6) {
   let {
     actionButtonLabel,
     ['aria-label']: ariaLabel,
+    // @ts-expect-error: deprecated prop
     ariaLabel: deprecatedAriaLabel,
     children,
     role,
@@ -609,7 +643,7 @@ ActionableNotification.propTypes = {
    */
   statusIconDescription: PropTypes__default["default"].string,
   /**
-   * Specify the sub-title
+   * Specify the subtitle
    */
   subtitle: PropTypes__default["default"].string,
   /**

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

@@ -0,0 +1,7 @@
+/**
+ * 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 { NotificationActionButton, type NotificationActionButtonProps, NotificationButton, type NotificationButtonProps, ToastNotification, type ToastNotificationProps, InlineNotification, type InlineNotificationProps, ActionableNotification, type ActionableNotificationProps, } from './Notification';

package/lib/components/PrimaryButton/PrimaryButton.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/SecondaryButton/SecondaryButton.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }