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

package/lib/components/Popover/index.js

@@ -138,6 +138,8 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
     middleware: [react.offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && react.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'
     }), react.arrow({
       element: caretRef

package/lib/components/Tabs/Tabs.js

@@ -333,8 +333,8 @@ function TabList(_ref4) {
   function onKeyDown(event) {
     if (match.matches(event, [keys.ArrowRight, keys.ArrowLeft, keys.Home, keys.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') {
@@ -345,6 +345,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.useEffectOnce(() => {
     const tab = tabs.current[selectedIndex];
     if (scrollIntoView && tab) {
@@ -430,10 +442,10 @@ function TabList(_ref4) {
     }
   }, [activation, activeIndex, selectedIndex, isScrollable, children]);
   usePressable.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));
       }
@@ -443,10 +455,10 @@ function TabList(_ref4) {
     }
   });
   usePressable.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));
       }
@@ -470,7 +482,8 @@ function TabList(_ref4) {
     role: "tablist",
     className: `${prefix}--tab--list`,
     onScroll: debouncedOnScroll,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur
   }), React__default["default"].Children.map(children, (child, index) => {
     return !reactIs.isElement(child) ? null : /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
       value: {
@@ -555,7 +568,7 @@ TabList.propTypes = {
 
 // type TabElement = HTMLElement & { disabled?: boolean };
 
-function TabListVertical(_ref7) {
+function TabListVertical(_ref8) {
   let {
     activation = 'automatic',
     'aria-label': label,
@@ -563,7 +576,7 @@ function TabListVertical(_ref7) {
     className: customClassName,
     scrollIntoView,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const {
     activeIndex,
     selectedIndex,
@@ -580,8 +593,8 @@ function TabListVertical(_ref7) {
   function onKeyDown(event) {
     if (match.matches(event, [keys.ArrowDown, keys.ArrowUp, keys.Home, keys.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') {
@@ -592,6 +605,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.useEffectOnce(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
@@ -658,7 +683,8 @@ function TabListVertical(_ref7) {
     ref: ref,
     role: "tablist",
     className: `${prefix}--tab--list`,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur
   }), React__default["default"].Children.map(children, (child, index) => {
     return !reactIs.isElement(child) ? null : /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
       value: {
@@ -741,7 +767,7 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
  * Tab
  */
 
-const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref8, forwardRef) {
+const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
   let {
     as = 'button',
     children,
@@ -752,7 +778,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref8, forwardRef) {
     secondaryLabel,
     renderIcon: Icon,
     ...rest
-  } = _ref8;
+  } = _ref10;
   const prefix = usePrefix.usePrefix();
   const {
     selectedIndex,
@@ -994,7 +1020,7 @@ Tab.propTypes = {
  * IconTab
  */
 
-const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab(_ref9, ref) {
+const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab(_ref11, ref) {
   let {
     children,
     className: customClassName,
@@ -1003,7 +1029,7 @@ const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconT
     leaveDelayMs,
     label,
     ...rest
-  } = _ref9;
+  } = _ref11;
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--tabs__nav-item--icon-only`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
@@ -1052,12 +1078,12 @@ IconTab.propTypes = {
  * TabPanel
  */
 
-const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPanel(_ref10, forwardRef) {
+const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPanel(_ref12, forwardRef) {
   let {
     children,
     className: customClassName,
     ...rest
-  } = _ref10;
+  } = _ref12;
   const prefix = usePrefix.usePrefix();
   const panel = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, panel]);
@@ -1132,10 +1158,10 @@ TabPanel.propTypes = {
  * TabPanels
  */
 
-function TabPanels(_ref11) {
+function TabPanels(_ref13) {
   let {
     children
-  } = _ref11;
+  } = _ref13;
   const prefix = usePrefix.usePrefix();
   const refs = React.useRef([]);
   const hiddenStates = React.useRef([]);
@@ -1169,7 +1195,7 @@ function TabPanels(_ref11) {
     }
   });
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].Children.map(children, (child, index) => {
-    return /*#__PURE__*/React__default["default"].createElement(TabPanelContext.Provider, {
+    return !reactIs.isElement(child) ? null : /*#__PURE__*/React__default["default"].createElement(TabPanelContext.Provider, {
       value: index
     }, /*#__PURE__*/React__default["default"].cloneElement(child, {
       ref: element => {

package/lib/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/lib/components/Tag/SelectableTag.js

@@ -34,6 +34,8 @@ const SelectableTag = _ref => {
     disabled,
     id,
     renderIcon,
+    onChange,
+    onClick,
     selected = false,
     size,
     text,
@@ -52,13 +54,11 @@ const SelectableTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   const tooltipClasses = cx__default["default"](`${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["default"].createElement(Tooltip.Tooltip, {
       label: text,
@@ -67,29 +67,29 @@ const SelectableTag = _ref => {
       leaveDelayMs: 0,
       onMouseEnter: () => false
     }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["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["default"].createElement(Text.Text, {
+      onClick: handleClick
+    }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       title: text,
       className: `${prefix}--tag__label`
     }, text)));
   }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["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["default"].createElement(Text.Text, {
+    onClick: handleClick
+  }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
@@ -112,6 +112,14 @@ SelectableTag.propTypes = {
    * Can be a React component class
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  /**
+   * Provide an optional hook that is called when selected is changed
+   */
+  onChange: PropTypes__default["default"].func,
+  /**
+   * Provide an optional function to be called when the tag is clicked.
+   */
+  onClick: PropTypes__default["default"].func,
   /**
    * Specify the state of the selectable tag.
    */

package/lib/components/UIShell/HeaderPanel.js

@@ -72,7 +72,7 @@ const HeaderPanel = /*#__PURE__*/React__default["default"].forwardRef(function H
     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/lib/feature-flags.js

@@ -35,5 +35,6 @@ FeatureFlags__namespace.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/lib/index.js

@@ -33,6 +33,7 @@ var ModalHeader = require('./components/ComposedModal/ModalHeader.js');
 var ModalFooter = require('./components/ComposedModal/ModalFooter.js');
 require('./components/ContainedList/index.js');
 var index$6 = require('./components/ContentSwitcher/index.js');
+var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
 var Copy = require('./components/Copy/Copy.js');
 var CopyButton = require('./components/CopyButton/CopyButton.js');
 var DangerButton = require('./components/DangerButton/DangerButton.js');
@@ -169,6 +170,8 @@ var FluidComboBox_Skeleton = require('./components/FluidComboBox/FluidComboBox.S
 var FluidDatePicker = require('./components/FluidDatePicker/FluidDatePicker.js');
 var FluidDatePicker_Skeleton = require('./components/FluidDatePicker/FluidDatePicker.Skeleton.js');
 var FluidDatePickerInput = require('./components/FluidDatePickerInput/FluidDatePickerInput.js');
+var FluidDropdown = require('./components/FluidDropdown/FluidDropdown.js');
+var FluidDropdown_Skeleton = require('./components/FluidDropdown/FluidDropdown.Skeleton.js');
 var FluidMultiSelect = require('./components/FluidMultiSelect/FluidMultiSelect.js');
 var FluidMultiSelect_Skeleton = require('./components/FluidMultiSelect/FluidMultiSelect.Skeleton.js');
 var FluidSelect = require('./components/FluidSelect/FluidSelect.js');
@@ -206,12 +209,9 @@ var PageSelector = require('./components/Pagination/experimental/PageSelector.js
 var Pagination = require('./components/Pagination/experimental/Pagination.js');
 var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
 var ContainedList = require('./components/ContainedList/ContainedList.js');
-var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
 var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
 var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
 var TextInput = require('./components/TextInput/TextInput.js');
-var FluidDropdown = require('./components/FluidDropdown/FluidDropdown.js');
-var FluidDropdown_Skeleton = require('./components/FluidDropdown/FluidDropdown.Skeleton.js');
 var LayoutDirection = require('./components/LayoutDirection/LayoutDirection.js');
 var useLayoutDirection = require('./components/LayoutDirection/useLayoutDirection.js');
 var Text = require('./components/Text/Text.js');
@@ -270,6 +270,7 @@ exports.ModalBody = ComposedModal.ModalBody;
 exports.ModalHeader = ModalHeader.ModalHeader;
 exports.ModalFooter = ModalFooter.ModalFooter;
 exports.ContentSwitcher = index$6["default"];
+exports.useContextMenu = useContextMenu["default"];
 exports.Copy = Copy["default"];
 exports.CopyButton = CopyButton["default"];
 exports.DangerButton = DangerButton["default"];
@@ -437,6 +438,8 @@ exports.unstable__FluidComboBoxSkeleton = FluidComboBox_Skeleton["default"];
 exports.unstable__FluidDatePicker = FluidDatePicker["default"];
 exports.unstable__FluidDatePickerSkeleton = FluidDatePicker_Skeleton["default"];
 exports.unstable__FluidDatePickerInput = FluidDatePickerInput["default"];
+exports.unstable__FluidDropdown = FluidDropdown["default"];
+exports.unstable__FluidDropdownSkeleton = FluidDropdown_Skeleton["default"];
 exports.unstable__FluidMultiSelect = FluidMultiSelect["default"];
 exports.unstable__FluidMultiSelectSkeleton = FluidMultiSelect_Skeleton["default"];
 exports.unstable__FluidSelect = FluidSelect["default"];
@@ -489,12 +492,9 @@ exports.unstable_PageSelector = PageSelector["default"];
 exports.unstable_Pagination = Pagination["default"];
 exports.ContainedListItem = ContainedListItem["default"];
 exports.ContainedList = ContainedList["default"];
-exports.useContextMenu = useContextMenu["default"];
 exports.SliderSkeleton = Slider_Skeleton["default"];
 exports.TextInputSkeleton = TextInput_Skeleton["default"];
 exports.TextInput = TextInput["default"];
-exports.unstable__FluidDropdown = FluidDropdown["default"];
-exports.unstable__FluidDropdownSkeleton = FluidDropdown_Skeleton["default"];
 exports.unstable_LayoutDirection = LayoutDirection.LayoutDirection;
 exports.unstable_useLayoutDirection = useLayoutDirection.useLayoutDirection;
 exports.unstable_Text = Text.Text;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.69.0-rc.0",
+  "version": "1.70.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -39,7 +39,8 @@
     "clean": "rimraf es lib icons/index.js icons/index.d.ts icons/index.esm.js storybook-static",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
     "storybook": "storybook dev -p 3000",
-    "storybook:build": "storybook build"
+    "storybook:build": "storybook build",
+    "telemetry:config": "npx -y @ibm/telemetry-js-config-generator generate --id fd89d12b-6a39-48b4-adf4-30c94dc0dddd --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)"
   },
   "peerDependencies": {
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
@@ -48,10 +49,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@carbon/feature-flags": "^0.24.0-rc.0",
-    "@carbon/icons-react": "^11.52.0-rc.0",
-    "@carbon/layout": "^11.28.0-rc.0",
-    "@carbon/styles": "^1.68.0-rc.0",
+    "@carbon/feature-flags": "^0.24.0",
+    "@carbon/icons-react": "^11.52.0",
+    "@carbon/layout": "^11.28.0",
+    "@carbon/styles": "^1.69.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,11 +80,11 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@carbon/test-utils": "^10.33.0",
-    "@carbon/themes": "^11.43.0-rc.0",
+    "@carbon/test-utils": "^10.34.0",
+    "@carbon/themes": "^11.43.0",
     "@figma/code-connect": "^1.1.4",
     "@rollup/plugin-babel": "^6.0.0",
-    "@rollup/plugin-commonjs": "^26.0.0",
+    "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
     "@storybook/addon-a11y": "^8.2.8",
@@ -114,6 +115,7 @@
     "mini-css-extract-plugin": "^2.4.5",
     "postcss": "^8.4.5",
     "postcss-loader": "^8.0.0",
+    "prettier2": "npm:prettier@2",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
@@ -144,5 +146,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "e48f5e6815bd93e518e8da73c7555590b85cda22"
+  "gitHead": "8708f6dfd38bea7d5bd6d14ce34293c014cba87c"
 }