@carbon/react 1.69.0-rc.0 → 1.69.0

package/lib/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -143,6 +143,10 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * what this field is for
      */
     placeholder?: string;
+    /**
+     * Whether or not the filterable multiselect is readonly
+     */
+    readOnly?: boolean;
     /**
      * Specify feedback (mode) of the selection.
      * `top`: selected item jumps to top

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -102,6 +102,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     onChange,
     onMenuChange,
     placeholder,
+    readOnly,
     titleText,
     type,
     selectionFeedback = 'top-after-reopen',
@@ -244,9 +245,11 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     }
   };
   function handleMenuChange(forceIsOpen) {
-    const nextIsOpen = forceIsOpen ?? !isOpen;
-    setIsOpen(nextIsOpen);
-    validateHighlightFocus();
+    if (!readOnly) {
+      const nextIsOpen = forceIsOpen ?? !isOpen;
+      setIsOpen(nextIsOpen);
+      validateHighlightFocus();
+    }
   }
   React.useEffect(() => {
     onMenuChange?.(isOpen);
@@ -435,7 +438,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     [`${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({
@@ -522,6 +526,24 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       setIsFocused(evt?.type === 'focus' ? true : false);
     }
   };
+  const mergedRef = mergeRefs["default"](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["default"].createElement("span", {
     className: `${prefix}--visually-hidden`
   }, clearSelectionDescription, " ", controlledSelectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default["default"].createElement("span", {
@@ -545,12 +567,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     invalidText: invalidText,
     warn: warn,
     warnText: warnText,
-    isOpen: isOpen,
+    isOpen: !readOnly && isOpen,
     size: size
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__field`,
     ref: autoAlign ? refs.setReference : null
   }, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
+    readOnly: readOnly,
     clearSelection: () => {
       clearSelection();
       if (textInput.current) {
@@ -563,7 +586,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
   }), /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
     className: inputClasses
   }, inputProps, {
-    ref: mergeRefs["default"](textInput, inputProps.ref)
+    ref: mergedRef
+  }, readOnlyEventHandlers, {
+    readOnly: readOnly
   })), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
@@ -572,6 +597,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     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/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([]);

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/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.69.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,10 +48,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.68.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,11 +79,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 +114,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 +145,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "e48f5e6815bd93e518e8da73c7555590b85cda22"
+  "gitHead": "3141442e5ef367667c8f1d379a1b4a23f67992ad"
 }