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

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -90,6 +90,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     onChange,
     onMenuChange,
     placeholder,
+    readOnly,
     titleText,
     type,
     selectionFeedback = 'top-after-reopen',
@@ -232,9 +233,11 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     }
   };
   function handleMenuChange(forceIsOpen) {
-    const nextIsOpen = forceIsOpen ?? !isOpen;
-    setIsOpen(nextIsOpen);
-    validateHighlightFocus();
+    if (!readOnly) {
+      const nextIsOpen = forceIsOpen ?? !isOpen;
+      setIsOpen(nextIsOpen);
+      validateHighlightFocus();
+    }
   }
   useEffect(() => {
     onMenuChange?.(isOpen);
@@ -423,7 +426,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     [`${prefix}--multi-select--open`]: isOpen,
     [`${prefix}--multi-select--inline`]: inline,
     [`${prefix}--multi-select--selected`]: controlledSelectedItems?.length > 0,
-    [`${prefix}--multi-select--filterable--input-focused`]: inputFocused
+    [`${prefix}--multi-select--filterable--input-focused`]: inputFocused,
+    [`${prefix}--multi-select--readonly`]: readOnly
   });
   const labelProps = getLabelProps();
   const buttonProps = getToggleButtonProps({
@@ -510,6 +514,24 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       setIsFocused(evt?.type === 'focus' ? true : false);
     }
   };
+  const mergedRef = mergeRefs(textInput, inputProps.ref);
+  const readOnlyEventHandlers = readOnly ? {
+    onClick: evt => {
+      // NOTE: does not prevent click
+      evt.preventDefault();
+      // focus on the element as per readonly input behavior
+      if (mergedRef.current !== undefined) {
+        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 clearSelectionContent = controlledSelectedItems.length > 0 ? /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--visually-hidden`
   }, clearSelectionDescription, " ", controlledSelectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default.createElement("span", {
@@ -533,12 +555,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     invalidText: invalidText,
     warn: warn,
     warnText: warnText,
-    isOpen: isOpen,
+    isOpen: !readOnly && isOpen,
     size: size$1
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__field`,
     ref: autoAlign ? refs.setReference : null
   }, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
+    readOnly: readOnly,
     clearSelection: () => {
       clearSelection();
       if (textInput.current) {
@@ -551,7 +574,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   }), /*#__PURE__*/React__default.createElement("input", _extends({
     className: inputClasses
   }, inputProps, {
-    ref: mergeRefs(textInput, inputProps.ref)
+    ref: mergedRef
+  }, readOnlyEventHandlers, {
+    readOnly: readOnly
   })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
@@ -560,6 +585,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     clearSelection: clearInputValue,
     disabled: disabled,
     translateWithId: translateWithId,
+    readOnly: readOnly,
     onMouseUp: event => {
       // If we do not stop this event from propagating,
       // it seems like Downshift takes our event and

package/es/components/Notification/Notification.js

@@ -278,9 +278,7 @@ function ToastNotification(_ref4) {
   }, caption), children), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
     notificationType: "toast",
     onClick: handleCloseButtonClick,
-    "aria-hidden": "true",
-    "aria-label": deprecatedAriaLabel || ariaLabel,
-    tabIndex: -1
+    "aria-label": deprecatedAriaLabel || ariaLabel
   }));
 }
 ToastNotification.propTypes = {
@@ -415,9 +413,7 @@ function InlineNotification(_ref5) {
   }, subtitle), children)), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
     notificationType: "inline",
     onClick: handleCloseButtonClick,
-    "aria-hidden": "true",
-    "aria-label": ariaLabel,
-    tabIndex: -1
+    "aria-label": ariaLabel
   }));
 }
 InlineNotification.propTypes = {

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

@@ -15,8 +15,12 @@ export interface NumberInputSkeletonProps extends HTMLAttributes<HTMLDivElement>
      * Specify whether the label should be hidden, or not
      */
     hideLabel?: boolean;
+    /**
+     * Specify the size of the Number Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
 }
-declare function NumberInputSkeleton({ hideLabel, className, ...rest }: NumberInputSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function NumberInputSkeleton({ hideLabel, className, size, ...rest }: NumberInputSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace NumberInputSkeleton {
     var propTypes: {
         /**
@@ -27,6 +31,10 @@ declare namespace NumberInputSkeleton {
          * Specify whether the label should be hidden, or not
          */
         hideLabel: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the size of the Number Input.
+         */
+        size: PropTypes.Requireable<string>;
     };
 }
 export default NumberInputSkeleton;

