@carbon/react 1.70.0-rc.0 → 1.71.0-rc.0

package/es/components/DataTable/stories/examples/TableToolbarFilter.d.ts

@@ -13,7 +13,7 @@ interface TableToolbarFilterProps {
     /**
      * Provide an optional hook that is called each time the input is updated
      */
-    onChange?: (event: '' | ChangeEvent<HTMLInputElement>, value?: string) => void;
+    onChange?: (event: '' | ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide an function that is called when the apply button is clicked
      */

package/es/components/DatePicker/DatePicker.js

@@ -530,9 +530,6 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     const closeCalendar = event => {
       calendarRef.current.close();
       // Remove focus from endDate calendar input
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
       onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
         type: 'clickOutside'
       });
@@ -558,12 +555,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     if (!calendarRef.current || !startInputField.current) return;
     const handleKeyDown = event => {
       if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
-        event.preventDefault();
         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);
       }
     };

package/es/components/DatePicker/plugins/appendToPlugin.js

@@ -9,7 +9,7 @@
  * @param {object} config Plugin configuration.
  * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
  */
-var carbonFlatpickrAppendToPlugin = (config => fp => {
+var carbonFlatpickrAppendToPlugin = config => fp => {
   /**
    * Adjusts the floating menu position after Flatpicker sets it.
    */
@@ -51,6 +51,6 @@ var carbonFlatpickrAppendToPlugin = (config => fp => {
     onReady: register,
     onPreCalendarPosition: handlePreCalendarPosition
   };
-});
+};
 
 export { carbonFlatpickrAppendToPlugin as default };

package/es/components/DatePicker/plugins/fixEventsPlugin.js

@@ -12,7 +12,7 @@ import { Enter, ArrowLeft, ArrowRight, ArrowDown } from '../../../internal/keybo
  * @param {object} config Plugin configuration.
  * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
  */
-var carbonFlatpickrFixEventsPlugin = (config => fp => {
+var carbonFlatpickrFixEventsPlugin = config => fp => {
   const {
     inputFrom,
     inputTo,
@@ -76,7 +76,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
     if (inputTo === target && fp.selectedDates[1]) {
       // Using getTime() enables the ability to more readily compare the date currently
       // selected in the calendar and the date currently in the value of the input
-      const withoutTime = date => date.setHours(0, 0, 0, 0);
+      const withoutTime = date => date?.setHours(0, 0, 0, 0);
       const selectedToDate = withoutTime(new Date(fp.selectedDates[1]));
       const currentValueToDate = withoutTime(parseDateWithFormat(inputTo.value));
 
@@ -88,7 +88,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
         fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
       }
     }
-    const isValidDate = date => date.toString() !== 'Invalid Date';
+    const isValidDate = date => date?.toString() !== 'Invalid Date';
     // save end date in calendar inmediately after it's been written down
     if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
       if (isValidDate(parseDateWithFormat(inputTo.value))) {
@@ -150,6 +150,6 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
     onReady: [register, init],
     onDestroy: [release]
   };
-});
+};
 
 export { carbonFlatpickrFixEventsPlugin as default };

package/es/components/DatePicker/plugins/rangePlugin.js

@@ -14,7 +14,7 @@ import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
  *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
  *   * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
  */
-var carbonFlatpickrRangePlugin = (config => {
+var carbonFlatpickrRangePlugin = config => {
   const factory = rangePlugin(Object.assign({
     position: 'left'
   }, config));
@@ -49,6 +49,6 @@ var carbonFlatpickrRangePlugin = (config => {
       onPreCalendarPosition() {}
     });
   };
-});
+};
 
 export { carbonFlatpickrRangePlugin as default };

package/es/components/DatePickerInput/DatePickerInput.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { ReactElementLike, ReactNodeArray } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
 export type ReactNodeLike = ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined;
@@ -19,6 +19,10 @@ export interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>,
      * * `range` - With calendar dropdown and a date range.
      */
     datePickerType?: 'simple' | 'single' | 'range';
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `DatePickerInput` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether or not the input should be disabled
      */
@@ -77,6 +81,7 @@ export interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>,
      */
     size?: 'sm' | 'md' | 'lg';
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `DatePickerInput` component
      */
     slug?: ReactNodeLike;

package/es/components/DatePickerInput/DatePickerInput.js

