@carbon/react 1.31.3 → 1.32.0

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

@@ -14,6 +14,7 @@ var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var PropTypes = require('prop-types');
 var React = require('react');
+var AccordionProvider = require('./AccordionProvider.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,13 +40,11 @@ function Accordion(_ref) {
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
-  return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__default["default"].createElement(AccordionProvider.AccordionProvider, {
+    disabled: disabled
+  }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
     className: className
-  }, rest), disabled ? React__default["default"].Children.toArray(children).map(child => {
-    return /*#__PURE__*/React__default["default"].cloneElement(child, {
-      disabled
-    });
-  }) : children);
+  }, rest), children));
 }
 Accordion.propTypes = {
   /**

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

@@ -18,6 +18,7 @@ require('../Text/index.js');
 var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var AccordionProvider = require('./AccordionProvider.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -34,21 +35,23 @@ const defaultRenderToggle = props => /*#__PURE__*/React__default["default"].crea
 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] = React.useState(open);
   const [prevIsOpen, setPrevIsOpen] = React.useState(open);
   const [animation, setAnimation] = React.useState('');
+  const accordionState = React.useContext(AccordionProvider.AccordionContext);
+  const disabledIsControlled = typeof controlledDisabled === 'boolean';
+  const disabled = disabledIsControlled ? controlledDisabled : accordionState.disabled;
   const id = useId.useId('accordion-item');
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
@@ -88,16 +91,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["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest, {
-    onAnimationEnd: handleAnimationEnd
+    onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default["default"].createElement(Toggle, {
     disabled: disabled,
     "aria-controls": id,

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

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const AccordionContext = /*#__PURE__*/React.createContext({
+  disabled: false
+});
+const AccordionProvider = _ref => {
+  let {
+    disabled,
+    children
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement(AccordionContext.Provider, {
+    value: {
+      disabled
+    }
+  }, children);
+};
+
+exports.AccordionContext = AccordionContext;
+exports.AccordionProvider = AccordionProvider;

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

@@ -34,7 +34,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'
@@ -67,11 +67,13 @@ ButtonSkeleton.propTypes = {
    */
   size: PropTypes__default["default"].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__default["default"].bool
 };
-var ButtonSkeleton$1 = ButtonSkeleton;
 
 exports.ButtonSkeleton = ButtonSkeleton;
-exports["default"] = ButtonSkeleton$1;
+exports["default"] = ButtonSkeleton;

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

@@ -13,7 +13,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var types = require('../../prop-types/types.js');
 var index = require('../IconButton/index.js');
 var events = require('../../tools/events.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -25,6 +24,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+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["default"].forwardRef(function Button(_ref, ref) {
   let {
     as,
@@ -91,23 +94,24 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
   const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
   let component = 'button';
   const assistiveId = useId.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["default"].createElement("span", {
       id: assistiveId,
       className: `${prefix}--visually-hidden`
     }, dangerDescription);
-  } else {
-    assistiveText = null;
   }
   if (as) {
     component = as;
@@ -130,7 +134,7 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     ...otherProps
   }, assistiveText, children, buttonImage);
   if (hasIconOnly) {
-    let align;
+    let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
       if (tooltipAlignment === 'center') {
         align = tooltipPosition;
@@ -199,7 +203,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
@@ -212,7 +216,7 @@ Button.propTypes = {
   /**
    * Specify the kind of Button you want to create
    */
-  kind: PropTypes__default["default"].oneOf(types.ButtonKinds),
+  kind: PropTypes__default["default"].oneOf(ButtonKinds),
   /**
    * Provide an optional function to be called when the button element
    * loses focus
@@ -270,6 +274,9 @@ Button.propTypes = {
    */
   type: PropTypes__default["default"].oneOf(['button', 'reset', 'submit'])
 };
-var Button$1 = Button;
 
-exports["default"] = Button$1;
+exports.ButtonKinds = ButtonKinds;
+exports.ButtonSizes = ButtonSizes;
+exports.ButtonTooltipAlignments = ButtonTooltipAlignments;
+exports.ButtonTooltipPositions = ButtonTooltipPositions;
+exports["default"] = Button;

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

@@ -10,8 +10,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Button = require('./Button.js');
+var Button_Skeleton = require('./Button.Skeleton.js');
 
 
 
 exports.Button = Button["default"];
+exports.ButtonKinds = Button.ButtonKinds;
+exports.ButtonSizes = Button.ButtonSizes;
+exports.ButtonTooltipAlignments = Button.ButtonTooltipAlignments;
+exports.ButtonTooltipPositions = Button.ButtonTooltipPositions;
 exports["default"] = Button["default"];
+exports.ButtonSkeleton = Button_Skeleton["default"];

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

@@ -53,6 +53,5 @@ ButtonSet.propTypes = {
    */
   stacked: PropTypes__default["default"].bool
 };
-var ButtonSet$1 = ButtonSet;
 
-exports["default"] = ButtonSet$1;
+exports["default"] = ButtonSet;

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

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -17,6 +17,7 @@ var useResizeObserver = require('use-resize-observer/polyfilled');
 var iconsReact = require('@carbon/icons-react');
 var Copy = require('../Copy/Copy.js');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var CopyButton = require('../CopyButton/CopyButton.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var copy = require('copy-to-clipboard');

package/lib/components/ComboButton/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 index = require('../IconButton/index.js');
 var Menu = require('../Menu/Menu.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');