@carbon/react 1.52.0 → 1.53.0

package/lib/components/Tag/Tag.js

@@ -17,6 +17,7 @@ var iconsReact = require('@carbon/icons-react');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -41,6 +42,11 @@ const TYPES = {
   'high-contrast': 'High-Contrast',
   outline: 'Outline'
 };
+const SIZES = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg'
+};
 const Tag = _ref => {
   let {
     children,
@@ -48,10 +54,13 @@ const Tag = _ref => {
     id,
     type,
     filter,
+    // remove filter in next major release - V12
     renderIcon: CustomIconElement,
     title = 'Clear filter',
+    // remove title in next major release - V12
     disabled,
     onClose,
+    // remove onClose in next major release - V12
     size,
     as: BaseComponent,
     slug,
@@ -59,6 +68,8 @@ const Tag = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
+  const conditions = [`${prefix}--tag--selectable`, `${prefix}--tag--filter`, `${prefix}--tag--operational`];
+  const isInteractiveTag = conditions.some(el => className?.includes(el));
   const tagClasses = cx__default["default"](`${prefix}--tag`, className, {
     [`${prefix}--tag--disabled`]: disabled,
     [`${prefix}--tag--filter`]: filter,
@@ -66,7 +77,7 @@ const Tag = _ref => {
     // TODO: V12 - Remove this class
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--tag--${type}`]: type,
-    [`${prefix}--tag--interactive`]: other.onClick && !filter
+    [`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag
   });
   const typeText = type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : '';
   const handleClose = event => {
@@ -78,7 +89,7 @@ const Tag = _ref => {
 
   // Slug is always size `md` and `inline`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'Slug' && !isInteractiveTag) {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'sm',
       kind: 'inline'
@@ -89,7 +100,7 @@ const Tag = _ref => {
     return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
       className: tagClasses,
       id: tagId
-    }, other), CustomIconElement ? /*#__PURE__*/React__default["default"].createElement("div", {
+    }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--tag__custom-icon`
     }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       className: `${prefix}--tag__label`,
@@ -103,16 +114,14 @@ const Tag = _ref => {
       title: title
     }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
   }
-  const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
+  const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? 'button' : 'div');
   return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
-    disabled: ComponentTag === 'button' ? disabled : null,
+    disabled: disabled,
     className: tagClasses,
     id: tagId
-  }, other), CustomIconElement ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tag__custom-icon`
-  }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    title: typeof children === 'string' ? children : undefined
-  }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
+  }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, null, children !== null && children !== undefined ? children : typeText), normalizedSlug);
 };
 Tag.propTypes = {
   /**
@@ -135,7 +144,7 @@ Tag.propTypes = {
   /**
    * Determine if `Tag` is a filter/chip
    */
-  filter: PropTypes__default["default"].bool,
+  filter: deprecate["default"](PropTypes__default["default"].bool, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the id for the tag.
    */
@@ -143,17 +152,17 @@ Tag.propTypes = {
   /**
    * Click handler for filter tag close button.
    */
-  onClose: PropTypes__default["default"].func,
+  onClose: deprecate["default"](PropTypes__default["default"].func, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Optional prop to render a custom icon.
    * Can be a React component class
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
-   * Specify the size of the Tag. Currently supports either `sm` or
-   * 'md' (default) sizes.
+   * Specify the size of the Tag. Currently supports either `sm`,
+   * `md` (default) or `lg` sizes.
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md']),
+  size: PropTypes__default["default"].oneOf(Object.keys(SIZES)),
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
    */
@@ -161,13 +170,13 @@ Tag.propTypes = {
   /**
    * Text to show on clear filters
    */
-  title: PropTypes__default["default"].string,
+  title: deprecate["default"](PropTypes__default["default"].string, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the type of the `Tag`
    */
   type: PropTypes__default["default"].oneOf(Object.keys(TYPES))
 };
-const types = Object.keys(TYPES);
 
+exports.SIZES = SIZES;
+exports.TYPES = TYPES;
 exports["default"] = Tag;
-exports.types = types;

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

@@ -6,6 +6,5 @@
  */
 import Tag from './Tag';
 export * from './Tag.Skeleton';
-export * from './Tag';
 export default Tag;
 export { Tag };

package/lib/components/Toggle/Toggle.js

@@ -75,6 +75,7 @@ function Toggle(_ref) {
   const switchClasses = cx__default["default"](`${prefix}--toggle__switch`, {
     [`${prefix}--toggle__switch--checked`]: checked
   });
+  const labelId = `${id}_label`;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -98,10 +99,11 @@ function Toggle(_ref) {
       role: "switch",
       type: "button",
       "aria-checked": checked,
-      "aria-labelledby": id,
+      "aria-labelledby": ariaLabelledby ?? labelId,
       disabled: disabled,
       onClick: handleClick
     })), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {
+      id: labelId,
       htmlFor: ariaLabelledby ? undefined : id,
       className: `${prefix}--toggle__label`
     }, labelText && /*#__PURE__*/React__default["default"].createElement(Text.Text, {

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

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import { type ElementType, type ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 import { type PopoverAlignment } from '../Popover';
+import { PolymorphicProps } from '../../types/common';
 type ToggletipLabelProps<E extends ElementType> = {
     as?: E | undefined;
     children?: ReactNode;
@@ -78,16 +79,17 @@ export declare namespace Toggletip {
         defaultOpen: PropTypes.Requireable<boolean>;
     };
 }
-interface ToggletipButtonProps {
+interface ToggletipButtonBaseProps {
     children?: ReactNode;
     className?: string | undefined;
     label?: string | undefined;
 }
+export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps<T, ToggletipButtonBaseProps>;
 /**
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-export declare function ToggletipButton({ children, className: customClassName, label, }: ToggletipButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggletipButton<T extends React.ElementType>({ children, className: customClassName, label, as: BaseComponent, ...rest }: ToggleTipButtonProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ToggletipButton {
     var propTypes: {
         /**

package/lib/components/Toggletip/index.js

@@ -102,6 +102,9 @@ function Toggletip(_ref2) {
     },
     contentProps: {
       id
+    },
+    onClick: {
+      onClick: actions.toggle
     }
   };
   const onKeyDown = event => {
@@ -189,16 +192,24 @@ function ToggletipButton(_ref3) {
   let {
     children,
     className: customClassName,
-    label = 'Show information'
+    label = 'Show information',
+    as: BaseComponent,
+    ...rest
   } = _ref3;
   const toggletip = useToggletip();
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-button`, customClassName);
+  const ComponentToggle = BaseComponent ?? 'button';
+  if (ComponentToggle !== 'button') {
+    return /*#__PURE__*/React__default["default"].createElement(ComponentToggle, _rollupPluginBabelHelpers["extends"]({}, toggletip?.onClick, {
+      className: className
+    }, rest), children);
+  }
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, toggletip?.buttonProps, {
     "aria-label": label,
     type: "button",
     className: className
-  }), children);
+  }, rest), children);
 }
 ToggletipButton.propTypes = {
   /**

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -59,6 +59,9 @@ const DefinitionTooltip = _ref => {
     onMouseEnter: () => {
       openOnHover ? setOpen(true) : null;
     },
+    onFocus: () => {
+      setOpen(true);
+    },
     open: isOpen
   }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](`${prefix}--definition-term`, triggerClassName),

package/lib/feature-flags.js

@@ -33,5 +33,6 @@ FeatureFlags__namespace.merge({
   'enable-css-custom-properties': true,
   'enable-css-grid': true,
   'enable-v11-release': true,
-  'enable-experimental-tile-contrast': false
+  'enable-experimental-tile-contrast': false,
+  'enable-v12-tile-radio-icons': false
 });

package/lib/index.js

@@ -29,6 +29,8 @@ var ComposedModal = require('./components/ComposedModal/ComposedModal.js');
 var ModalHeader = require('./components/ComposedModal/ModalHeader.js');
 var ModalFooter = require('./components/ComposedModal/ModalFooter.js');
 var index$6 = require('./components/ContentSwitcher/index.js');
+var Copy = require('./components/Copy/Copy.js');
+var CopyButton = require('./components/CopyButton/CopyButton.js');
 var DangerButton = require('./components/DangerButton/DangerButton.js');
 require('./components/DataTable/index.js');
 var DataTableSkeleton = require('./components/DataTableSkeleton/DataTableSkeleton.js');
@@ -173,8 +175,6 @@ var CodeSnippet = require('./components/CodeSnippet/CodeSnippet.js');
 var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
 var ContainedList = require('./components/ContainedList/ContainedList.js');
 var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
-var Copy = require('./components/Copy/Copy.js');
-var CopyButton = require('./components/CopyButton/CopyButton.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');
@@ -255,6 +255,8 @@ exports.ModalBody = ComposedModal.ModalBody;
 exports.ModalHeader = ModalHeader.ModalHeader;
 exports.ModalFooter = ModalFooter.ModalFooter;
 exports.ContentSwitcher = index$6["default"];
+exports.Copy = Copy["default"];
+exports.CopyButton = CopyButton["default"];
 exports.DangerButton = DangerButton["default"];
 exports.DataTableSkeleton = DataTableSkeleton["default"];
 exports.DatePicker = DatePicker["default"];
@@ -347,7 +349,6 @@ exports.Tabs = Tabs.Tabs;
 exports.TabContent = TabContent["default"];
 exports.TabsSkeleton = Tabs_Skeleton["default"];
 exports.Tag = Tag["default"];
-exports.types = Tag.types;
 exports.TagSkeleton = Tag_Skeleton["default"];
 exports.TextArea = TextArea["default"];
 exports.TextAreaSkeleton = TextArea_Skeleton["default"];
@@ -439,8 +440,6 @@ exports.CodeSnippet = CodeSnippet["default"];
 exports.ContainedListItem = ContainedListItem["default"];
 exports.ContainedList = ContainedList["default"];
 exports.useContextMenu = useContextMenu["default"];
-exports.Copy = Copy["default"];
-exports.CopyButton = CopyButton["default"];
 exports.SliderSkeleton = Slider_Skeleton["default"];
 exports.TextInputSkeleton = TextInput_Skeleton["default"];
 exports.TextInput = TextInput["default"];

package/lib/internal/Selection.js

@@ -49,7 +49,16 @@ function useSelection(_ref2) {
   const savedOnChange = React.useRef(onChange);
   const [uncontrolledItems, setUncontrolledItems] = React.useState(initialSelectedItems);
   const isControlled = !!controlledItems;
-  const selectedItems = isControlled ? controlledItems : uncontrolledItems;
+  const [selectedItems, setSelectedItems] = React.useState(isControlled ? controlledItems : uncontrolledItems);
+  React.useEffect(() => {
+    callOnChangeHandler({
+      isControlled,
+      isMounted: isMounted.current,
+      onChangeHandlerControlled: savedOnChange.current,
+      onChangeHandlerUncontrolled: setUncontrolledItems,
+      selectedItems: selectedItems
+    });
+  }, [isControlled, isMounted, selectedItems]);
   const onItemChange = React.useCallback(item => {
     if (disabled) {
       return;
@@ -60,27 +69,12 @@ function useSelection(_ref2) {
         selectedIndex = index;
       }
     });
-    let newSelectedItems;
     if (selectedIndex === undefined) {
-      newSelectedItems = selectedItems.concat(item);
-      callOnChangeHandler({
-        isControlled,
-        isMounted: isMounted.current,
-        onChangeHandlerControlled: savedOnChange.current,
-        onChangeHandlerUncontrolled: setUncontrolledItems,
-        selectedItems: newSelectedItems
-      });
+      setSelectedItems(selectedItems => selectedItems.concat(item));
       return;
     }
-    newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
-    callOnChangeHandler({
-      isControlled,
-      isMounted: isMounted.current,
-      onChangeHandlerControlled: savedOnChange.current,
-      onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: newSelectedItems
-    });
-  }, [disabled, isControlled, selectedItems]);
+    setSelectedItems(selectedItems => removeAtIndex(selectedItems, selectedIndex));
+  }, [disabled, selectedItems]);
   const clearSelection = React.useCallback(() => {
     if (disabled) {
       return;
@@ -90,7 +84,7 @@ function useSelection(_ref2) {
       isMounted: isMounted.current,
       onChangeHandlerControlled: savedOnChange.current,
       onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: []
+      selectedItems: setSelectedItems([])
     });
   }, [disabled, isControlled]);
   React.useEffect(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.52.0",
+  "version": "1.53.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,14 +48,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.17.0",
-    "@carbon/icons-react": "^11.37.0",
-    "@carbon/layout": "^11.20.0",
-    "@carbon/styles": "^1.52.0",
+    "@carbon/feature-flags": "^0.18.0",
+    "@carbon/icons-react": "^11.38.0",
+    "@carbon/layout": "^11.21.0",
+    "@carbon/styles": "^1.53.0",
     "@ibm/telemetry-js": "^1.2.1",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.3.1",
+    "downshift": "8.4.0",
     "flatpickr": "4.6.13",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.32.0",
+    "@carbon/themes": "^11.33.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "4f119eac6b9dbcf910a64cd89fddacbc9c61ef8c"
+  "gitHead": "7920f5261d5867837e0b7e6092c98a6597ac0771"
 }