@@ -14,11 +14,13 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import '../Text/index.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { Text } from '../Text/Text.js';
 
 const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
   const {
     datePickerType,
+    decorator,
     disabled = false,
     helperText,
     hideLabel,
@@ -61,7 +63,8 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
   const wrapperClasses = cx(`${prefix}--date-picker-input__wrapper`, {
     [`${prefix}--date-picker-input__wrapper--invalid`]: invalid,
     [`${prefix}--date-picker-input__wrapper--warn`]: warn,
-    [`${prefix}--date-picker-input__wrapper--slug`]: slug
+    [`${prefix}--date-picker-input__wrapper--slug`]: slug,
+    [`${prefix}--date-picker-input__wrapper--decorator`]: decorator
   });
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
@@ -95,10 +98,10 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
   }
   const input = /*#__PURE__*/React__default.createElement("input", inputProps);
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -110,7 +113,9 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
     className: labelClasses
   }, labelText), /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
-  }, /*#__PURE__*/React__default.createElement("span", null, input, normalizedSlug, isFluid && /*#__PURE__*/React__default.createElement(DatePickerIcon, {
+  }, /*#__PURE__*/React__default.createElement("span", null, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--date-picker-input-inner-wrapper--decorator`
+  }, normalizedDecorator) : '', isFluid && /*#__PURE__*/React__default.createElement(DatePickerIcon, {
     datePickerType: datePickerType
   }), /*#__PURE__*/React__default.createElement(DatePickerIcon, {
     datePickerType: datePickerType,
@@ -141,6 +146,10 @@ DatePickerInput.propTypes = {
    * * `range` - With calendar dropdown and a date range.
    */
   datePickerType: PropTypes.oneOf(['simple', 'single', 'range']),
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `RadioButton` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether or not the input should be disabled
    */
@@ -204,10 +213,7 @@ DatePickerInput.propTypes = {
    * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `DatePickerInput` component
-   */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify the type of the `<input>`
    */

package/es/components/Dropdown/Dropdown.d.ts

@@ -27,6 +27,10 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
      */
     autoAlign?: boolean;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `Dropdown` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify the direction of the dropdown. Can be either top or bottom.
      */
@@ -120,6 +124,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      */
     size?: ListBoxSize;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
      */
     slug?: ReactNode;

package/es/components/Dropdown/Dropdown.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useEffect, useContext, useState, useMemo } from 'react';
+import React__default, { useEffect, useContext, useCallback, useMemo, useState } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -39,13 +39,50 @@ const defaultItemToString = item => {
   }
   return '';
 };
+/**
+ * Custom state reducer for `useSelect` in Downshift, providing control over
+ * state changes.
+ *
+ * This function is called each time `useSelect` updates its internal state or
+ * triggers `onStateChange`. It allows for fine-grained control of state
+ * updates by modifying or overriding the default changes from Downshift's
+ * reducer.
+ * https://github.com/downshift-js/downshift/tree/master/src/hooks/useSelect#statereducer
+ *
+ * @param {Object} state - The current full state of the Downshift component.
+ * @param {Object} actionAndChanges - Contains the action type and proposed
+ * changes from the default Downshift reducer.
+ * @param {Object} actionAndChanges.changes - Suggested state changes.
+ * @param {string} actionAndChanges.type - The action type for the state
+ * change (e.g., item selection).
+ * @returns {Object} - The modified state based on custom logic or default
+ * changes if no custom logic applies.
+ */
+function stateReducer(state, actionAndChanges) {
+  const {
+    changes,
+    type
+  } = actionAndChanges;
+  switch (type) {
+    case ItemMouseMove:
+    case MenuMouseLeave:
+      if (changes.highlightedIndex === state.highlightedIndex) {
+        // Prevent state update if highlightedIndex hasn't changed
+        return state;
+      }
+      return changes;
+    default:
+      return changes;
+  }
+}
 const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     autoAlign = false,
     className: containerClassName,
+    decorator,
     disabled = false,
     direction = 'bottom',
-    items,
+    items: itemsProp,
     label,
     ['aria-label']: ariaLabel,
     ariaLabel: deprecatedAriaLabel,
@@ -118,49 +155,47 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const {
     isFluid
   } = useContext(FormContext);
-  const selectProps = {
+  const onSelectedItemChange = useCallback(_ref3 => {
+    let {
+      selectedItem
+    } = _ref3;
+    if (onChange) {
+      onChange({
+        selectedItem: selectedItem ?? null
+      });
+    }
+  }, [onChange]);
+  const isItemDisabled = useCallback((item, _index) => {
+    const isObject = item !== null && typeof item === 'object';
+    return isObject && 'disabled' in item && item.disabled === true;
+  }, []);
+  const onHighlightedIndexChange = useCallback(changes => {
+    const {
+      highlightedIndex
+    } = changes;
+    if (highlightedIndex !== undefined && highlightedIndex > -1 && typeof window !== undefined) {
+      const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+      const highlightedItem = itemArray[highlightedIndex];
+      if (highlightedItem) {
+        highlightedItem.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest'
+        });
+      }
+    }
+  }, [prefix]);
+  const items = useMemo(() => itemsProp, [itemsProp]);
+  const selectProps = useMemo(() => ({
     items,
     itemToString,
     initialSelectedItem,
     onSelectedItemChange,
     stateReducer,
-    isItemDisabled(item, _index) {
-      const isObject = item !== null && typeof item === 'object';
-      return isObject && 'disabled' in item && item.disabled === true;
-    },
-    onHighlightedIndexChange: _ref3 => {
-      let {
-        highlightedIndex
-      } = _ref3;
-      if (highlightedIndex > -1 && typeof window !== undefined) {
-        const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
-        const highlightedItem = itemArray[highlightedIndex];
-        if (highlightedItem) {
-          highlightedItem.scrollIntoView({
-            behavior: 'smooth',
-            block: 'nearest'
-          });
-        }
-      }
-    },
+    isItemDisabled,
+    onHighlightedIndexChange,
     ...downshiftProps
-  };
+  }), [items, itemToString, initialSelectedItem, onSelectedItemChange, stateReducer, isItemDisabled, onHighlightedIndexChange, downshiftProps]);
   const dropdownInstanceId = useId();
-  function stateReducer(state, actionAndChanges) {
-    const {
-      changes,
-      type
-    } = actionAndChanges;
-    switch (type) {
-      case ItemMouseMove:
-      case MenuMouseLeave:
-        return {
-          ...changes,
-          highlightedIndex: state.highlightedIndex
-        };
-    }
-    return changes;
-  }
 
   // only set selectedItem if the prop is defined. Setting if it is undefined
   // will overwrite default selected items from useSelect
@@ -205,80 +240,79 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused && !isOpen,
-    [`${prefix}--list-box__wrapper--slug`]: slug
+    [`${prefix}--list-box__wrapper--slug`]: slug,
+    [`${prefix}--list-box__wrapper--decorator`]: decorator
   });
   const helperId = !helperText ? undefined : `dropdown-helper-text-${dropdownInstanceId}`;
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
-  const toggleButtonProps = getToggleButtonProps({
+  const toggleButtonProps = useMemo(() => getToggleButtonProps({
     'aria-label': ariaLabel || deprecatedAriaLabel
-  });
+  }), [getToggleButtonProps, ariaLabel, deprecatedAriaLabel, isOpen]);
   const helper = helperText && !isFluid ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText) : null;
-  function onSelectedItemChange(_ref4) {
-    let {
-      selectedItem
-    } = _ref4;
-    if (onChange) {
-      onChange({
-        selectedItem: selectedItem ?? null
-      });
-    }
-  }
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
   };
   const mergedRef = mergeRefs(toggleButtonProps.ref, ref);
   const [currTimer, setCurrTimer] = useState();
-
-  // eslint-disable-next-line prefer-const
-  let [isTyping, setIsTyping] = useState(false);
-  const readOnlyEventHandlers = readOnly ? {
-    onClick: evt => {
-      // NOTE: does not prevent click
-      evt.preventDefault();
-      // focus on the element as per readonly input behavior
-      mergedRef?.current?.focus();
-    },
-    onKeyDown: evt => {
-      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
-      // This prevents the select from opening for the above keys
-      if (selectAccessKeys.includes(evt.key)) {
-        evt.preventDefault();
-      }
+  const [isTyping, setIsTyping] = useState(false);
+  const onKeyDownHandler = useCallback(evt => {
+    if (evt.code !== 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
+      setIsTyping(true);
     }
-  } : {
-    onKeyDown: evt => {
-      if (evt.code !== 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
-        setIsTyping(true);
+    if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
+      if (currTimer) {
+        clearTimeout(currTimer);
       }
-      if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
-        if (currTimer) {
-          clearTimeout(currTimer);
+      setCurrTimer(setTimeout(() => {
+        setIsTyping(false);
+      }, 3000));
+    }
+    if (toggleButtonProps.onKeyDown) {
+      toggleButtonProps.onKeyDown(evt);
+    }
+  }, [isTyping, currTimer, toggleButtonProps]);
+  const readOnlyEventHandlers = useMemo(() => {
+    if (readOnly) {
+      return {
+        onClick: evt => {
+          // NOTE: does not prevent click
+          evt.preventDefault();
+          // focus on the element as per readonly input behavior
+          mergedRef?.current?.focus();
+        },
+        onKeyDown: evt => {
+          const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
+          // This prevents the select from opening for the above keys
+          if (selectAccessKeys.includes(evt.key)) {
+            evt.preventDefault();
+          }
         }
-        setCurrTimer(setTimeout(() => {
-          setIsTyping(false);
-        }, 3000));
-      }
-      if (toggleButtonProps.onKeyDown) {
-        toggleButtonProps.onKeyDown(evt);
-      }
+      };
+    } else {
+      return {
+        onKeyDown: onKeyDownHandler
+      };
     }
-  };
+  }, [readOnly, onKeyDownHandler]);
   const menuProps = useMemo(() => getMenuProps({
     ref: enableFloatingStyles || autoAlign ? refs.setFloating : null
-  }), [autoAlign, getMenuProps, refs.setFloating]);
+  }), [autoAlign, getMenuProps, refs.setFloating, enableFloatingStyles]);
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
-      size: 'mini'
-    });
-  }
+  // AILabel is always size `mini`
+  const normalizedDecorator = useMemo(() => {
+    let element = slug ?? decorator;
+    if (element && element['type']?.displayName === 'AILabel') {
+      return /*#__PURE__*/React__default.cloneElement(element, {
+        size: 'mini'
+      });
+    }
+    return /*#__PURE__*/React__default.isValidElement(element) ? element : null;
+  }, [slug, decorator]);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
@@ -317,7 +351,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
+  })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--list-box__inner-wrapper--decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
@@ -360,6 +396,10 @@ Dropdown.propTypes = {
    * Provide a custom className to be applied on the cds--dropdown node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `Dropdown` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify the direction of the dropdown. Can be either top or bottom.
    */
@@ -453,7 +493,7 @@ Dropdown.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `Dropdown` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control

package/es/components/FeatureFlags/index.js

@@ -120,8 +120,7 @@ function useChangedValue(value, compare, callback) {
  */
 function useFeatureFlag(flag) {
   const scope = useContext(FeatureFlagContext);
-  //updated to return false for undefined flags
-  return scope.enabled(flag) ?? false;
+  return scope.enabled(flag);
 }
 
 /**

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

@@ -8,11 +8,14 @@ import React, { ReactNode } from 'react';
 import { ButtonSize } from '../Button';
 export declare const IconButtonKinds: readonly ["primary", "secondary", "ghost", "tertiary"];
 export type IconButtonKind = (typeof IconButtonKinds)[number];
+export type DeprecatedIconButtonAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+export type NewIconButtonAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+export type IconButtonAlignment = DeprecatedIconButtonAlignment | NewIconButtonAlignment;
 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';
+    align?: IconButtonAlignment;
     /**
      * **Experimental**: Will attempt to automatically align the tooltip
      */

package/es/components/IconButton/index.js

@@ -13,8 +13,22 @@ import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import ButtonBase from '../Button/ButtonBase.js';
+import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    'top-left': 'top-start',
+    'top-right': 'top-end',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+    'left-bottom': 'left-end',
+    'left-top': 'left-start',
+    'right-bottom': 'right-end',
+    'right-top': 'right-start'
+  };
+  return mapping[deprecatedValue];
+};
 const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_ref, ref) {
   let {
     align,
@@ -60,7 +74,32 @@ 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']),
+  align: deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  //allowed prop values
+  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+  //optional mapper function
+  propMappingFunction),
   /**
    * **Experimental**: Will attempt to automatically align the tooltip
    */

package/es/components/InlineCheckbox/InlineCheckbox.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export interface InlineCheckboxProps {
+    'aria-label': string;
+    /**
+     * Deprecated, please use `aria-label` instead.
+     * Specify the label for the control
+     */
+    ariaLabel?: string;
+    /**
+     * Specify whether the underlying control is checked,
+     * or not
+     * @default false
+     * */
+    checked?: boolean;
+    /**
+     * Specify whether the underlying input control should be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Provide an `id` for the underlying input control
+     */
+    id: string;
+    /**
+     * Specify whether the control is in an indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Provide a `name` for the underlying input control
+     */
+    name: string;
+    /**
+     * Provide an optional hook that is called each time the input is updated
+     */
+    onChange?: (checked: boolean, id: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Provide a handler that is invoked when a user clicks on the control
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Provide a handler that is invoked on the key down event for the control
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Provide an optional tooltip for the InlineCheckbox
+     */
+    title?: string;
+}
+declare const InlineCheckbox: React.ForwardRefExoticComponent<InlineCheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default InlineCheckbox;