@carbon/react 1.63.2 → 1.64.0

package/es/components/{Slug → AILabel}/index.js

@@ -14,26 +14,26 @@ import { ToggletipContent, ToggletipActions, Toggletip, ToggletipButton } from '
 import { IconButton } from '../IconButton/index.js';
 import { Undo } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
+import deprecate from '../../prop-types/deprecate.js';
 
 var _Undo;
-const SlugContent = /*#__PURE__*/React__default.forwardRef(function SlugContent(_ref, ref) {
+const AILabelContent = /*#__PURE__*/React__default.forwardRef(function AILabelContent(_ref, ref) {
   let {
     children,
     className
   } = _ref;
   const prefix = usePrefix();
-  const hasSlugActions = React__default.Children.toArray(children).some(child => child.type?.displayName === 'SlugActions');
-  const slugContentClasses = cx(className, {
+  const hasAILabelActions = React__default.Children.toArray(children).some(child => child.type?.displayName === 'AILabelActions');
+  const aiLabelContentClasses = cx(className, {
     [`${prefix}--slug-content`]: true,
-    [`${prefix}--slug-content--with-actions`]: hasSlugActions
+    [`${prefix}--slug-content--with-actions`]: hasAILabelActions
   });
   return /*#__PURE__*/React__default.createElement(ToggletipContent, {
-    className: slugContentClasses,
-    ref: ref
+    className: aiLabelContentClasses
   }, children);
 });
-SlugContent.displayName = 'SlugContent';
-SlugContent.propTypes = {
+AILabelContent.displayName = 'AILabelContent';
+AILabelContent.propTypes = {
   /**
    * Specify the content you want rendered inside the slug ToggleTip
    */
@@ -43,22 +43,22 @@ SlugContent.propTypes = {
    */
   className: PropTypes.string
 };
-const SlugActions = /*#__PURE__*/React__default.forwardRef(function SlugActions(_ref2, ref) {
+const AILabelActions = /*#__PURE__*/React__default.forwardRef(function AILabelActions(_ref2, ref) {
   let {
     children,
     className
   } = _ref2;
   const prefix = usePrefix();
-  const slugActionBarClasses = cx(className, {
+  const aiLabelActionsClasses = cx(className, {
     [`${prefix}--slug-actions`]: true
   });
   return /*#__PURE__*/React__default.createElement(ToggletipActions, {
-    className: slugActionBarClasses,
+    className: aiLabelActionsClasses,
     ref: ref
   }, children);
 });
-SlugActions.displayName = 'SlugActions';
-SlugActions.propTypes = {
+AILabelActions.displayName = 'AILabelActions';
+AILabelActions.propTypes = {
   /**
    * Specify the content you want rendered inside the slug callout toolbar
    */
@@ -68,10 +68,11 @@ SlugActions.propTypes = {
    */
   className: PropTypes.string
 };
-const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
+const AILabel = /*#__PURE__*/React__default.forwardRef(function AILabel(_ref3, ref) {
   let {
     aiText = 'AI',
     aiTextLabel,
+    textLabel,
     align,
     autoAlign = true,
     children,
@@ -81,29 +82,30 @@ const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
     revertActive,
     revertLabel = 'Revert to AI input',
     slugLabel = 'Show information',
+    ['aria-label']: ariaLabel = 'Show information',
     size = 'xs',
     ...rest
   } = _ref3;
   const prefix = usePrefix();
-  const id = useId('slug');
-  const slugClasses = cx(className, {
+  const id = useId('AILabel');
+  const aiLabelClasses = cx(className, {
     [`${prefix}--slug`]: true,
     [`${prefix}--slug--revert`]: revertActive
   });
-  const slugButtonClasses = cx({
+  const aiLabelButtonClasses = cx({
     [`${prefix}--slug__button`]: true,
     [`${prefix}--slug__button--${size}`]: size,
     [`${prefix}--slug__button--${kind}`]: kind,
-    [`${prefix}--slug__button--inline-with-content`]: kind === 'inline' && aiTextLabel
+    [`${prefix}--slug__button--inline-with-content`]: kind === 'inline' && (aiTextLabel || textLabel)
   });
   const handleOnRevertClick = evt => {
     if (onRevertClick) {
       onRevertClick(evt);
     }
   };
-  const ariaLabel = !aiTextLabel ? `${aiText} - ${slugLabel}` : `${aiText} - ${aiTextLabel}`;
+  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} - ${slugLabel || ariaLabel}` : `${aiText} - ${aiTextLabel || textLabel}`;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: slugClasses,
+    className: aiLabelClasses,
     ref: ref,
     id: id
   }, revertActive ? /*#__PURE__*/React__default.createElement(IconButton, _extends({
@@ -115,24 +117,29 @@ const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
     align: align,
     autoAlign: autoAlign
   }, rest), /*#__PURE__*/React__default.createElement(ToggletipButton, {
-    className: slugButtonClasses,
-    label: ariaLabel
+    className: aiLabelButtonClasses,
+    label: ariaLabelText
   }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--slug__text`
-  }, aiText), aiTextLabel && /*#__PURE__*/React__default.createElement("span", {
+  }, aiText), kind === 'inline' && (aiTextLabel || textLabel) && /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--slug__additional-text`
-  }, aiTextLabel)), children));
+  }, aiTextLabel || textLabel)), children));
 });
-Slug.displayName = 'Slug';
-Slug.propTypes = {
+AILabel.displayName = 'AILabel';
+AILabel.propTypes = {
+  /**
+   * Specify the content you want rendered inside the `AILabel` ToggleTip
+   */
+  AILabelContent: PropTypes.node,
   /**
    * Specify the correct translation of the AI text
    */
   aiText: PropTypes.string,
   /**
+   * @deprecated
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  aiTextLabel: PropTypes.string,
+  aiTextLabel: deprecate(PropTypes.string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
   /**
    * Specify how the popover should align with the button
    */
@@ -153,20 +160,24 @@ Slug.propTypes = {
   'right-end', 'right-top',
   // deprecated use right-start instead
   'right-start']),
+  /**
+   * Specify the text that will be provided to the aria-label of the `AILabel` button
+   */
+  'aria-label': PropTypes.string,
   /**
    * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
    */
   autoAlign: PropTypes.bool,
   /**
-   * Specify the content you want rendered inside the slug ToggleTip
+   * Specify the content you want rendered inside the `AILabel` ToggleTip
    */
   children: PropTypes.node,
   /**
-   * Specify an optional className to be added to the AI slug
+   * Specify an optional className to be added to the `AILabel`
    */
   className: PropTypes.string,
   /**
-   * Specify the type of Slug, from the following list of types:
+   * Specify the type of `AILabel`, from the following list of types:
    */
   kind: PropTypes.oneOf(['default', 'inline']),
   /**
@@ -186,13 +197,14 @@ Slug.propTypes = {
    */
   size: PropTypes.oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
   /**
-   * Specify the content you want rendered inside the slug ToggleTip
+   * @deprecated
+   * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
-  slugContent: PropTypes.node,
+  slugLabel: deprecate(PropTypes.string, '`slugLabel` on `AILabel` has been deprecated - Please use the `ariaLabel` prop instead'),
   /**
-   * Specify the text that will be provided to the aria-label of the `Slug` button
+   * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  slugLabel: PropTypes.string
+  textLabel: PropTypes.string
 };
 
-export { Slug, SlugActions, SlugContent };
+export { AILabel, AILabelActions, AILabelContent };

package/es/components/{AiSkeleton/AiSkeletonIcon.d.ts → AISkeleton/AISkeletonIcon.d.ts}

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-interface AiSkeletonIconProps {
+interface AISkeletonIconProps {
     /**
      * Specify an optional className to add.
      */
@@ -16,8 +16,8 @@ interface AiSkeletonIconProps {
      */
     style?: React.CSSProperties;
 }
-declare const AiSkeletonIcon: {
-    ({ className, ...rest }: AiSkeletonIconProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonIcon: {
+    ({ className, ...rest }: AISkeletonIconProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.
@@ -29,4 +29,4 @@ declare const AiSkeletonIcon: {
         style: PropTypes.Requireable<object>;
     };
 };
-export default AiSkeletonIcon;
+export default AISkeletonIcon;

package/es/components/{AiSkeleton/AiSkeletonIcon.js → AISkeleton/AISkeletonIcon.js}

@@ -12,20 +12,20 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import SkeletonIcon from '../SkeletonIcon/SkeletonIcon.js';
 
-const AiSkeletonIcon = _ref => {
+const AISkeletonIcon = _ref => {
   let {
     className,
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const AiSkeletonIconClasses = cx(className, {
+  const AISkeletonIconClasses = cx(className, {
     [`${prefix}--skeleton__icon--ai`]: true
   });
   return /*#__PURE__*/React__default.createElement(SkeletonIcon, _extends({
-    className: AiSkeletonIconClasses
+    className: AISkeletonIconClasses
   }, rest));
 };
-AiSkeletonIcon.propTypes = {
+AISkeletonIcon.propTypes = {
   /**
    * Specify an optional className to add.
    */
@@ -36,4 +36,4 @@ AiSkeletonIcon.propTypes = {
   style: PropTypes.object
 };
 
-export { AiSkeletonIcon as default };
+export { AISkeletonIcon as default };

package/es/components/{AiSkeleton/AiSkeletonPlaceholder.d.ts → AISkeleton/AISkeletonPlaceholder.d.ts}

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-export interface AiSkeletonPlaceholderProps {
+export interface AISkeletonPlaceholderProps {
     /**
      * Add a custom class to the component to set the height and width
      */
     className?: string;
 }
-declare const AiSkeletonPlaceholder: {
-    ({ className, ...other }: AiSkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonPlaceholder: {
+    ({ className, ...other }: AISkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Add a custom class to the component
@@ -21,4 +21,4 @@ declare const AiSkeletonPlaceholder: {
         className: PropTypes.Requireable<string>;
     };
 };
-export default AiSkeletonPlaceholder;
+export default AISkeletonPlaceholder;

package/es/components/{AiSkeleton/AiSkeletonPlaceholder.js → AISkeleton/AISkeletonPlaceholder.js}

@@ -12,21 +12,21 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import SkeletonPlaceholder from '../SkeletonPlaceholder/SkeletonPlaceholder.js';
 
-const AiSkeletonPlaceholder = _ref => {
+const AISkeletonPlaceholder = _ref => {
   let {
     className,
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const AiSkeletonPlaceholderClasses = cx({
+  const AISkeletonPlaceholderClasses = cx({
     className,
     [`${prefix}--skeleton__placeholder--ai`]: true
   }, className);
   return /*#__PURE__*/React__default.createElement(SkeletonPlaceholder, _extends({
-    className: AiSkeletonPlaceholderClasses
+    className: AISkeletonPlaceholderClasses
   }, other));
 };
-AiSkeletonPlaceholder.propTypes = {
+AISkeletonPlaceholder.propTypes = {
   /**
    * Add a custom class to the component
    * to set the height and width
@@ -34,4 +34,4 @@ AiSkeletonPlaceholder.propTypes = {
   className: PropTypes.string
 };
 
-export { AiSkeletonPlaceholder as default };
+export { AISkeletonPlaceholder as default };

package/es/components/{AiSkeleton/AiSkeletonText.d.ts → AISkeleton/AISkeletonText.d.ts}

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-interface AiSkeletonTextProps {
+interface AISkeletonTextProps {
     /**
      * Specify an optional className to be applied to the container node.
      */
@@ -27,8 +27,8 @@ interface AiSkeletonTextProps {
      */
     width?: string;
 }
-declare const AiSkeletonText: {
-    ({ className, ...rest }: AiSkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonText: {
+    ({ className, ...rest }: AISkeletonTextProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to be applied to the container node
@@ -52,4 +52,4 @@ declare const AiSkeletonText: {
         width: PropTypes.Requireable<string>;
     };
 };
-export default AiSkeletonText;
+export default AISkeletonText;

package/es/components/{AiSkeleton/AiSkeletonText.js → AISkeleton/AISkeletonText.js}

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import SkeletonText from '../SkeletonText/SkeletonText.js';
 
-const AiSkeletonText = _ref => {
+const AISkeletonText = _ref => {
   let {
     className,
     ...rest
@@ -25,7 +25,7 @@ const AiSkeletonText = _ref => {
     className: aiSkeletonTextClasses
   }, rest));
 };
-AiSkeletonText.propTypes = {
+AISkeletonText.propTypes = {
   /**
    * Specify an optional className to be applied to the container node
    */
@@ -48,4 +48,4 @@ AiSkeletonText.propTypes = {
   width: PropTypes.string
 };
 
-export { AiSkeletonText as default };
+export { AISkeletonText as default };

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

@@ -0,0 +1,10 @@
+/**
+ * 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 AISkeletonPlaceholder from './AISkeletonPlaceholder';
+import AISkeletonIcon from './AISkeletonIcon';
+import AISkeletonText from './AISkeletonText';
+export { AISkeletonText, AISkeletonIcon, AISkeletonPlaceholder };

package/es/components/Accordion/AccordionItem.js

@@ -108,6 +108,7 @@ function AccordionItem(_ref) {
     className: `${prefix}--accordion__title`
   }, title)), /*#__PURE__*/React__default.createElement("div", {
     ref: content,
+    hidden: !isOpen,
     className: `${prefix}--accordion__wrapper`,
     onTransitionEnd: onAnimationEnd
   }, /*#__PURE__*/React__default.createElement("div", {

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -48,7 +48,7 @@ const CheckboxGroup = _ref => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if ( /*#__PURE__*/React__default.isValidElement(slug) && slug['type']?.displayName === 'Slug') {
+  if ( /*#__PURE__*/React__default.isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/es/components/ComboBox/ComboBox.js

@@ -243,8 +243,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       case ToggleButtonClick:
         if (changes.isOpen && !changes.selectedItem) {
           return {
-            ...changes,
-            highlightedIndex: 0
+            ...changes
           };
         }
         return changes;
@@ -284,6 +283,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const showWarning = !invalid && warn;
   const className = cx(`${prefix}--combo-box`, {
+    [`${prefix}--combo-box--invalid--focused`]: invalid && isFocused,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--combo-box--warning`]: showWarning,
     [`${prefix}--combo-box--readonly`]: readOnly
@@ -304,7 +304,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   }]);
   const inputClasses = cx(`${prefix}--text-input`, {
     [`${prefix}--text-input--empty`]: !inputValue,
-    [`${prefix}--combo-box--input--focus`]: isFocused && !isFluid
+    [`${prefix}--combo-box--input--focus`]: isFocused
   });
 
   // needs to be Capitalized for react to render it correctly
@@ -312,7 +312,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/ComposedModal/ComposedModal.js

@@ -246,7 +246,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
 
   // Slug is always size `sm`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'sm'
     });

package/es/components/DataTable/DataTable.js

@@ -15,7 +15,7 @@ import { getCellId } from './tools/cells.js';
 import denormalize from './tools/denormalize.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { defaultFilterRows } from './tools/filter.js';
-import setupGetInstanceId from './tools/instanceId.js';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { Table } from './Table.js';
 import TableActionList from './TableActionList.js';
 import TableBatchAction from './TableBatchAction.js';

package/es/components/DatePicker/DatePicker.js

@@ -22,7 +22,7 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { match } from '../../internal/keyboard/match.js';
-import { Escape, ArrowDown } from '../../internal/keyboard/keys.js';
+import { Escape, ArrowDown, Tab } from '../../internal/keyboard/keys.js';
 
 // Weekdays shorthand for english locale
 l10n.en.weekdays.shorthand.forEach((_day, index) => {
@@ -550,6 +550,21 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }, [value, prefix]); //eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    if (!calendarRef.current || !startInputField.current) return;
+    const handleKeyDown = event => {
+      if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
+        calendarRef.current.close();
+        // Remove focus from endDate calendar input
+        document.activeElement instanceof HTMLElement &&
+        // this is to fix the TS warning
+        document?.activeElement?.blur();
+        onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => document.removeEventListener('keydown', handleKeyDown, true);
+  }, [calendarRef, startInputField, endInputField, onCalendarClose]);
   let fluidError;
   if (isFluid) {
     if (invalid) {

package/es/components/DatePickerInput/DatePickerInput.js

@@ -97,7 +97,7 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/Dropdown/Dropdown.js

@@ -19,6 +19,7 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import { useFloating, size, flip, autoUpdate } from '@floating-ui/react';
+import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
@@ -72,7 +73,8 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   } = _ref;
   const {
     refs,
-    floatingStyles
+    floatingStyles,
+    middlewareData
   } = useFloating(autoAlign ? {
     placement: direction,
     // The floating element is positioned relative to its nearest
@@ -91,15 +93,19 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           width: `${rects.reference.width}px`
         });
       }
-    }), flip()],
+    }), flip(), hide()],
     whileElementsMounted: autoUpdate
   } : {} // When autoAlign is turned off, floating-ui will not be used
   );
   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];
         }
       });
     }
@@ -260,11 +266,11 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   };
   const menuProps = useMemo(() => getMenuProps({
     ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign]);
+  }), [autoAlign, getMenuProps, refs.setFloating]);
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -53,7 +53,8 @@ FluidMultiSelect.propTypes = {
   clearSelectionText: PropTypes.string,
   /**
    * Provide a compare function that is used to determine the ordering of
-   * options. See 'sortItems' for more control.
+   * options. See 'sortItems' for more control. Consider declaring function
+   * with `useCallback` to prevent unnecessary re-renders.
    */
   compareItems: PropTypes.func,
   /**
@@ -106,7 +107,8 @@ FluidMultiSelect.propTypes = {
   /**
    * Helper function passed to downshift that allows the library to render a
    * given item to a string label. By default, it extracts the `label` field
-   * from a given item to serve as the item label in the list.
+   * from a given item to serve as the item label in the list. Consider
+   * declaring function with `useCallback` to prevent unnecessary re-renders.
    */
   itemToString: PropTypes.func,
   /**