@carbon/react 1.65.0 → 1.66.0-rc.0

package/lib/components/ChatButton/ChatButton.js

@@ -10,8 +10,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
 var React = require('react');
+var PropTypes = require('prop-types');
 var cx = require('classnames');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
@@ -19,8 +19,8 @@ var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const ChatButton = /*#__PURE__*/React__default["default"].forwardRef(function ChatButton(_ref, ref) {
@@ -88,12 +88,12 @@ ChatButton.propTypes = {
    * Optional prop to specify an icon to be rendered.
    * Can be a React component class
    */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Specify the size of the `ChatButton`, from the following list of sizes:
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
 };
-var ChatButton$1 = ChatButton;
 
-exports["default"] = ChatButton$1;
+exports["default"] = ChatButton;

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 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 ChatButton from './ChatButton';
+import { type ChatButtonProps } from './ChatButton';
+import { type ChatButtonSkeletonProps } from './ChatButton.Skeleton';
+export default ChatButton;
+export { ChatButton, type ChatButtonProps, type ChatButtonSkeletonProps };
+export { default as ChatButtonSkeleton } from './ChatButton.Skeleton';

package/lib/components/Checkbox/index.js

@@ -0,0 +1,19 @@
+/**
+ * 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 Checkbox = require('./Checkbox.js');
+var Checkbox_Skeleton = require('./Checkbox.Skeleton.js');
+
+
+
+exports.Checkbox = Checkbox["default"];
+exports["default"] = Checkbox["default"];
+exports.CheckboxSkeleton = Checkbox_Skeleton["default"];

package/lib/components/ComboBox/ComboBox.js

@@ -17,6 +17,8 @@ var React = require('react');
 require('../Text/index.js');
 var iconsReact = require('@carbon/icons-react');
 var index = require('../ListBox/index.js');
+var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
+var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -24,10 +26,9 @@ var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
+var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
-var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
-var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -138,19 +139,24 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const {
     refs,
-    floatingStyles
+    floatingStyles,
+    middlewareData
   } = react.useFloating(autoAlign ? {
     placement: direction,
     strategy: 'fixed',
-    middleware: [react.flip()],
+    middleware: [react.flip(), floatingUi_core.hide()],
     whileElementsMounted: react.autoUpdate
   } : {});
   const parentWidth = refs?.reference?.current?.clientWidth;
   React.useEffect(() => {
     if (autoAlign) {
-      Object.keys(floatingStyles).forEach(style => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+      };
+      Object.keys(updatedFloatingStyles).forEach(style => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
       if (parentWidth && refs.floating.current) {
@@ -543,7 +549,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     onClearSelection: handleSelectionClear,
     selectionCount: 0
   }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
-    // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
   }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {

package/lib/components/ComboButton/index.js

@@ -24,6 +24,7 @@ var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var react = require('@floating-ui/react');
 var mergeRefs = require('../../tools/mergeRefs.js');
+var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -61,7 +62,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
   const containerRef = React.useRef(null);
   const middlewares = [react.flip({
     crossAxis: false
-  })];
+  }), floatingUi_core.hide()];
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(react.size({
       apply(_ref2) {
@@ -99,9 +100,13 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     handleClose
   } = useAttachedMenu.useAttachedMenu(containerRef);
   React.useLayoutEffect(() => {
-    Object.keys(floatingStyles).forEach(style => {
+    const updatedFloatingStyles = {
+      ...floatingStyles,
+      visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+    };
+    Object.keys(updatedFloatingStyles).forEach(style => {
       if (refs.floating.current) {
-        refs.floating.current.style[style] = floatingStyles[style];
+        refs.floating.current.style[style] = updatedFloatingStyles[style];
       }
     });
   }, [floatingStyles, refs.floating, middlewareData, placement, open]);

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

@@ -4,6 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import ComposedModal from './ComposedModal';
 export { default as ComposedModal, type ComposedModalProps, ModalBody, type ModalBodyProps, } from './ComposedModal';
 export { ModalHeader, type ModalHeaderProps } from './ModalHeader';
 export { ModalFooter, type ModalFooterProps } from './ModalFooter';
+export default ComposedModal;

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

@@ -45,6 +45,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/lib/components/Grid/Column.js

@@ -274,11 +274,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/lib/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/lib/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/lib/components/ListBox/next/ListBoxSelection.js

@@ -23,22 +23,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 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,
@@ -72,7 +63,7 @@ function ListBoxSelection(_ref) {
       className: tagClasses
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: `${prefix}--tag__label`,
-      title: selectionCount
+      title: selectionCount?.toString()
     }, selectionCount), /*#__PURE__*/React__default["default"].createElement("button", {
       "aria-label": description,
       className: `${prefix}--tag__close-icon`,
@@ -113,6 +104,11 @@ ListBoxSelection.propTypes = {
    * clear selection element is clicked
    */
   onClick: PropTypes__default["default"].func,
+  /**
+   * Specify an optional `onClick` handler that is called when the underlying
+   * clear selection element is clicked
+   */
+  onMouseUp: PropTypes__default["default"].func,
   /**
    * Specify an optional `onKeyDown` handler that is called when the underlying
    * clear selection element fires a keydown event
@@ -132,4 +128,3 @@ ListBoxSelection.propTypes = {
 };
 
 exports["default"] = ListBoxSelection;
-exports.translationIds = translationIds;

package/lib/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/lib/components/ListBox/next/ListBoxTrigger.js

@@ -32,7 +32,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`
@@ -55,7 +54,7 @@ const ListBoxTrigger = /*#__PURE__*/React__default["default"].forwardRef(functio
     title: description,
     className: className,
     type: "button",
-    tabIndex: "-1",
+    tabIndex: -1,
     ref: ref
   }), _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null)));
 });