package/es/components/NumberInput/NumberInput.Skeleton.js

@@ -15,6 +15,7 @@ function NumberInputSkeleton(_ref) {
   let {
     hideLabel,
     className,
+    size = 'md',
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -23,7 +24,7 @@ function NumberInputSkeleton(_ref) {
   }, rest), !hideLabel && /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--number ${prefix}--skeleton`
+    className: `${prefix}--number ${prefix}--skeleton ${prefix}--number--${size}`
   }));
 }
 NumberInputSkeleton.propTypes = {
@@ -34,7 +35,11 @@ NumberInputSkeleton.propTypes = {
   /**
    * Specify whether the label should be hidden, or not
    */
-  hideLabel: PropTypes.bool
+  hideLabel: PropTypes.bool,
+  /**
+   * Specify the size of the Number Input.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
 };
 
 export { NumberInputSkeleton as default };

package/es/components/Popover/index.js

@@ -128,6 +128,8 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
     middleware: [offset(!isTabTip ? 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'
     }), arrow({
       element: caretRef

package/es/components/Tabs/Tabs.js

@@ -322,8 +322,8 @@ function TabList(_ref4) {
   function onKeyDown(event) {
     if (matches(event, [ArrowRight, ArrowLeft, Home, End])) {
       event.preventDefault();
-      const filtredTabs = tabs.current.filter(tab => tab !== null);
-      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
+      const filteredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filteredTabs.filter(tab => !tab.disabled);
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
       if (activation === 'automatic') {
@@ -334,6 +334,18 @@ function TabList(_ref4) {
       tabs.current[nextIndex]?.focus();
     }
   }
+  function handleBlur(_ref5) {
+    let {
+      relatedTarget: currentActiveNode
+    } = _ref5;
+    if (ref.current?.contains(currentActiveNode)) {
+      return;
+    }
+    // reset active index to selected tab index for manual activation
+    if (activation === 'manual') {
+      setActiveIndex(selectedIndex);
+    }
+  }
   useEffectOnce(() => {
     const tab = tabs.current[selectedIndex];
     if (scrollIntoView && tab) {
@@ -419,10 +431,10 @@ function TabList(_ref4) {
     }
   }, [activation, activeIndex, selectedIndex, isScrollable, children]);
   usePressable(previousButton, {
-    onPress(_ref5) {
+    onPress(_ref6) {
       let {
         longPress
-      } = _ref5;
+      } = _ref6;
       if (!longPress && ref.current) {
         setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
@@ -432,10 +444,10 @@ function TabList(_ref4) {
     }
   });
   usePressable(nextButton, {
-    onPress(_ref6) {
+    onPress(_ref7) {
       let {
         longPress
-      } = _ref6;
+      } = _ref7;
       if (!longPress && ref.current) {
         setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
@@ -459,7 +471,8 @@ function TabList(_ref4) {
     role: "tablist",
     className: `${prefix}--tab--list`,
     onScroll: debouncedOnScroll,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur
   }), React__default.Children.map(children, (child, index) => {
     return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabContext.Provider, {
       value: {
@@ -544,7 +557,7 @@ TabList.propTypes = {
 
 // type TabElement = HTMLElement & { disabled?: boolean };
 
-function TabListVertical(_ref7) {
+function TabListVertical(_ref8) {
   let {
     activation = 'automatic',
     'aria-label': label,
@@ -552,7 +565,7 @@ function TabListVertical(_ref7) {
     className: customClassName,
     scrollIntoView,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const {
     activeIndex,
     selectedIndex,
@@ -569,8 +582,8 @@ function TabListVertical(_ref7) {
   function onKeyDown(event) {
     if (matches(event, [ArrowDown, ArrowUp, Home, End])) {
       event.preventDefault();
-      const filtredTabs = tabs.current.filter(tab => tab !== null);
-      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
+      const filteredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filteredTabs.filter(tab => !tab.disabled);
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndexVertical(event, activeTabs.length, currentIndex)]);
       if (activation === 'automatic') {
@@ -581,6 +594,18 @@ function TabListVertical(_ref7) {
       tabs.current[nextIndex]?.focus();
     }
   }
+  function handleBlur(_ref9) {
+    let {
+      relatedTarget: currentActiveNode
+    } = _ref9;
+    if (ref.current?.contains(currentActiveNode)) {
+      return;
+    }
+    // reset active index to selected tab index for manual activation
+    if (activation === 'manual') {
+      setActiveIndex(selectedIndex);
+    }
+  }
   useEffectOnce(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
@@ -647,7 +672,8 @@ function TabListVertical(_ref7) {
     ref: ref,
     role: "tablist",
     className: `${prefix}--tab--list`,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur
   }), React__default.Children.map(children, (child, index) => {
     return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabContext.Provider, {
       value: {
@@ -730,7 +756,7 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
  * Tab
  */
 
-const Tab = /*#__PURE__*/forwardRef(function Tab(_ref8, forwardRef) {
+const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
   let {
     as = 'button',
     children,
@@ -741,7 +767,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref8, forwardRef) {
     secondaryLabel,
     renderIcon: Icon,
     ...rest
-  } = _ref8;
+  } = _ref10;
   const prefix = usePrefix();
   const {
     selectedIndex,
@@ -983,7 +1009,7 @@ Tab.propTypes = {
  * IconTab
  */
 
-const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref9, ref) {
+const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11, ref) {
   let {
     children,
     className: customClassName,
@@ -992,7 +1018,7 @@ const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref9, r
     leaveDelayMs,
     label,
     ...rest
-  } = _ref9;
+  } = _ref11;
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName);
   return /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -1041,12 +1067,12 @@ IconTab.propTypes = {
  * TabPanel
  */
 
-const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref10, forwardRef) {
+const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref12, forwardRef) {
   let {
     children,
     className: customClassName,
     ...rest
-  } = _ref10;
+  } = _ref12;
   const prefix = usePrefix();
   const panel = useRef(null);
   const ref = useMergedRefs([forwardRef, panel]);
@@ -1121,10 +1147,10 @@ TabPanel.propTypes = {
  * TabPanels
  */
 
-function TabPanels(_ref11) {
+function TabPanels(_ref13) {
   let {
     children
-  } = _ref11;
+  } = _ref13;
   const prefix = usePrefix();
   const refs = useRef([]);
   const hiddenStates = useRef([]);
@@ -1158,7 +1184,7 @@ function TabPanels(_ref11) {
     }
   });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, React__default.Children.map(children, (child, index) => {
-    return /*#__PURE__*/React__default.createElement(TabPanelContext.Provider, {
+    return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabPanelContext.Provider, {
       value: index
     }, /*#__PURE__*/React__default.cloneElement(child, {
       ref: element => {

package/es/components/Tag/SelectableTag.d.ts

@@ -26,6 +26,14 @@ export interface SelectableTagBaseProps {
      * Can be a React component class
      */
     renderIcon?: React.ElementType;
+    /**
+     * Provide an optional hook that is called when selected is changed
+     */
+    onChange?: (selected: boolean) => void;
+    /**
+     * Provide an optional function to be called when the tag is clicked.
+     */
+    onClick?: (e: Event) => void;
     /**
      * Specify the state of the selectable tag.
      */
@@ -42,7 +50,7 @@ export interface SelectableTagBaseProps {
 }
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
 declare const SelectableTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, onChange, onClick, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
@@ -61,6 +69,14 @@ declare const SelectableTag: {
          * Can be a React component class
          */
         renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Provide an optional hook that is called when selected is changed
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called when the tag is clicked.
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
         /**
          * Specify the state of the selectable tag.
          */

package/es/components/Tag/SelectableTag.js

@@ -24,6 +24,8 @@ const SelectableTag = _ref => {
     disabled,
     id,
     renderIcon,
+    onChange,
+    onClick,
     selected = false,
     size,
     text,
@@ -42,13 +44,11 @@ const SelectableTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
-
-  // Removing onClick from the spread operator
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {
-    onClick,
-    ...otherProps
-  } = other;
+  const handleClick = e => {
+    setSelectedTag(!selectedTag);
+    onChange?.(!selectedTag);
+    onClick?.(e);
+  };
   if (isEllipsisApplied) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       label: text,
@@ -57,29 +57,29 @@ const SelectableTag = _ref => {
       leaveDelayMs: 0,
       onMouseEnter: () => false
     }, /*#__PURE__*/React__default.createElement(Tag, _extends({
-      "aria-pressed": selectedTag,
+      "aria-pressed": selectedTag !== false,
       ref: tagRef,
       size: size,
       renderIcon: renderIcon,
       disabled: disabled,
       className: tagClasses,
       id: tagId,
-      onClick: () => setSelectedTag(!selectedTag)
-    }, otherProps), /*#__PURE__*/React__default.createElement(Text, {
+      onClick: handleClick
+    }, other), /*#__PURE__*/React__default.createElement(Text, {
       title: text,
       className: `${prefix}--tag__label`
     }, text)));
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
-    "aria-pressed": selectedTag,
+    "aria-pressed": selectedTag !== false,
     ref: tagRef,
     size: size,
     renderIcon: renderIcon,
     disabled: disabled,
     className: tagClasses,
     id: tagId,
-    onClick: () => setSelectedTag(!selectedTag)
-  }, otherProps), /*#__PURE__*/React__default.createElement(Text, {
+    onClick: handleClick
+  }, other), /*#__PURE__*/React__default.createElement(Text, {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
@@ -102,6 +102,14 @@ SelectableTag.propTypes = {
    * Can be a React component class
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Provide an optional hook that is called when selected is changed
+   */
+  onChange: PropTypes.func,
+  /**
+   * Provide an optional function to be called when the tag is clicked.
+   */
+  onClick: PropTypes.func,
   /**
    * Specify the state of the selectable tag.
    */

package/es/components/UIShell/HeaderPanel.js

@@ -62,7 +62,7 @@ const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(
     const focusedElement = document.activeElement;
     setLastClickedElement(focusedElement);
     const childJsxElement = children;
-    if (childJsxElement.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
+    if (childJsxElement?.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();
     }

package/es/feature-flags.js

@@ -13,5 +13,6 @@ FeatureFlags.merge({
   'enable-v11-release': true,
   'enable-experimental-tile-contrast': false,
   'enable-v12-tile-radio-icons': false,
-  'enable-v12-structured-list-visible-icons': false
+  'enable-v12-structured-list-visible-icons': false,
+  'enable-v12-dynamic-floating-styles': false
 });

package/es/index.js

@@ -29,6 +29,7 @@ export { ModalHeader } from './components/ComposedModal/ModalHeader.js';
 export { ModalFooter } from './components/ComposedModal/ModalFooter.js';
 import './components/ContainedList/index.js';
 export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
+export { default as useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as DangerButton } from './components/DangerButton/DangerButton.js';
@@ -165,6 +166,8 @@ export { default as unstable__FluidComboBoxSkeleton } from './components/FluidCo
 export { default as unstable__FluidDatePicker } from './components/FluidDatePicker/FluidDatePicker.js';
 export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
 export { default as unstable__FluidDatePickerInput } from './components/FluidDatePickerInput/FluidDatePickerInput.js';
+export { default as unstable__FluidDropdown } from './components/FluidDropdown/FluidDropdown.js';
+export { default as unstable__FluidDropdownSkeleton } from './components/FluidDropdown/FluidDropdown.Skeleton.js';
 export { default as unstable__FluidMultiSelect } from './components/FluidMultiSelect/FluidMultiSelect.js';
 export { default as unstable__FluidMultiSelectSkeleton } from './components/FluidMultiSelect/FluidMultiSelect.Skeleton.js';
 export { default as unstable__FluidSelect } from './components/FluidSelect/FluidSelect.js';
@@ -202,12 +205,9 @@ export { default as unstable_PageSelector } from './components/Pagination/experi
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as ContainedList } from './components/ContainedList/ContainedList.js';
-export { default as useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
-export { default as unstable__FluidDropdown } from './components/FluidDropdown/FluidDropdown.js';
-export { default as unstable__FluidDropdownSkeleton } from './components/FluidDropdown/FluidDropdown.Skeleton.js';
 export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
 export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
 export { Text as unstable_Text } from './components/Text/Text.js';

package/lib/components/Checkbox/Checkbox.js

@@ -91,7 +91,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       }
       if (typeof ref === 'function') {
         ref(el);
-      } else if (ref && Object(ref) === ref) {
+      } else if (ref && 'current' in ref) {
         ref.current = el;
       }
     }

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

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2020, 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 useContextMenu from './useContextMenu';
+export { useContextMenu };

package/lib/components/ContextMenu/useContextMenu.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+/// <reference types="react" />
+type TriggerType = Element | Document | Window | React.RefObject<Element>;
+interface ContextMenuProps {
+    open: boolean;
+    x: number;
+    y: number;
+    onClose: () => void;
+    mode: string;
+}
+/**
+ * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click
+ * @returns {ContextMenuProps} Props object to pass onto Menu component
+ */
+declare function useContextMenu(trigger?: TriggerType): ContextMenuProps;
+export default useContextMenu;

package/lib/components/ContextMenu/useContextMenu.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 /**
- * @param {Element|Document|Window|object} [trigger=document] The element or ref which should trigger the Menu on right-click
- * @returns {object} Props object to pass onto Menu component
+ * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click
+ * @returns {ContextMenuProps} Props object to pass onto Menu component
  */
 function useContextMenu() {
   let trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
@@ -22,8 +22,8 @@ function useContextMenu() {
   function openContextMenu(e) {
     e.preventDefault();
     const {
-      x,
-      y
+      clientX: x,
+      clientY: y
     } = e;
     setPosition([x, y]);
     setOpen(true);
@@ -32,11 +32,12 @@ function useContextMenu() {
     setOpen(false);
   }
   React.useEffect(() => {
-    const el = trigger?.current ?? trigger;
-    if (el && el instanceof Element || el instanceof Document || el instanceof Window) {
-      el.addEventListener('contextmenu', openContextMenu);
+    const el = trigger instanceof Element || trigger instanceof Document || trigger instanceof Window ? trigger : trigger.current;
+    if (el) {
+      const eventListener = e => openContextMenu(e);
+      el.addEventListener('contextmenu', eventListener);
       return () => {
-        el.removeEventListener('contextmenu', openContextMenu);
+        el.removeEventListener('contextmenu', eventListener);
       };
     }
   }, [trigger]);

package/lib/components/DataTable/DataTable.d.ts

@@ -6,6 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
+import type { MouseEvent } from 'react';
 import type { DataTableSortState } from './state/sortStates';
 import Table from './Table';
 import TableActionList from './TableActionList';
@@ -131,13 +132,13 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     }) => {
         ariaLabel: string;
         'aria-label': string;
-        checked?: boolean;
+        checked?: boolean | undefined;
         disabled?: boolean | undefined;
         id: string;
         indeterminate?: boolean;
         name: string;
         onSelect: (e: React.MouseEvent<HTMLInputElement>) => void;
-        radio?: boolean;
+        radio?: boolean | undefined;
         [key: string]: unknown;
     };
     getToolbarProps: (getToolbarPropsArgs?: {

package/lib/components/Dropdown/Dropdown.d.ts

@@ -12,7 +12,7 @@ type ExcludedAttributes = 'id' | 'onChange';
 export interface OnChangeData<ItemType> {
     selectedItem: ItemType | null;
 }
-export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey> {
+export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey>, React.RefAttributes<HTMLDivElement> {
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.
@@ -127,7 +127,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * Provide the title text that will be read by a screen reader when
      * visiting this control
      */
-    titleText?: ReactNode;
+    titleText: ReactNode;
     /**
      * The dropdown type, `default` or `inline`
      */