@carbon/react 1.72.0 → 1.73.0

package/es/components/AILabel/index.js

@@ -118,7 +118,8 @@ const AILabel = /*#__PURE__*/React__default.forwardRef(function AILabel(_ref3, r
       onRevertClick(evt);
     }
   };
-  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} - ${slugLabel || ariaLabel}` : `${aiText} - ${aiTextLabel || textLabel}`;
+  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} ${slugLabel || ariaLabel}` : `${aiText} ${aiTextLabel || textLabel}`;
+  const isSmallIcon = ['xs', '2xs', 'mini'].includes(size);
   return /*#__PURE__*/React__default.createElement("div", {
     className: aiLabelClasses,
     ref: ref,
@@ -130,7 +131,8 @@ const AILabel = /*#__PURE__*/React__default.forwardRef(function AILabel(_ref3, r
     label: revertLabel
   }, rest), _Undo || (_Undo = /*#__PURE__*/React__default.createElement(Undo, null))) : /*#__PURE__*/React__default.createElement(Toggletip, _extends({
     align: align,
-    autoAlign: autoAlign
+    autoAlign: autoAlign,
+    alignmentAxisOffset: isSmallIcon ? -24 : 0
   }, rest), /*#__PURE__*/React__default.createElement(ToggletipButton, {
     className: aiLabelButtonClasses,
     label: ariaLabelText

package/es/components/ComposedModal/ComposedModal.js

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
 import { Layer } from '../Layer/index.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalFooter } from './ModalFooter.js';
-import debounce from 'lodash.debounce';
+import { debounce } from 'es-toolkit/compat';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';

package/es/components/Copy/Copy.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useState, useCallback, useEffect } from 'react';
-import debounce from 'lodash.debounce';
+import { debounce } from 'es-toolkit/compat';
 import cx from 'classnames';
 import { composeEventHandlers } from '../../tools/events.js';
 import { usePrefix } from '../../internal/usePrefix.js';

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

@@ -15,6 +15,7 @@ import TableBatchActions from './TableBatchActions';
 import TableBody from './TableBody';
 import TableCell from './TableCell';
 import TableContainer from './TableContainer';
+import TableDecoratorRow from './TableDecoratorRow';
 import TableExpandHeader from './TableExpandHeader';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
@@ -70,6 +71,7 @@ export interface DataTableHeader {
     key: string;
     header: React.ReactNode;
     slug?: React.ReactElement;
+    decorator?: React.ReactElement;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     headers: Array<DataTableHeader>;
@@ -174,7 +176,8 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         cell: DataTableCell<ColTypes>;
     }) => {
         [key: string]: unknown;
-        hasSlugHeader?: boolean;
+        hasAILabelHeader?: boolean;
+        hasDecoratorHeader?: boolean;
     };
     onInputChange: (e: React.ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;
     sortBy: (headerKey: string) => void;
@@ -318,6 +321,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
     static TableBody: typeof TableBody;
     static TableCell: typeof TableCell;
     static TableContainer: typeof TableContainer;
+    static TableDecoratorRow: typeof TableDecoratorRow;
     static TableExpandHeader: typeof TableExpandHeader;
     static TableExpandRow: typeof TableExpandRow;
     static TableExpandedRow: typeof TableExpandedRow;
@@ -358,6 +362,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         isSortable: boolean | undefined;
         isSortHeader: boolean;
         slug: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        decorator: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
         onClick: (event: any) => void;
     };
     /**
@@ -505,7 +510,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         [x: string]: any;
         cell: any;
     }) => {
-        hasSlugHeader: any;
+        hasAILabelHeader: any;
+        hasDecoratorHeader: any;
     };
     /**
      * Helper utility to get all the currently selected rows

package/es/components/DataTable/DataTable.js

@@ -23,6 +23,7 @@ import TableBatchActions from './TableBatchActions.js';
 import TableBody from './TableBody.js';
 import TableCell from './TableCell.js';
 import TableContainer from './TableContainer.js';
+import TableDecoratorRow from './TableDecoratorRow.js';
 import TableExpandHeader from './TableExpandHeader.js';
 import TableExpandRow from './TableExpandRow.js';
 import TableExpandedRow from './TableExpandedRow.js';
@@ -109,6 +110,7 @@ class DataTable extends React__default.Component {
         isSortable,
         isSortHeader: sortHeaderKey === header.key,
         slug: header.slug,
+        decorator: header.decorator,
         onClick: event => {
           const nextSortState = getNextSortState(this.props, this.state, {
             key: header.key
@@ -363,7 +365,8 @@ class DataTable extends React__default.Component {
       } = _ref4;
       return {
         ...rest,
-        hasSlugHeader: cell.hasSlugHeader
+        hasAILabelHeader: cell.hasAILabelHeader,
+        hasDecoratorHeader: cell.hasDecoratorHeader
       };
     });
     /**
@@ -743,6 +746,7 @@ _defineProperty(DataTable, "TableBatchActions", void 0);
 _defineProperty(DataTable, "TableBody", void 0);
 _defineProperty(DataTable, "TableCell", void 0);
 _defineProperty(DataTable, "TableContainer", void 0);
+_defineProperty(DataTable, "TableDecoratorRow", void 0);
 _defineProperty(DataTable, "TableExpandHeader", void 0);
 _defineProperty(DataTable, "TableExpandRow", void 0);
 _defineProperty(DataTable, "TableExpandedRow", void 0);
@@ -764,6 +768,7 @@ DataTable.TableBatchActions = TableBatchActions;
 DataTable.TableBody = TableBody;
 DataTable.TableCell = TableCell;
 DataTable.TableContainer = TableContainer;
+DataTable.TableDecoratorRow = TableDecoratorRow;
 DataTable.TableExpandHeader = TableExpandHeader;
 DataTable.TableExpandRow = TableExpandRow;
 DataTable.TableExpandedRow = TableExpandedRow;

package/es/components/DataTable/Table.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default, { useContext, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import debounce from 'lodash.debounce';
+import { debounce } from 'es-toolkit/compat';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { TableContext } from './TableContext.js';
 import { useWindowEvent } from '../../internal/useEvent.js';

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

@@ -22,7 +22,7 @@ interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
     /**
      * Specify if the table cell is in an AI column
      */
-    hasSlugHeader?: boolean;
+    hasAILabelHeader?: boolean;
     /**
      * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
      */

package/es/components/DataTable/TableCell.js

@@ -14,13 +14,13 @@ const TableCell = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     children,
     className,
-    hasSlugHeader,
+    hasAILabelHeader,
     colSpan,
     ...rest
   } = _ref;
   const prefix = usePrefix();
   const tableCellClassNames = cx(className, {
-    [`${prefix}--table-cell--column-slug`]: hasSlugHeader
+    [`${prefix}--table-cell--column-slug`]: hasAILabelHeader
   });
   return /*#__PURE__*/React__default.createElement("td", _extends({
     className: tableCellClassNames ? tableCellClassNames : undefined,

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

@@ -0,0 +1,33 @@
+/**
+ * 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 { ReactNode } from 'react';
+export interface TableDecoratorRowProps {
+    /**
+     * The CSS class names of the cell that wraps the underlying input control
+     */
+    className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+     */
+    decorator?: ReactNode;
+}
+declare const TableDecoratorRow: {
+    ({ className, decorator, }: TableDecoratorRowProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * The CSS class names of the cell that wraps the underlying input control
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+         */
+        decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export default TableDecoratorRow;

package/es/components/DataTable/TableDecoratorRow.js

@@ -0,0 +1,48 @@
+/**
+ * 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 React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+const TableDecoratorRow = _ref => {
+  let {
+    className,
+    decorator
+  } = _ref;
+  const prefix = usePrefix();
+  const TableDecoratorRowClasses = cx({
+    ...(className && {
+      [className]: true
+    }),
+    [`${prefix}--table-column-decorator`]: true,
+    [`${prefix}--table-column-decorator--active`]: decorator
+  });
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(decorator) ? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
+      size: 'mini'
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("td", {
+    className: TableDecoratorRowClasses
+  }, normalizedDecorator);
+};
+TableDecoratorRow.displayName = 'TableDecoratorRow';
+TableDecoratorRow.propTypes = {
+  /**
+   * The CSS class names of the cell that wraps the underlying input control
+   */
+  className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+   */
+  decorator: PropTypes.node
+};
+
+export { TableDecoratorRow as default };

package/es/components/DataTable/TableExpandRow.js

@@ -29,18 +29,18 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   } = _ref;
   const prefix = usePrefix();
 
-  // We need to put the slug before the expansion arrow and all other table cells after the arrow.
-  let rowHasSlug;
-  const slug = React__default.Children.toArray(children).map(child => {
-    if (child.type?.displayName === 'TableSlugRow') {
-      if (child.props.slug) {
-        rowHasSlug = true;
+  // We need to put the AILabel and Decorator before the expansion arrow and all other table cells after the arrow.
+  let rowHasAILabel;
+  const decorator = React__default.Children.toArray(children).map(child => {
+    if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
+      if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
+        rowHasAILabel = true;
       }
       return child;
     }
   });
   const normalizedChildren = React__default.Children.toArray(children).map(child => {
-    if (child.type?.displayName !== 'TableSlugRow') {
+    if (child.type?.displayName !== 'TableSlugRow' && child.type?.displayName !== 'TableDecoratorRow') {
       return child;
     }
   });
@@ -48,14 +48,14 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--parent-row`]: true,
     [`${prefix}--expandable-row`]: isExpanded,
     [`${prefix}--data-table--selected`]: isSelected,
-    [`${prefix}--data-table--slug-row`]: rowHasSlug
+    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
   }, rowClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;
   return /*#__PURE__*/React__default.createElement("tr", _extends({}, rest, {
     ref: ref,
     className: className,
     "data-parent-row": true
-  }), slug, /*#__PURE__*/React__default.createElement(TableCell, {
+  }), decorator, /*#__PURE__*/React__default.createElement(TableCell, {
     className: `${prefix}--table-expand`,
     "data-previous-value": previousValue,
     headers: expandHeader

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

@@ -58,9 +58,14 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
      */
     scope?: string;
     /**
-     * **Experimental**: Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+     * @deprecated please use decorator instead.
+     * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
      */
     slug?: ReactNode;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify which direction we are currently sorting by, should be one of DESC,
      * NONE, or ASC.

package/es/components/DataTable/TableHeader.js

@@ -46,6 +46,7 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     className: headerClassName,
     children,
     colSpan,
+    decorator,
     isSortable = false,
     isSortHeader,
     onClick,
@@ -59,18 +60,21 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
   const prefix = usePrefix();
   const uniqueId = useId('table-sort');
 
-  // Slug is always size `mini`
-  const slugRef = useRef(null);
-  let normalizedSlug;
-  if (slug) {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `mini`
+  const AILableRef = useRef(null);
+  let colHasAILabel;
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    colHasAILabel = true;
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini',
-      ref: slugRef
+      ref: AILableRef
     });
   }
   const headerLabelClassNames = cx({
     [`${prefix}--table-header-label`]: true,
-    [`${prefix}--table-header-label--slug`]: slug
+    [`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: colHasAILabel,
+    [`${prefix}--table-header-label--decorator`]: decorator
   });
   if (!isSortable) {
     return /*#__PURE__*/React__default.createElement("th", _extends({}, rest, {
@@ -81,7 +85,9 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
       ref: ref
     }), children ? /*#__PURE__*/React__default.createElement("div", {
       className: headerLabelClassNames
-    }, children, normalizedSlug) : null);
+    }, children, /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--table-header-label--decorator-inner`
+    }, normalizedDecorator)) : null);
   }
   const className = cx(headerClassName, {
     [`${prefix}--table-sort`]: true,
@@ -96,10 +102,11 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     sortStates
   });
   const headerClasses = cx(headerClassName, `${prefix}--table-sort__header`, {
-    [`${prefix}--table-sort__header--slug`]: slug
+    [`${prefix}--table-sort__header--ai-label`]: colHasAILabel,
+    [`${prefix}--table-sort__header--decorator`]: decorator
   });
   const handleClick = evt => {
-    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+    if (colHasAILabel && AILableRef.current && AILableRef.current.contains(evt.target)) {
       return;
     } else if (onClick) {
       return onClick(evt);
@@ -130,7 +137,9 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
   }), /*#__PURE__*/React__default.createElement(ArrowsVertical, {
     size: 20,
     className: `${prefix}--table-sort__icon-unsorted`
-  }), normalizedSlug)));
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--table-header-label--decorator-inner`
+  }, normalizedDecorator))));
 });
 TableHeader.propTypes = {
   /**

package/es/components/DataTable/TableRow.js

@@ -7,18 +7,17 @@
 
 import React__default from 'react';
 import PropTypes from 'prop-types';
-import omit from 'lodash.omit';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 const TableRow = props => {
   const prefix = usePrefix();
-  let rowHasSlug;
+  let rowHasAILabel;
   if (props?.children) {
     React__default.Children.toArray(props.children).map(child => {
-      if (child.type?.displayName === 'TableSlugRow') {
-        if (child.props.slug) {
-          rowHasSlug = true;
+      if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
+        if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
+          rowHasAILabel = true;
         }
       }
     });
@@ -27,12 +26,20 @@ const TableRow = props => {
   // only useful in `TableExpandRow`
   const className = cx(props.className, {
     [`${prefix}--data-table--selected`]: props.isSelected,
-    [`${prefix}--data-table--slug-row`]: rowHasSlug
+    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
   });
-  const cleanProps = {
-    ...omit(props, ['ariaLabel', 'aria-label', 'aria-controls', 'onExpand', 'isExpanded', 'isSelected']),
-    className: className || undefined
-  };
+  const {
+    ariaLabel,
+    'aria-label': ariaLabelAlt,
+    'aria-controls': ariaControls,
+    onExpand,
+    isExpanded,
+    isSelected,
+    ...cleanProps
+  } = props;
+  if (className) {
+    cleanProps.className = className;
+  }
   return /*#__PURE__*/React__default.createElement("tr", cleanProps);
 };
 TableRow.propTypes = {

package/es/components/DataTable/TableSlugRow.js

@@ -6,15 +6,19 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useEffect } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import deprecateComponent from '../../prop-types/deprecateComponent.js';
 
 const TableSlugRow = _ref => {
   let {
     className,
     slug
   } = _ref;
+  useEffect(() => {
+    deprecateComponent('TableSlugRow', 'The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.');
+  }, []);
   const prefix = usePrefix();
   const TableSlugRowClasses = cx({
     ...(className && {

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

@@ -13,6 +13,7 @@ import TableBody from './TableBody';
 import TableCell from './TableCell';
 import TableContainer from './TableContainer';
 import TableExpandHeader from './TableExpandHeader';
+import TableDecoratorRow from './TableDecoratorRow';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
 import TableHead from './TableHead';
@@ -27,5 +28,5 @@ import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
 import type { DataTableSortState } from './state/sortStates';
-export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableSortState, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, type TableHeaderTranslationKey, type TableHeaderTranslationArgs, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
+export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableSortState, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, type TableHeaderTranslationKey, type TableHeaderTranslationArgs, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
 export default DataTable;

package/es/components/DataTable/index.js

@@ -23,6 +23,8 @@ import TableContainer from './TableContainer.js';
 export { default as TableContainer } from './TableContainer.js';
 import TableExpandHeader from './TableExpandHeader.js';
 export { default as TableExpandHeader } from './TableExpandHeader.js';
+import TableDecoratorRow from './TableDecoratorRow.js';
+export { default as TableDecoratorRow } from './TableDecoratorRow.js';
 import TableExpandRow from './TableExpandRow.js';
 export { default as TableExpandRow } from './TableExpandRow.js';
 import TableExpandedRow from './TableExpandedRow.js';
@@ -57,6 +59,7 @@ DataTable.TableBatchActions = TableBatchActions;
 DataTable.TableBody = TableBody;
 DataTable.TableCell = TableCell;
 DataTable.TableContainer = TableContainer;
+DataTable.TableDecoratorRow = TableDecoratorRow;
 DataTable.TableExpandHeader = TableExpandHeader;
 DataTable.TableExpandRow = TableExpandRow;
 DataTable.TableExpandedRow = TableExpandedRow;

package/es/components/DataTable/tools/normalize.js

@@ -49,7 +49,8 @@ const normalize = function (rows, headers) {
     headers.forEach((_ref, i) => {
       let {
         key,
-        slug
+        slug,
+        decorator
       } = _ref;
       const id = getCellId(row.id, key);
       // Initialize the cell info and state values, namely for editing
@@ -60,7 +61,7 @@ const normalize = function (rows, headers) {
         isEditing: false,
         isValid: true,
         errors: null,
-        hasSlugHeader: !!slug,
+        hasAILabelHeader: !!(slug || decorator?.type?.displayName === 'AILabel'),
         info: {
           header: key
         }

package/es/components/Modal/Modal.js

@@ -18,7 +18,7 @@ import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { Layer } from '../Layer/index.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
-import debounce from 'lodash.debounce';
+import { debounce } from 'es-toolkit/compat';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';

package/es/components/Popover/index.js

@@ -61,6 +61,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     highContrast = false,
     onRequestClose,
     open,
+    alignmentAxisOffset,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -86,7 +87,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
   // needs to be placed 1px further outside the popover content. To do so,
   // we look to see if any of the children has a className containing "slug"
   const initialCaretHeight = React__default.Children.toArray(children).some(x => {
-    return x?.props?.className?.includes('slug');
+    return x?.props?.className?.includes('slug') || x?.props?.className?.includes('ai-label');
   }) ? 7 : 6;
   // These defaults match the defaults defined in packages/styles/scss/components/popover/_popover.scss
   const popoverDimensions = useRef({
@@ -128,7 +129,10 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
-    middleware: [offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && flip({
+    middleware: [offset(!isTabTip ? {
+      alignmentAxis: alignmentAxisOffset,
+      mainAxis: popoverDimensions?.current?.offset
+    } : 0), autoAlign && flip({
       fallbackPlacements: align.includes('bottom') ? ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'] : ['top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'],
       fallbackStrategy: 'initialPlacement',
       fallbackAxisSideDirection: 'start',

package/es/components/Search/Search.js

@@ -121,7 +121,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     className: searchClasses
   }, /*#__PURE__*/React__default.createElement("div", {
     "aria-label": onExpand ? 'button' : undefined,
-    "aria-labelledby": onExpand ? uniqueId : undefined,
+    "aria-labelledby": onExpand ? searchId : undefined,
     role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,
     onClick: onExpand,

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

@@ -7,6 +7,14 @@
 import PropTypes from 'prop-types';
 import { HTMLAttributes } from 'react';
 export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The `ariaLabel` for the handle icon.
+     */
+    ariaLabel?: string;
+    /**
+     * The `ariaLabel` for the upper bound slider handle when there are two handles.
+     */
+    unstable_ariaLabelHandleUpper?: string;
     /**
      * Specify an optional className to add to the form item wrapper.
      */
@@ -21,8 +29,16 @@ export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     twoHandles?: boolean;
 }
 declare const SliderSkeleton: {
-    ({ hideLabel, className, twoHandles, ...rest }: SliderSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    ({ ariaLabel, unstable_ariaLabelHandleUpper: ariaLabelHandleUpper, hideLabel, className, twoHandles, ...rest }: SliderSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
+        /**
+         * The `ariaLabel` for the handle icon.
+         */
+        ariaLabel: PropTypes.Requireable<string>;
+        /**
+         * The `ariaLabel` for the upper bound slider handle when there are two handles.
+         */
+        unstable_ariaLabelHandleUpper: PropTypes.Requireable<string>;
         /**
          * Specify an optional className to add to the form item wrapper.
          */

package/es/components/Slider/Slider.Skeleton.js

@@ -13,9 +13,10 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { LowerHandle, UpperHandle } from './SliderHandles.js';
 
-var _LowerHandle, _UpperHandle, _UpperHandle2, _LowerHandle2;
 const SliderSkeleton = _ref => {
   let {
+    ariaLabel = 'slider handle',
+    unstable_ariaLabelHandleUpper: ariaLabelHandleUpper = 'upper slider handle',
     hideLabel,
     className,
     twoHandles,
@@ -60,15 +61,31 @@ const SliderSkeleton = _ref => {
     className: lowerThumbWrapperClasses
   }, /*#__PURE__*/React__default.createElement("div", {
     className: lowerThumbClasses
-  }, twoHandles && !isRtl ? _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default.createElement(LowerHandle, null)) : twoHandles && isRtl ? _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default.createElement(UpperHandle, null)) : undefined)), twoHandles ? /*#__PURE__*/React__default.createElement("div", {
+  }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(LowerHandle, {
+    "aria-label": ariaLabel
+  }) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(UpperHandle, {
+    "aria-label": ariaLabelHandleUpper
+  }) : undefined)), twoHandles ? /*#__PURE__*/React__default.createElement("div", {
     className: upperThumbWrapperClasses
   }, /*#__PURE__*/React__default.createElement("div", {
     className: upperThumbClasses
-  }, twoHandles && !isRtl ? _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default.createElement(UpperHandle, null)) : twoHandles && isRtl ? _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default.createElement(LowerHandle, null)) : undefined)) : undefined), /*#__PURE__*/React__default.createElement("span", {
+  }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(UpperHandle, {
+    "aria-label": ariaLabelHandleUpper
+  }) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(LowerHandle, {
+    "aria-label": ariaLabel
+  }) : undefined)) : undefined), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--slider__range-label`
   })));
 };
 SliderSkeleton.propTypes = {
+  /**
+   * The `ariaLabel` for the handle icon.
+   */
+  ariaLabel: PropTypes.string,
+  /**
+   * The `ariaLabel` for the upper bound slider handle when there are two handles.
+   */
+  unstable_ariaLabelHandleUpper: PropTypes.string,
   /**
    * Specify an optional className to add to the form item wrapper.
    */