@@ -72,7 +71,6 @@ ListBoxTrigger.propTypes = {
    */
   translateWithId: PropTypes__default["default"].func
 };
-var ListBoxTrigger$1 = ListBoxTrigger;
 
-exports["default"] = ListBoxTrigger$1;
+exports["default"] = ListBoxTrigger;
 exports.translationIds = translationIds;

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

@@ -19,6 +19,8 @@ var React = require('react');
 var filter = require('../ComboBox/tools/filter.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
 var index = require('../ListBox/index.js');
+var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
+var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var itemToString = require('./tools/itemToString.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -29,9 +31,8 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var Selection = require('../../internal/Selection.js');
 var react = require('@floating-ui/react');
+var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js');
 var match = require('../../internal/keyboard/match.js');
-var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
-var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -156,14 +157,18 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
           width: `${rects.reference.width}px`
         });
       }
-    })],
+    }), floatingUi_core.hide()],
     whileElementsMounted: react.autoUpdate
   } : {});
   React.useLayoutEffect(() => {
     if (autoAlign) {
-      Object.keys(floatingStyles).forEach(style => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+      };
+      Object.keys(updatedFloatingStyles).forEach(style => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
     }
@@ -544,10 +549,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__field`,
     ref: autoAlign ? refs.setReference : null
-  }, controlledSelectedItems.length > 0 &&
-  /*#__PURE__*/
-  // @ts-expect-error: It is expecting a non-required prop called: "onClearSelection"
-  React__default["default"].createElement(ListBoxSelection["default"], {
+  }, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
     clearSelection: () => {
       clearSelection();
       if (textInput.current) {
@@ -565,10 +567,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
-  }), inputValue &&
-  /*#__PURE__*/
-  // @ts-expect-error: It is expecting two non-required prop called: "onClearSelection" & "selectionCount"
-  React__default["default"].createElement(ListBoxSelection["default"], {
+  }), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
     clearSelection: clearInputValue,
     disabled: disabled,
     translateWithId: translateWithId,
@@ -581,7 +580,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       event.stopPropagation();
     }
   }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
-    // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
   }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index$1) => {