@carbon/react 1.58.1 → 1.59.0-rc.0

package/lib/components/Accordion/Accordion.js

@@ -29,6 +29,7 @@ function Accordion(_ref) {
     className: customClassName,
     disabled = false,
     isFlush = false,
+    ordered = false,
     size,
     ...rest
   } = _ref;
@@ -40,9 +41,10 @@ function Accordion(_ref) {
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
+  const ListTag = ordered ? 'ol' : 'ul';
   return /*#__PURE__*/React__default["default"].createElement(AccordionProvider.AccordionProvider, {
     disabled: disabled
-  }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__default["default"].createElement(ListTag, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children));
 }
@@ -67,6 +69,11 @@ Accordion.propTypes = {
    * Specify whether Accordion text should be flush, default is false, does not work with align="start"
    */
   isFlush: PropTypes__default["default"].bool,
+  /**
+   * Specify if the Accordion should be an ordered list,
+   * default is `false`
+   */
+  ordered: PropTypes__default["default"].bool,
   /**
    * Specify the size of the Accordion. Currently supports the following:
    */

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -37,6 +37,7 @@ function CheckboxGroup(_ref) {
     warn,
     warnText,
     slug,
+    orientation = 'vertical',
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -49,6 +50,7 @@ function CheckboxGroup(_ref) {
     className: `${prefix}--form__helper-text`
   }, helperText) : null;
   const fieldsetClasses = cx__default["default"](`${prefix}--checkbox-group`, className, {
+    [`${prefix}--checkbox-group--${orientation}`]: orientation === 'horizontal',
     [`${prefix}--checkbox-group--readonly`]: readOnly,
     [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid,
     [`${prefix}--checkbox-group--warning`]: showWarning,
@@ -68,6 +70,7 @@ function CheckboxGroup(_ref) {
     "data-invalid": invalid ? true : undefined,
     "aria-labelledby": rest['aria-labelledby'] || legendId,
     "aria-readonly": readOnly,
+    orientation: "vertical",
     "aria-describedby": !invalid && !warn && helper ? helperId : undefined
   }, rest), /*#__PURE__*/React__default["default"].createElement("legend", {
     className: `${prefix}--label`,
@@ -114,6 +117,10 @@ CheckboxGroup.propTypes = {
    * Provide the text to be rendered inside of the fieldset <legend>
    */
   legendText: PropTypes__default["default"].node.isRequired,
+  /**
+   * Provide the orientation for how the checkbox should be displayed
+   */
+  orientation: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
   /**
    * Whether the CheckboxGroup should be read-only
    */

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

@@ -8,6 +8,7 @@ import React from 'react';
 import { IconButton } from '../IconButton';
 import Button from '../Button';
 import { Menu } from '../Menu';
+export type MenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 interface ComboButtonProps {
     /**
      * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`.
@@ -28,7 +29,7 @@ interface ComboButtonProps {
     /**
      * Experimental property. Specify how the menu should align with the button element
      */
-    menuAlignment?: React.ComponentProps<typeof Menu>['menuAlignment'];
+    menuAlignment?: MenuAlignment;
     /**
      * Provide an optional function to be called when the primary action element is clicked.
      */

package/lib/components/ComboButton/index.js

@@ -21,8 +21,9 @@ var Menu = require('../Menu/Menu.js');
 require('../Menu/MenuItem.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');
-var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var react = require('@floating-ui/react');
+var mergeRefs = require('../../tools/mergeRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +32,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _ChevronDown;
-const spacing = 0; // top and bottom spacing between the button and the menu. in px
 const defaultTranslations = {
   'carbon.combo-button.additional-actions': 'Additional actions'
 };
@@ -54,23 +54,54 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
   const id = useId.useId('combobutton');
   const prefix = usePrefix.usePrefix();
   const containerRef = React.useRef(null);
-  const menuRef = React.useRef(null);
-  const ref = useMergedRefs.useMergedRefs([forwardRef, containerRef]);
-  const [width, setWidth] = React.useState(0);
+  const middlewares = [react.flip({
+    crossAxis: false
+  })];
+  if (menuAlignment === 'bottom' || menuAlignment === 'top') {
+    middlewares.push(react.size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    }));
+  }
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = react.useFloating({
+    placement: menuAlignment,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: middlewares,
+    whileElementsMounted: react.autoUpdate
+  });
+  const ref = mergeRefs["default"](forwardRef, containerRef, refs.setReference);
   const {
     open,
-    x,
-    y,
     handleClick: hookOnClick,
     handleMousedown: handleTriggerMousedown,
     handleClose
   } = useAttachedMenu.useAttachedMenu(containerRef);
+  React.useLayoutEffect(() => {
+    Object.keys(floatingStyles).forEach(style => {
+      if (refs.floating.current) {
+        refs.floating.current.style[style] = floatingStyles[style];
+      }
+    });
+  }, [floatingStyles, refs.floating, middlewareData, placement, open]);
   function handleTriggerClick() {
     if (containerRef.current) {
-      const {
-        width: w
-      } = containerRef.current.getBoundingClientRect();
-      setWidth(w);
       hookOnClick();
     }
   }
@@ -79,15 +110,6 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
       onClick(e);
     }
   }
-  function handleOpen() {
-    if (menuRef.current) {
-      menuRef.current.style.inlineSize = `${width}px`;
-      menuRef.current.style.minInlineSize = `${width}px`;
-      if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
-        menuRef.current.style.inlineSize = `fit-content`;
-      }
-    }
-  }
   const containerClasses = cx__default["default"](`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
     [`${prefix}--combo-button__container--open`]: open
   }, className);
@@ -106,6 +128,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     disabled: disabled,
     onClick: handlePrimaryActionClick
   }, label)), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    ref: refs.setReference,
     className: triggerClasses,
     label: t('carbon.combo-button.additional-actions'),
     size: size,
@@ -120,16 +143,13 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     containerRef: containerRef,
     menuAlignment: menuAlignment,
     className: menuClasses,
-    ref: menuRef,
+    ref: refs.setFloating,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
     mode: "basic",
     size: size,
     open: open,
-    onClose: handleClose,
-    onOpen: handleOpen,
-    x: x,
-    y: [y[0] - spacing, y[1] + spacing]
+    onClose: handleClose
   }, children));
 });
 ComboButton.propTypes = {

package/lib/components/ContainedList/index.js

@@ -9,10 +9,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var deprecateFieldOnObject = require('../../internal/deprecateFieldOnObject.js');
 var ContainedList = require('./ContainedList.js');
 var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
 
 ContainedList["default"].ContainedListItem = ContainedListItem["default"];
+if (process.env.NODE_ENV !== "production") {
+  deprecateFieldOnObject.deprecateFieldOnObject(ContainedList["default"], 'ContainedListItem', ContainedListItem["default"]);
+}
 
 exports.ContainedList = ContainedList["default"];
 exports["default"] = ContainedList["default"];

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -28,7 +28,7 @@ function useIsTruncated(ref) {
     const {
       offsetWidth,
       scrollWidth
-    } = element.lastElementChild?.lastElementChild || element;
+    } = element;
     setIsTruncated(offsetWidth < scrollWidth);
   }, [ref, setIsTruncated]);
   return isTruncated;

package/lib/components/RadioTile/RadioTile.d.ts

@@ -22,6 +22,11 @@ export interface RadioTileProps {
      * Specify whether the `RadioTile` should be disabled.
      */
     disabled?: boolean;
+    /**
+     * **Experimental**: Specify if the `ExpandableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
     /**
      * Provide a unique id for the underlying `<input>`.
      */
@@ -42,6 +47,10 @@ export interface RadioTileProps {
      * the underlying `<input>` changes.
      */
     onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     */
+    slug?: React.ReactNode;
     /**
      * Specify the tab index of the underlying `<input>`.
      */

package/lib/components/RadioTile/RadioTile.js

@@ -43,15 +43,19 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     id,
     onChange = noopFn.noopFn,
     tabIndex = 0,
+    hasRoundedCorners,
+    slug,
     required,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const inputId = useId.useFallbackId(id);
-  const className = cx__default["default"](customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, {
+  const className = cx__default["default"](customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, `${prefix}--tile--radio`, {
     [`${prefix}--tile--is-selected`]: checked,
     [`${prefix}--tile--light`]: light,
-    [`${prefix}--tile--disabled`]: disabled
+    [`${prefix}--tile--disabled`]: disabled,
+    [`${prefix}--tile--slug`]: slug,
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
   });
   const v12TileRadioIcons = index.useFeatureFlag('enable-v12-tile-radio-icons');
   function icon() {
@@ -74,6 +78,14 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
       onChange(value, name, evt);
     }
   }
+
+  // Slug is always size `xs`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'xs'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
     checked: checked,
     className: `${prefix}--tile-input`,
@@ -94,7 +106,7 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     className: `${prefix}--tile__checkmark`
   }, icon()), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: `${prefix}--tile-content`
-  }, children)));
+  }, children), normalizedSlug));
 });
 RadioTile.displayName = 'RadioTile';
 RadioTile.propTypes = {
@@ -114,6 +126,11 @@ RadioTile.propTypes = {
    * Specify whether the `RadioTile` should be disabled.
    */
   disabled: PropTypes__default["default"].bool,
+  /**
+   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes__default["default"].bool,
   /**
    * Provide a unique id for the underlying `<input>`.
    */
@@ -136,6 +153,10 @@ RadioTile.propTypes = {
    * `true` to specify if the control is required.
    */
   required: PropTypes__default["default"].bool,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify the tab index of the underlying `<input>`.
    */

package/lib/components/Tooltip/Tooltip.js

@@ -18,6 +18,7 @@ var useDelayedState = require('../../internal/useDelayedState.js');
 var useId = require('../../internal/useId.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -84,7 +85,7 @@ function Tooltip(_ref) {
   } else {
     triggerProps['aria-describedby'] = id;
   }
-  function onKeyDown(event) {
+  const onKeyDown = React.useCallback(event => {
     if (open && match.match(event, keys.Escape)) {
       event.stopPropagation();
       setOpen(false);
@@ -92,7 +93,21 @@ function Tooltip(_ref) {
     if (open && closeOnActivation && (match.match(event, keys.Enter) || match.match(event, keys.Space))) {
       setOpen(false);
     }
-  }
+  }, [closeOnActivation, open, setOpen]);
+  useIsomorphicEffect["default"](() => {
+    if (!open) {
+      return undefined;
+    }
+    function handleKeyDown(event) {
+      if (match.match(event, keys.Escape)) {
+        onKeyDown(event);
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onKeyDown]);
   function onMouseEnter() {
     // Interactive Tags should not support onMouseEnter
     if (!rest?.onMouseEnter) {
@@ -143,25 +158,30 @@ function Tooltip(_ref) {
       });
     };
   }, [isDragging, onDragStop]);
-  return /*#__PURE__*/React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({}, rest, {
-    align: align,
-    className: cx__default["default"](`${prefix}--tooltip`, customClassName),
-    dropShadow: false,
-    highContrast: true,
-    onKeyDown: onKeyDown,
-    onMouseLeave: onMouseLeave,
-    open: open
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--tooltip-trigger__wrapper`
-  }, child !== undefined ? /*#__PURE__*/React__default["default"].cloneElement(child, {
-    ...triggerProps,
-    ...getChildEventHandlers(child.props)
-  }) : null), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
-    "aria-hidden": open ? 'false' : 'true',
-    className: `${prefix}--tooltip-content`,
-    id: id,
-    role: "tooltip"
-  }, label || description));
+  return (
+    /*#__PURE__*/
+    // @ts-ignore-error Popover throws a TS error everytime is imported
+    React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({}, rest, {
+      align: align,
+      className: cx__default["default"](`${prefix}--tooltip`, customClassName),
+      dropShadow: false,
+      highContrast: true,
+      onKeyDown: onKeyDown,
+      onMouseLeave: onMouseLeave,
+      open: open
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `${prefix}--tooltip-trigger__wrapper`
+    }, child !== undefined ? /*#__PURE__*/React__default["default"].cloneElement(child, {
+      ...triggerProps,
+      ...getChildEventHandlers(child.props)
+    }) : null), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
+      "aria-hidden": open ? 'false' : 'true',
+      className: `${prefix}--tooltip-content`,
+      id: id,
+      onMouseEnter: onMouseEnter,
+      role: "tooltip"
+    }, label || description))
+  );
 }
 Tooltip.propTypes = {
   /**

package/lib/components/UIShell/Content.d.ts

@@ -29,7 +29,7 @@ declare const Content: {
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -43,7 +43,7 @@ declare const Content: {
         style?: React.CSSProperties | undefined;
         tabIndex?: number | undefined;
         title?: string | undefined;
-        translate?: "no" | "yes" | undefined;
+        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: React.AriaRole | undefined;
         about?: string | undefined;
@@ -93,7 +93,7 @@ declare const Content: {
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;

package/lib/components/UIShell/SwitcherItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { HTMLAttributeAnchorTarget } from 'react';
 interface BaseSwitcherItemProps {
     /**
      * Specify the text content for the link
@@ -43,6 +43,10 @@ interface BaseSwitcherItemProps {
      * Optionally provide an href for the underlying li`
      */
     href?: string;
+    /**
+     * Specify where to open the link.
+     */
+    target?: HTMLAttributeAnchorTarget;
 }
 interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
     'aria-label': string;

package/lib/components/UIShell/SwitcherItem.js

@@ -38,6 +38,7 @@ const SwitcherItem = /*#__PURE__*/React.forwardRef(function SwitcherItem(props,
     handleSwitcherItemFocus,
     onKeyDown = () => {},
     href,
+    target,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -75,6 +76,7 @@ const SwitcherItem = /*#__PURE__*/React.forwardRef(function SwitcherItem(props,
       onKeyDown(evt);
     },
     href: href,
+    target: target,
     ref: forwardRef
   }, rest, {
     className: linkClassName,
@@ -115,7 +117,11 @@ SwitcherItem.propTypes = {
   /**
    * Specify the tab index of the Link
    */
-  tabIndex: PropTypes__default["default"].number
+  tabIndex: PropTypes__default["default"].number,
+  /**
+   * Specify where to open the link.
+   */
+  target: PropTypes__default["default"].string
 };
 
 exports["default"] = SwitcherItem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.58.1",
+  "version": "1.59.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,7 +51,7 @@
     "@carbon/feature-flags": "^0.20.0",
     "@carbon/icons-react": "^11.42.0",
     "@carbon/layout": "^11.22.0",
-    "@carbon/styles": "^1.58.0",
+    "@carbon/styles": "^1.59.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "08968165fe61174317b023555b812528d21bab39"
+  "gitHead": "6269fa19f0ce2930b21a2fda05974a597126ec6b"
 }