@carbon/react 1.65.0 → 1.66.0

package/es/components/CopyButton/CopyButton.d.ts

@@ -12,6 +12,10 @@ export interface CopyButtonProps extends ButtonProps<'button'> {
      * Specify how the trigger should align with the tooltip
      */
     align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * **Experimental**: Will attempt to automatically align the tooltip
+     */
+    autoAlign?: boolean;
     /**
      * Specify an optional className to be applied to the underlying `<button>`
      */
@@ -36,13 +40,17 @@ export interface CopyButtonProps extends ButtonProps<'button'> {
      */
     onClick?: MouseEventHandler<HTMLButtonElement>;
 }
-declare function CopyButton({ align, feedback, feedbackTimeout, iconDescription, className, onClick, ...other }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function CopyButton({ align, autoAlign, feedback, feedbackTimeout, iconDescription, className, onClick, ...other }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CopyButton {
     var propTypes: {
         /**
          * Specify how the trigger should align with the tooltip
          */
         align: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Will attempt to automatically align the tooltip
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
         /**
          * Specify an optional className to be applied to the underlying `<button>`
          */

package/es/components/CopyButton/CopyButton.js

@@ -18,6 +18,7 @@ import { noopFn } from '../../internal/noopFn.js';
 function CopyButton(_ref) {
   let {
     align = 'bottom',
+    autoAlign = false,
     feedback = 'Copied!',
     feedbackTimeout = 2000,
     iconDescription = 'Copy to clipboard',
@@ -36,6 +37,7 @@ function CopyButton(_ref) {
     feedbackTimeout: feedbackTimeout,
     onClick: onClick,
     align: align,
+    autoAlign: autoAlign,
     className: cx(className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
   }, other), /*#__PURE__*/React__default.createElement(Copy$1, {
@@ -47,6 +49,10 @@ CopyButton.propTypes = {
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */

package/es/components/DataTable/TableSlugRow.d.ts

@@ -18,6 +18,7 @@ export interface TableSlugRowProps {
 }
 declare const TableSlugRow: {
     ({ className, slug }: TableSlugRowProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
     propTypes: {
         /**
          * The CSS class names of the cell that wraps the underlying input control

package/es/components/DataTable/TableSlugRow.js

@@ -35,6 +35,7 @@ const TableSlugRow = _ref => {
     className: TableSlugRowClasses
   }, normalizedSlug);
 };
+TableSlugRow.displayName = 'TableSlugRow';
 TableSlugRow.propTypes = {
   /**
    * The CSS class names of the cell that wraps the underlying input control

package/es/components/Dropdown/Dropdown.js

@@ -185,7 +185,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--dropdown--readonly`]: readOnly,
     [`${prefix}--dropdown--${size$1}`]: size$1,
     [`${prefix}--list-box--up`]: direction === 'top',
-    [`${prefix}--dropdown--autoalign`]: autoAlign
+    [`${prefix}--autoalign`]: autoAlign
   });
   const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,

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

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+export interface FluidTextAreaSkeletonProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+}
+declare function FluidTextAreaSkeleton({ className, ...other }: {
+    [x: string]: any;
+    className: any;
+}): void;
+declare namespace FluidTextAreaSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to be applied to the outer FluidForm wrapper
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default FluidTextAreaSkeleton;

package/es/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -5,30 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
-import cx from 'classnames';
+import 'react';
+import 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { FormContext } from '../FluidForm/FormContext.js';
 
 function FluidTextAreaSkeleton(_ref) {
-  let {
-    className,
-    ...other
-  } = _ref;
-  const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
-    value: {
-      isFluid: true
-    }
-  }, /*#__PURE__*/React__default.createElement("div", _extends({
-    className: cx(`${prefix}--form-item ${prefix}--text-area--fluid__skeleton`, className)
-  }, other), /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--label ${prefix}--skeleton`
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--skeleton ${prefix}--text-area`
-  })));
+  usePrefix();
 }
 FluidTextAreaSkeleton.propTypes = {
   /**

package/es/components/FluidTextArea/FluidTextArea.d.ts

@@ -0,0 +1,96 @@
+/**
+ * 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';
+export interface FluidTextAreaProps {
+    /**
+     * Provide a custom className that is applied directly to the underlying
+     * `<textarea>` node
+     */
+    className?: string;
+    /**
+     * Specify the `cols` attribute for the underlying `<textarea>` node
+     */
+    cols?: number;
+    /**
+     * Optionally provide the default value of the `<textarea>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Provide a unique identifier for the control
+     */
+    id?: string;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: React.ReactNode;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     */
+    light?: boolean;
+    /**
+     * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+     */
+    maxCount?: number;
+    /**
+     * Optionally provide an `onChange` handler that is called whenever `<textarea>`
+     * is updated
+     */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * Optionally provide an `onClick` handler that is called whenever the
+     * `<textarea>` is clicked
+     */
+    onClick?: React.MouseEventHandler<HTMLTextAreaElement>;
+    /**
+     * Specify the placeholder attribute for the `<textarea>`
+     */
+    placeholder?: string;
+    /**
+     * Specify the rows attribute for the `<textarea>`
+     */
+    rows?: number;
+    /**
+     * Provide the current value of the `<textarea>`
+     */
+    value?: string | number;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     *  Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidTextArea: React.FC<FluidTextAreaProps>;
+export default FluidTextArea;

package/es/components/FluidTextArea/FluidTextArea.js

@@ -15,7 +15,7 @@ import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-function FluidTextArea(_ref) {
+const FluidTextArea = _ref => {
   let {
     className,
     ...other
@@ -29,7 +29,7 @@ function FluidTextArea(_ref) {
   }, /*#__PURE__*/React__default.createElement(TextArea, _extends({
     className: classNames
   }, other)));
-}
+};
 FluidTextArea.propTypes = {
   /**
    * Provide a custom className that is applied directly to the underlying

package/es/components/FluidTextArea/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 FluidTextArea from './FluidTextArea';
+import { type FluidTextAreaProps } from './FluidTextArea';
+import { type FluidTextAreaSkeletonProps } from './FluidTextArea.Skeleton';
+export default FluidTextArea;
+export { FluidTextArea, type FluidTextAreaProps, type FluidTextAreaSkeletonProps, };
+export { default as FluidTextAreaSkeleton } from './FluidTextArea.Skeleton';

package/es/components/Grid/Column.js

@@ -245,11 +245,11 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
         start,
         end
       } = breakpoint;
-      if (typeof offset === 'number' && offset > 0) {
-        classNames.push(`${prefix}--${name}:col-start-${offset + 1}`);
+      if (typeof offset === 'number') {
+        classNames.push(`${prefix}--${name}:col-start-${offset > 0 ? offset + 1 : 'auto'}`);
       }
       if (typeof start === 'number') {
-        classNames.push(`${prefix}--${name}:col-start-${start}`);
+        classNames.push(`${prefix}--${name}:col-start-${start ? start : 'auto'}`);
       }
       if (typeof end === 'number') {
         classNames.push(`${prefix}--${name}:col-end-${end}`);

package/es/components/IconButton/index.d.ts

@@ -13,6 +13,10 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
      * Specify how the trigger should align with the tooltip
      */
     align?: 'top' | 'top-left' | 'top-start' | 'top-right' | 'top-end' | 'bottom' | 'bottom-left' | 'bottom-start' | 'bottom-right' | 'bottom-end' | 'left' | 'right';
+    /**
+     * **Experimental**: Will attempt to automatically align the tooltip
+     */
+    autoAlign?: boolean;
     /**
      * Provide an icon or asset to be rendered inside of the IconButton
      */

package/es/components/IconButton/index.js

@@ -18,6 +18,7 @@ const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
 const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_ref, ref) {
   let {
     align,
+    autoAlign = false,
     children,
     className,
     closeOnActivation = true,
@@ -38,6 +39,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
   });
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     align: align,
+    autoAlign: autoAlign,
     closeOnActivation: closeOnActivation,
     className: tooltipClasses,
     defaultOpen: defaultOpen,
@@ -59,6 +61,10 @@ IconButton.propTypes = {
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes.oneOf(['top', 'top-left', 'top-start', 'top-right', 'top-end', 'bottom', 'bottom-left', 'bottom-start', 'bottom-right', 'bottom-end', 'left', 'right']),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Provide an icon or asset to be rendered inside of the IconButton
    */

package/es/components/ListBox/ListBoxMenuItem.d.ts

@@ -4,9 +4,14 @@
  * 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, { ForwardedRef } from 'react';
+import React, { ForwardedRef, ReactNode } from 'react';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
+    /**
+     * Specify any children nodes that should be rendered inside of the ListBox
+     * Menu Item
+     */
+    children?: ReactNode;
     /**
      * Specify whether the current menu item is "active".
      */
@@ -19,6 +24,10 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
      * Specify whether the item should be disabled
      */
     disabled?: boolean;
+    /**
+     * Provide an optional tooltip for the ListBoxMenuItem
+     */
+    title?: string;
 }
 export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
     menuItemOptionRef?: React.Ref<HTMLDivElement>;

package/es/components/ListBox/next/ListBoxSelection.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 PropTypes from 'prop-types';
+/**
+ * `ListBoxSelection` is used to provide controls for clearing a selection, in
+ * addition to conditionally rendering a badge if the control has more than one
+ * selection.
+ */
+export declare const translationIds: {
+    readonly 'clear.all': "clear.all";
+    readonly 'clear.selection': "clear.selection";
+};
+export type TranslationKey = keyof typeof translationIds;
+export interface ListBoxSelectionProps {
+    /**
+     * Specify a function to be invoked when a user interacts with the clear
+     * selection element.
+     */
+    clearSelection: (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Specify an optional `selectionCount` value that will be used to determine
+     * whether the selection should display a badge or a single clear icon.
+     */
+    selectionCount?: number;
+    /**
+     * i18n hook used to provide the appropriate description for the given menu
+     * icon. This function takes in an id defined in `translationIds` and should
+     * return a string message for that given message id.
+     */
+    translateWithId?: (id: TranslationKey) => string;
+    /**
+     * Specify whether or not the clear selection element should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify an optional `onClearSelection` handler that is called when the underlying
+     * element is cleared
+     */
+    onClearSelection?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Specify an optional `onClick` handler that is called when the underlying
+     * clear selection element is clicked
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify an optional `onKeyDown` handler that is called when the underlying
+     * clear selection element fires a keydown event
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * Specify an optional `onMouseUp` handler that is called when the underlying
+     * clear selection element fires a mouseup event
+     */
+    onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
+}
+declare function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t, disabled, onClearSelection, ...rest }: ListBoxSelectionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ListBoxSelection {
+    var propTypes: {
+        /**
+         * Specify a function to be invoked when a user interacts with the clear
+         * selection element.
+         */
+        clearSelection: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Specify whether or not the clear selection element should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify an optional `onClearSelection` handler that is called when the underlying
+         * element is cleared
+         */
+        onClearSelection: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onClick` handler that is called when the underlying
+         * clear selection element is clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onClick` handler that is called when the underlying
+         * clear selection element is clicked
+         */
+        onMouseUp: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onKeyDown` handler that is called when the underlying
+         * clear selection element fires a keydown event
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `selectionCount` value that will be used to determine
+         * whether the selection should display a badge or a single clear icon.
+         */
+        selectionCount: PropTypes.Requireable<number>;
+        /**
+         * i18n hook used to provide the appropriate description for the given menu
+         * icon. This function takes in an id defined in `translationIds` and should
+         * return a string message for that given message id.
+         */
+        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default ListBoxSelection;

package/es/components/ListBox/next/ListBoxSelection.js

@@ -13,22 +13,13 @@ import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
 var _Close, _Close2;
-
-/**
- * `ListBoxSelection` is used to provide controls for clearing a selection, in
- * addition to conditionally rendering a badge if the control has more than one
- * selection.
- */
-
-const translationIds = {
-  'clear.all': 'clear.all',
-  'clear.selection': 'clear.selection'
-};
 const defaultTranslations = {
-  [translationIds['clear.all']]: 'Clear all selected items',
-  [translationIds['clear.selection']]: 'Clear selected item'
+  'clear.all': 'Clear all selected items',
+  'clear.selection': 'Clear selected item'
 };
-const defaultTranslateWithId = id => defaultTranslations[id];
+function defaultTranslateWithId(id) {
+  return defaultTranslations[id];
+}
 function ListBoxSelection(_ref) {
   let {
     clearSelection,
@@ -62,7 +53,7 @@ function ListBoxSelection(_ref) {
       className: tagClasses
     }, /*#__PURE__*/React__default.createElement("span", {
       className: `${prefix}--tag__label`,
-      title: selectionCount
+      title: selectionCount?.toString()
     }, selectionCount), /*#__PURE__*/React__default.createElement("button", {
       "aria-label": description,
       className: `${prefix}--tag__close-icon`,
@@ -103,6 +94,11 @@ ListBoxSelection.propTypes = {
    * clear selection element is clicked
    */
   onClick: PropTypes.func,
+  /**
+   * Specify an optional `onClick` handler that is called when the underlying
+   * clear selection element is clicked
+   */
+  onMouseUp: PropTypes.func,
   /**
    * Specify an optional `onKeyDown` handler that is called when the underlying
    * clear selection element fires a keydown event
@@ -121,4 +117,4 @@ ListBoxSelection.propTypes = {
   translateWithId: PropTypes.func
 };
 
-export { ListBoxSelection as default, translationIds };
+export { ListBoxSelection as default };

package/es/components/ListBox/next/ListBoxTrigger.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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';
+export declare const translationIds: {
+    readonly 'close.menu': "close.menu";
+    readonly 'open.menu': "open.menu";
+};
+export type TranslationKey = keyof typeof translationIds;
+export interface ListBoxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Specify whether the menu is currently open, which will influence the
+     * direction of the menu icon
+     */
+    isOpen: boolean;
+    /**
+     * i18n hook used to provide the appropriate description for the given menu
+     * icon. This function takes in an id defined in `translationIds` and should
+     * return a string message for that given message id.
+     */
+    translateWithId?: (id: TranslationKey) => string;
+}
+/**
+ * `ListBoxTrigger` is used to orient the icon up or down depending on the
+ * state of the menu for a given `ListBox`
+ */
+declare const ListBoxTrigger: React.ForwardRefExoticComponent<ListBoxTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default ListBoxTrigger;

package/es/components/ListBox/next/ListBoxTrigger.js

@@ -22,7 +22,6 @@ const defaultTranslations = {
   [translationIds['open.menu']]: 'Open'
 };
 const defaultTranslateWithId = id => defaultTranslations[id];
-
 /**
  * `ListBoxTrigger` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
@@ -45,7 +44,7 @@ const ListBoxTrigger = /*#__PURE__*/React__default.forwardRef(function ListBoxTr
     title: description,
     className: className,
     type: "button",
-    tabIndex: "-1",
+    tabIndex: -1,
     ref: ref
   }), _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null)));
 });
@@ -62,6 +61,5 @@ ListBoxTrigger.propTypes = {
    */
   translateWithId: PropTypes.func
 };
-var ListBoxTrigger$1 = ListBoxTrigger;
 
-export { ListBoxTrigger$1 as default, translationIds };
+export { ListBoxTrigger as default, translationIds };

package/es/components/ListBox/next/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { default as ListBoxSelection, type ListBoxSelectionProps, } from './ListBoxSelection';
+export { default as ListBoxTrigger, type ListBoxTriggerProps, } from './ListBoxTrigger';

package/es/components/Menu/Menu.js

@@ -282,7 +282,8 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     [`${prefix}--menu--box-shadow-top`]: menuAlignment && menuAlignment.slice(0, 3) === 'top',
     [`${prefix}--menu--open`]: open,
     [`${prefix}--menu--shown`]: open && !legacyAutoalign || position[0] >= 0 && position[1] >= 0,
-    [`${prefix}--menu--with-icons`]: childContext.state.hasIcons
+    [`${prefix}--menu--with-icons`]: childContext.state.hasIcons,
+    [`${prefix}--autoalign`]: !legacyAutoalign
   });
   const rendered = /*#__PURE__*/React__default.createElement(MenuContext.Provider, {
     value: childContext