@carbon/react 1.31.3 → 1.32.0-rc.0

package/README.md

@@ -58,7 +58,7 @@ styles from the project or include the styles for a specific component:
 // Bring in all the styles for Carbon
 @use '@carbon/react';
 
-// Preferred: bring in the styles for one component
+// Or bring in the styles for just one component
 @use '@carbon/react/scss/components/button';
 ```
 

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

@@ -0,0 +1,64 @@
+/**
+ * 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 AccordionSkeletonProps {
+    /**
+     * Specify the alignment of the accordion heading
+     * title and chevron.
+     */
+    align?: 'start' | 'end';
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Set number of items to render.
+     */
+    count?: number;
+    /**
+     * Specify whether an individual AccordionItem should
+     * be flush, default is false.
+     */
+    isFlush?: boolean;
+    /**
+     * `false` to not display the first item opened.
+     */
+    open?: boolean;
+}
+declare function AccordionSkeleton({ align, className, count, isFlush, open, ...rest }: AccordionSkeletonProps): JSX.Element;
+declare namespace AccordionSkeleton {
+    var propTypes: {
+        /**
+         * Specify the alignment of the accordion heading title and chevron.
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Set number of items to render
+         */
+        count: PropTypes.Requireable<number>;
+        /**
+         * Specify whether an individual AccordionItem should be flush, default is false
+         */
+        isFlush: PropTypes.Requireable<boolean>;
+        /**
+         * `false` to not display the first item opened
+         */
+        open: PropTypes.Requireable<boolean>;
+    };
+    var defaultProps: {
+        open: boolean;
+        count: number;
+        align: string;
+    };
+}
+export default AccordionSkeleton;
+export { AccordionSkeleton };

package/es/components/Accordion/Accordion.Skeleton.js

@@ -16,11 +16,11 @@ import { usePrefix } from '../../internal/usePrefix.js';
 var _SkeletonText, _SkeletonText2, _SkeletonText3;
 function AccordionSkeleton(_ref) {
   let {
-    align,
+    align = 'end',
     className,
-    count,
+    count = 4,
     isFlush,
-    open,
+    open = true,
     ...rest
   } = _ref;
   const prefix = usePrefix();

package/es/components/Accordion/Accordion.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 { PropsWithChildren } from 'react';
+interface AccordionProps {
+    /**
+     * Specify the alignment of the accordion heading
+     * title and chevron. Defaults to `end`.
+     */
+    align?: 'start' | 'end';
+    /**
+     * Specify an optional className to be applied to
+     * the container node.
+     */
+    className?: string;
+    /**
+     * Specify whether an individual AccordionItem
+     * should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether Accordion text should be flush,
+     * default is `false`, does not work with `align="start"`.
+     */
+    isFlush?: boolean;
+    /**
+     * Specify the size of the Accordion. Currently
+     * supports the following: `sm`, `md`, `lg`
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare function Accordion({ align, children, className: customClassName, disabled, isFlush, size, ...rest }: PropsWithChildren<AccordionProps>): JSX.Element;
+declare namespace Accordion {
+    var propTypes: {
+        /**
+         * Specify the alignment of the accordion heading title and chevron.
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Pass in the children that will be rendered within the Accordion
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether an individual AccordionItem should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether Accordion text should be flush, default is false, does not work with align="start"
+         */
+        isFlush: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the size of the Accordion. Currently supports the following:
+         */
+        size: PropTypes.Requireable<string>;
+    };
+}
+export default Accordion;

package/es/components/Accordion/Accordion.js

@@ -10,6 +10,7 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
+import { AccordionProvider } from './AccordionProvider.js';
 
 function Accordion(_ref) {
   let {
@@ -29,13 +30,11 @@ function Accordion(_ref) {
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
-  return /*#__PURE__*/React__default.createElement("ul", _extends({
+  return /*#__PURE__*/React__default.createElement(AccordionProvider, {
+    disabled: disabled
+  }, /*#__PURE__*/React__default.createElement("ul", _extends({
     className: className
-  }, rest), disabled ? React__default.Children.toArray(children).map(child => {
-    return /*#__PURE__*/React__default.cloneElement(child, {
-      disabled
-    });
-  }) : children);
+  }, rest), children));
 }
 Accordion.propTypes = {
   /**

package/es/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,105 @@
+import PropTypes from 'prop-types';
+import { AnimationEventHandler, AriaAttributes, KeyboardEvent, MouseEventHandler, PropsWithChildren, ReactElement, ReactNode } from 'react';
+interface AccordionItemProps {
+    /**
+     * Specify an optional className to be
+     * applied to the container node.
+     */
+    className?: string;
+    /**
+     * Specify whether an individual `AccordionItem` should
+     * be disabled (overrides the parent accordion state). If undefined,
+     * this value will be managed by the parent Accordion.
+     */
+    disabled?: boolean;
+    /**
+     * The handler of the massaged `click` event.
+     */
+    onClick?: MouseEventHandler<HTMLLIElement>;
+    /**
+     * The handler of the massaged `click` event on
+     * the heading.
+     */
+    onHeadingClick?: ({ isOpen, event, }: {
+        isOpen: boolean;
+        event: Parameters<MouseEventHandler<HTMLButtonElement>>[0];
+    }) => void;
+    /**
+     * `true` to open the expand.
+     */
+    open?: boolean;
+    /**
+     * @deprecated This prop has been deprecated and will be
+     * removed in the next major release of Carbon. Use the
+     * `renderToggle` prop instead.
+     */
+    renderExpando?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
+    /**
+     * The callback function to render the expand button.
+     * Can be a React component class.
+     */
+    renderToggle?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
+    /**
+     * The accordion title.
+     */
+    title?: ReactNode;
+    /**
+     * The callback function to run on the `onAnimationEnd`
+     * event for the list item.
+     */
+    handleAnimationEnd?: AnimationEventHandler<HTMLLIElement>;
+}
+interface AccordionToggleProps {
+    'aria-controls'?: AriaAttributes['aria-controls'];
+    'aria-expanded'?: AriaAttributes['aria-expanded'];
+    className?: string;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    type?: 'button';
+}
+declare function AccordionItem({ children, className: customClassName, open, onHeadingClick, renderExpando, // remove renderExpando in next major release
+renderToggle, title, disabled: controlledDisabled, handleAnimationEnd, ...rest }: PropsWithChildren<AccordionItemProps>): JSX.Element;
+declare namespace AccordionItem {
+    var propTypes: {
+        /**
+         * Provide the contents of your AccordionItem
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether an individual AccordionItem should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * The handler of the massaged `click` event.
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The handler of the massaged `click` event on the heading.
+         */
+        onHeadingClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `true` to open the expand.
+         */
+        open: PropTypes.Requireable<boolean>;
+        /**
+         * The callback function to render the expand button.
+         * Can be a React component class.
+         */
+        renderExpando: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * The callback function to render the expand button.
+         * Can be a React component class.
+         */
+        renderToggle: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The accordion title.
+         */
+        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+}
+export default AccordionItem;

package/es/components/Accordion/AccordionItem.js

@@ -9,11 +9,12 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { ChevronRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState } from 'react';
+import React__default, { useState, useContext } from 'react';
 import '../Text/index.js';
 import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { AccordionContext } from './AccordionProvider.js';
 import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
@@ -24,21 +25,23 @@ const defaultRenderToggle = props => /*#__PURE__*/React__default.createElement("
 function AccordionItem(_ref) {
   let {
     children,
-    className: customClassName,
-    iconDescription,
-    // eslint-disable-line
+    className: customClassName = '',
     open = false,
     onHeadingClick,
     renderExpando = defaultRenderToggle,
     // remove renderExpando in next major release
     renderToggle,
     title = 'title',
-    disabled,
+    disabled: controlledDisabled,
+    handleAnimationEnd,
     ...rest
   } = _ref;
   const [isOpen, setIsOpen] = useState(open);
   const [prevIsOpen, setPrevIsOpen] = useState(open);
   const [animation, setAnimation] = useState('');
+  const accordionState = useContext(AccordionContext);
+  const disabledIsControlled = typeof controlledDisabled === 'boolean';
+  const disabled = disabledIsControlled ? controlledDisabled : accordionState.disabled;
   const id = useId('accordion-item');
   const prefix = usePrefix();
   const className = cx({
@@ -78,16 +81,16 @@ function AccordionItem(_ref) {
       setIsOpen(false);
     }
   }
-  function handleAnimationEnd(event) {
-    if (rest.handleAnimationEnd) {
-      rest.handleAnimationEnd(event);
+  function onAnimationEnd(event) {
+    if (handleAnimationEnd) {
+      handleAnimationEnd(event);
     }
     setAnimation('');
   }
   return /*#__PURE__*/React__default.createElement("li", _extends({
     className: className
   }, rest, {
-    onAnimationEnd: handleAnimationEnd
+    onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default.createElement(Toggle, {
     disabled: disabled,
     "aria-controls": id,

package/es/components/Accordion/AccordionProvider.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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, { PropsWithChildren } from 'react';
+type AccordionProviderProp = {
+    /**
+     * Global setting to disable all AccordionItems
+     * within the Accordion. Individual AccordionItems can be
+     * disabled by passing the `disabled` prop to the AccordionItem.
+     */
+    disabled: boolean;
+};
+export declare const AccordionContext: React.Context<{
+    disabled: boolean;
+}>;
+export declare const AccordionProvider: ({ disabled, children, }: PropsWithChildren<AccordionProviderProp>) => JSX.Element;
+export {};

package/es/components/Accordion/AccordionProvider.js

@@ -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 React__default, { createContext } from 'react';
+
+const AccordionContext = /*#__PURE__*/createContext({
+  disabled: false
+});
+const AccordionProvider = _ref => {
+  let {
+    disabled,
+    children
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(AccordionContext.Provider, {
+    value: {
+      disabled
+    }
+  }, children);
+};
+
+export { AccordionContext, AccordionProvider };

package/es/components/Accordion/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.
+ */
+import Accordion from './Accordion';
+export default Accordion;
+export { Accordion };
+export { default as AccordionItem } from './AccordionItem';
+export { default as AccordionSkeleton } from './Accordion.Skeleton';

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

@@ -0,0 +1,28 @@
+/**
+ * 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 { ButtonSize } from './Button';
+export interface ButtonSkeletonProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Optionally specify an href for your Button to become an `<a>` element
+     */
+    href?: string;
+    /**
+     * Specify the size of the button, from a list of available sizes.
+     */
+    size?: ButtonSize;
+    /**
+     * @deprecated This property will be removed in the next major Carbon version,
+     * use size={sm} instead.
+     *
+     * Specify whether the Button should be a small variant
+     */
+    small?: boolean;
+}
+declare const ButtonSkeleton: React.FC<ButtonSkeletonProps>;
+export default ButtonSkeleton;
+export { ButtonSkeleton };

package/es/components/Button/Button.Skeleton.js

@@ -24,7 +24,7 @@ const ButtonSkeleton = _ref => {
     [`${prefix}--skeleton`]: true,
     [`${prefix}--btn`]: true,
     [`${prefix}--btn--sm`]: small || size === 'sm',
-    [`${prefix}--btn--md`]: size === 'field' || size === 'md',
+    [`${prefix}--btn--md`]: size === 'md',
     [`${prefix}--btn--lg`]: size === 'lg',
     [`${prefix}--btn--xl`]: size === 'xl',
     [`${prefix}--btn--2xl`]: size === '2xl'
@@ -57,10 +57,12 @@ ButtonSkeleton.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
   /**
+   * @deprecated This property will be removed in the next major Carbon version,
+   * use size={sm} instead.
+   *
    * Specify whether the Button should be a small variant
    */
   small: PropTypes.bool
 };
-var ButtonSkeleton$1 = ButtonSkeleton;
 
-export { ButtonSkeleton, ButtonSkeleton$1 as default };
+export { ButtonSkeleton, ButtonSkeleton as default };

package/es/components/Button/Button.d.ts

@@ -0,0 +1,72 @@
+/**
+ * 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 { PolymorphicProps } from '../../types/common';
+export declare const ButtonKinds: readonly ["primary", "secondary", "danger", "ghost", "danger--primary", "danger--ghost", "danger--tertiary", "tertiary"];
+export type ButtonKind = (typeof ButtonKinds)[number];
+export declare const ButtonSizes: readonly ["sm", "md", "lg", "xl", "2xl"];
+export type ButtonSize = (typeof ButtonSizes)[number];
+export declare const ButtonTooltipAlignments: readonly ["start", "center", "end"];
+export type ButtonTooltipAlignment = (typeof ButtonTooltipAlignments)[number];
+export declare const ButtonTooltipPositions: string[];
+export type ButtonTooltipPosition = (typeof ButtonTooltipPositions)[number];
+interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Specify the message read by screen readers for the danger button variant
+     */
+    dangerDescription?: string;
+    /**
+     * Specify if the button is an icon-only button
+     */
+    hasIconOnly?: boolean;
+    /**
+     * Optionally specify an href for your Button to become an `<a>` element
+     */
+    href?: string;
+    /**
+     * If specifying the `renderIcon` prop, provide a description for that icon that can
+     * be read by screen readers
+     */
+    iconDescription?: string;
+    /**
+     * Specify whether the Button is expressive, or not
+     */
+    isExpressive?: boolean;
+    /**
+     * Specify whether the Button is currently selected. Only applies to the Ghost variant.
+     */
+    isSelected?: boolean;
+    /**
+     * Specify the kind of Button you want to create
+     */
+    kind?: ButtonKind;
+    /**
+     * Optional prop to allow overriding the icon rendering.
+     * Can be a React component class
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify the size of the button, from the following list of sizes:
+     */
+    size?: ButtonSize;
+    /**
+     * Specify the alignment of the tooltip to the icon-only button.
+     * Can be one of: start, center, or end.
+     */
+    tooltipAlignment?: ButtonTooltipAlignment;
+    /**
+     * Specify the direction of the tooltip for icon-only buttons.
+     * Can be either top, right, bottom, or left.
+     */
+    tooltipPosition?: ButtonTooltipPosition;
+}
+export type ButtonProps<T extends React.ElementType> = PolymorphicProps<T, ButtonBaseProps>;
+export interface ButtonComponent {
+    <T extends React.ElementType>(props: ButtonProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+declare const _default: ButtonComponent;
+export default _default;

package/es/components/Button/Button.js

@@ -9,12 +9,15 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default, { useRef } from 'react';
 import cx from 'classnames';
-import { ButtonKinds } from '../../prop-types/types.js';
 import { IconButton } from '../IconButton/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 
+const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary', 'danger--ghost', 'danger--tertiary', 'tertiary'];
+const ButtonSizes = ['sm', 'md', 'lg', 'xl', '2xl'];
+const ButtonTooltipAlignments = ['start', 'center', 'end'];
+const ButtonTooltipPositions = ['top', 'right', 'bottom', 'left'];
 const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
   let {
     as,
@@ -81,23 +84,24 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
   const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
   let component = 'button';
   const assistiveId = useId('danger-description');
+  const {
+    'aria-pressed': ariaPressed
+  } = rest;
   let otherProps = {
     disabled,
     type,
-    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : null,
-    'aria-pressed': rest['aria-pressed'] ?? (hasIconOnly && kind === 'ghost' ? isSelected : null)
+    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : undefined,
+    'aria-pressed': ariaPressed ?? (hasIconOnly && kind === 'ghost' ? isSelected : undefined)
   };
   const anchorProps = {
     href
   };
-  let assistiveText;
+  let assistiveText = null;
   if (dangerButtonVariants.includes(kind)) {
     assistiveText = /*#__PURE__*/React__default.createElement("span", {
       id: assistiveId,
       className: `${prefix}--visually-hidden`
     }, dangerDescription);
-  } else {
-    assistiveText = null;
   }
   if (as) {
     component = as;
@@ -120,7 +124,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     ...otherProps
   }, assistiveText, children, buttonImage);
   if (hasIconOnly) {
-    let align;
+    let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
       if (tooltipAlignment === 'center') {
         align = tooltipPosition;
@@ -189,7 +193,7 @@ Button.propTypes = {
     if (props.renderIcon && !props.children && !props.iconDescription) {
       return new Error('renderIcon property specified without also providing an iconDescription property.');
     }
-    return undefined;
+    return null;
   },
   /**
    * Specify whether the Button is expressive, or not
@@ -260,6 +264,5 @@ Button.propTypes = {
    */
   type: PropTypes.oneOf(['button', 'reset', 'submit'])
 };
-var Button$1 = Button;
 
-export { Button$1 as default };
+export { ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions, Button as default };

package/es/components/Button/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.
+ */
+import Button from './Button';
+export default Button;
+export { Button };
+export * from './Button';
+export { default as ButtonSkeleton } from './Button.Skeleton';

package/es/components/Button/index.js

@@ -6,4 +6,5 @@
  */
 
 import Button from './Button.js';
-export { default as Button, default } from './Button.js';
+export { default as Button, ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions, default } from './Button.js';
+export { default as ButtonSkeleton } from './Button.Skeleton.js';

package/es/components/ButtonSet/ButtonSet.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 { ForwardRefReturn } from '../../types/common';
+export interface ButtonSetProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the button arrangement of the set (vertically stacked or
+     * horizontal)
+     */
+    stacked?: boolean;
+}
+declare const ButtonSet: ForwardRefReturn<HTMLDivElement, ButtonSetProps>;
+export default ButtonSet;

package/es/components/ButtonSet/ButtonSet.js

@@ -43,6 +43,5 @@ ButtonSet.propTypes = {
    */
   stacked: PropTypes.bool
 };
-var ButtonSet$1 = ButtonSet;
 
-export { ButtonSet$1 as default };
+export { ButtonSet as default };

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