@carbon/react 1.53.0 → 1.54.0-rc.0

package/lib/components/Popover/index.js

@@ -17,6 +17,8 @@ var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useEvent = require('../../internal/useEvent.js');
+var createPropAdapter = require('../../tools/createPropAdapter.js');
+var react = require('@floating-ui/react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,14 +27,18 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const PopoverContext = /*#__PURE__*/React__default["default"].createContext({
-  floating: {
+  setFloating: {
     current: null
-  }
+  },
+  caretRef: {
+    current: null
+  },
+  autoAlign: null
 });
 const Popover = /*#__PURE__*/React__default["default"].forwardRef(function PopoverRenderFunction(_ref, forwardRef) {
   let {
     isTabTip,
-    align = isTabTip ? 'bottom-left' : 'bottom',
+    align: initialAlign = isTabTip ? 'bottom-start' : 'bottom',
     as: BaseComponent = 'span',
     autoAlign = false,
     caret = isTabTip ? false : true,
@@ -46,7 +52,9 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const floating = React.useRef(null);
+  const caretRef = React.useRef(null);
   const popover = React.useRef(null);
+  let align = createPropAdapter.mapPopoverAlignProp(initialAlign);
 
   // If the `Popover` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
   useEvent.useWindowEvent('blur', () => {
@@ -59,124 +67,150 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
       onRequestClose?.();
     }
   });
+
+  // Slug styling places a border around the popover content so the caret
+  // needs to be placed 1px further outside the popover content. To do so,
+  // we look to see if any of the children has a className containing "slug"
+  const initialCaretHeight = React__default["default"].Children.toArray(children).some(x => {
+    return x?.props?.className?.includes('slug');
+  }) ? 7 : 6;
+  // These defaults match the defaults defined in packages/styles/scss/components/popover/_popover.scss
+  const popoverDimensions = React.useRef({
+    offset: 10,
+    caretHeight: initialCaretHeight
+  });
+  useIsomorphicEffect["default"](() => {
+    // The popover is only offset when a caret is present. Technically, the custom properties
+    // accessed below can be set by a user even if caret=false, but doing so does not follow
+    // the design specification for Popover.
+    if (caret && popover.current) {
+      // Gather the dimensions of the caret and prefer the values set via custom properties.
+      // If a value is not set via a custom property, provide a default value that matches the
+      // default values defined in the sass style file
+      const getStyle = window.getComputedStyle(popover.current, null);
+      const offsetProperty = getStyle.getPropertyValue('--cds-popover-offset');
+      const caretProperty = getStyle.getPropertyValue('--cds-popover-caret-height');
+
+      // Handle if the property values are in px or rem.
+      // We want to store just the base number value without a unit suffix
+      if (offsetProperty) {
+        popoverDimensions.current.offset = offsetProperty.includes('px') ? Number(offsetProperty.split('px', 1)[0]) * 1 : Number(offsetProperty.split('rem', 1)[0]) * 16;
+      }
+      if (caretProperty) {
+        popoverDimensions.current.caretHeight = caretProperty.includes('px') ? Number(caretProperty.split('px', 1)[0]) * 1 : Number(caretProperty.split('rem', 1)[0]) * 16;
+      }
+    }
+  });
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = react.useFloating(autoAlign ? {
+    placement: align,
+    // 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: [react.offset(!isTabTip ? popoverDimensions?.current?.offset : 0), react.flip({
+      fallbackAxisSideDirection: 'start'
+    }), react.arrow({
+      element: caretRef
+    })],
+    whileElementsMounted: react.autoUpdate
+  } : {} // When autoAlign is turned off, floating-ui will not be used
+  );
+
   const value = React.useMemo(() => {
     return {
-      floating
+      floating,
+      setFloating: refs.setFloating,
+      caretRef,
+      autoAlign: autoAlign
     };
-  }, []);
+  }, [refs.setFloating, autoAlign]);
   if (isTabTip) {
-    const tabTipAlignments = ['bottom-left', 'bottom-right'];
+    const tabTipAlignments = ['bottom-start', 'bottom-end'];
     if (!tabTipAlignments.includes(align)) {
-      align = 'bottom-left';
+      align = 'bottom-start';
     }
   }
+  React.useEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+      if (caret && middlewareData && middlewareData.arrow && caretRef?.current) {
+        const {
+          x,
+          y
+        } = middlewareData.arrow;
+        const staticSide = {
+          top: 'bottom',
+          right: 'left',
+          bottom: 'top',
+          left: 'right'
+        }[placement.split('-')[0]];
+        caretRef.current.style.left = x != null ? `${x}px` : '';
+        caretRef.current.style.top = y != null ? `${y}px` : '';
+
+        // Ensure the static side gets unset when flipping to other placements' axes.
+        caretRef.current.style.right = '';
+        caretRef.current.style.bottom = '';
+        if (staticSide) {
+          caretRef.current.style[staticSide] = `${-popoverDimensions?.current?.caretHeight}px`;
+        }
+      }
+    }
+  }, [floatingStyles, refs.floating, autoAlign, middlewareData, placement, caret]);
   const ref = useMergedRefs.useMergedRefs([forwardRef, popover]);
-  const [autoAligned, setAutoAligned] = React.useState(false);
-  const [autoAlignment, setAutoAlignment] = React.useState(align);
+  const currentAlignment = autoAlign && placement !== align ? placement : align;
   const className = cx__default["default"]({
     [`${prefix}--popover-container`]: true,
     [`${prefix}--popover--caret`]: caret,
     [`${prefix}--popover--drop-shadow`]: dropShadow,
     [`${prefix}--popover--high-contrast`]: highContrast,
     [`${prefix}--popover--open`]: open,
-    [`${prefix}--popover--${autoAlignment}`]: autoAligned && !isTabTip,
-    [`${prefix}--popover--${align}`]: !autoAligned,
+    [`${prefix}--popover--auto-align`]: autoAlign,
+    [`${prefix}--popover--${currentAlignment}`]: true,
     [`${prefix}--popover--tab-tip`]: isTabTip
   }, customClassName);
-  useIsomorphicEffect["default"](() => {
-    if (!open) {
-      return;
-    }
-    if (!autoAlign || isTabTip) {
-      setAutoAligned(false);
-      return;
-    }
-    if (!floating.current) {
-      return;
-    }
-    if (autoAligned === true) {
-      return;
-    }
-    const rect = floating.current.getBoundingClientRect();
-
-    // The conditions, per side, of when the popover is not visible, excluding the popover's internal padding(16)
-    const conditions = {
-      left: rect.x < -16,
-      top: rect.y < -16,
-      right: rect.x + (rect.width - 16) > document.documentElement.clientWidth,
-      bottom: rect.y + (rect.height - 16) > document.documentElement.clientHeight
-    };
-    if (!conditions.left && !conditions.top && !conditions.right && !conditions.bottom) {
-      setAutoAligned(false);
-      return;
-    }
-    const alignments = ['top', 'top-left', 'right-bottom', 'right', 'right-top', 'bottom-left', 'bottom', 'bottom-right', 'left-top', 'left', 'left-bottom', 'top-right'];
-
-    // Creates the prioritized list of options depending on ideal alignment coming from `align`
-    const options = [align];
-    let option = alignments[(alignments.indexOf(align) + 1) % alignments.length];
-    while (option) {
-      if (options.includes(option)) {
-        break;
-      }
-      options.push(option);
-      option = alignments[(alignments.indexOf(option) + 1) % alignments.length];
-    }
-    function isVisible(alignment) {
-      if (!popover.current || !floating.current) {
-        return false;
-      }
-      popover.current.classList.add(`${prefix}--popover--${alignment}`);
-      const rect = floating.current.getBoundingClientRect();
-
-      // Check if popover is not visible to the left of the screen
-      if (rect.x < -16) {
-        popover.current.classList.remove(`${prefix}--popover--${alignment}`);
-        return false;
-      }
-
-      // Check if popover is not visible at the top of the screen
-      if (rect.y < -16) {
-        popover.current.classList.remove(`${prefix}--popover--${alignment}`);
-        return false;
-      }
-
-      // Check if popover is not visible to right of screen
-      if (rect.x + (rect.width - 16) > document.documentElement.clientWidth) {
-        popover.current.classList.remove(`${prefix}--popover--${alignment}`);
-        return false;
-      }
-
-      // Check if popover is not visible to bottom of screen
-      if (rect.y + (rect.height - 16) > document.documentElement.clientHeight) {
-        popover.current.classList.remove(`${prefix}--popover--${alignment}`);
-        return false;
-      }
-      popover.current.classList.remove(`${prefix}--popover--${alignment}`);
-      return true;
-    }
-    let alignment = null;
-    for (let i = 0; i < options.length; i++) {
-      const option = options[i];
-      if (isVisible(option)) {
-        alignment = option;
-        break;
-      }
-    }
-    if (alignment) {
-      setAutoAligned(true);
-      setAutoAlignment(alignment);
-    }
-  }, [autoAligned, align, autoAlign, prefix, open, isTabTip]);
   const mappedChildren = React__default["default"].Children.map(children, child => {
     const item = child;
-    if (item?.type === 'button') {
-      const {
-        className
-      } = item.props;
+    if ((item?.type === 'button' || autoAlign && item?.type?.displayName !== 'PopoverContent' || autoAlign && item?.type?.displayName === 'ToggletipButton') && /*#__PURE__*/React__default["default"].isValidElement(item)) {
+      const className = item?.props?.className;
+      const ref = (item?.props).ref;
       const tabTipClasses = cx__default["default"](`${prefix}--popover--tab-tip__button`, className);
       return /*#__PURE__*/React__default["default"].cloneElement(item, {
-        className: tabTipClasses
+        className: isTabTip && item?.type === 'button' ? tabTipClasses : className || '',
+        // With cloneElement, if you pass a `ref`, it overrides the original ref.
+        // https://react.dev/reference/react/cloneElement#parameters
+        // The block below works around this and ensures that the original ref is still
+        // called while allowing the floating-ui reference element to be set as well.
+        // `useMergedRefs` can't be used here because hooks can't be called from within a callback.
+        // More here: https://github.com/facebook/react/issues/8873#issuecomment-489579878
+        ref: node => {
+          // For a popover, there isn't an explicit trigger component, it's just the first child that's
+          // passed in which should *not* be PopoverContent.
+          // For a toggletip there is a specific trigger component, ToggletipButton.
+          // In either of these caes we want to set this as the reference node for floating-ui autoAlign
+          // positioning.
+          if (autoAlign && item?.type?.displayName !== 'PopoverContent' || autoAlign && item?.type?.displayName === 'ToggletipButton') {
+            // Set the reference element for floating-ui
+            refs.setReference(node);
+          }
+
+          // Call the original ref, if any
+          if (typeof ref === 'function') {
+            ref(node);
+          } else if (ref !== null && ref !== undefined) {
+            ref.current = node;
+          }
+        }
       });
     } else {
       return item;
@@ -188,7 +222,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     ref: ref
-  }), isTabTip ? mappedChildren : children));
+  }), autoAlign || isTabTip ? mappedChildren : children));
 });
 
 // Note: this displayName is temporarily set so that Storybook ArgTable
@@ -200,7 +234,28 @@ Popover.propTypes = {
   /**
    * Specify how the popover should align with the trigger element
    */
-  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  align: PropTypes__default["default"].oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.
@@ -254,19 +309,31 @@ _ref2, forwardRef) {
   } = _ref2;
   const prefix = usePrefix.usePrefix();
   const {
-    floating
+    setFloating,
+    caretRef,
+    autoAlign
   } = React__default["default"].useContext(PopoverContext);
-  const ref = useMergedRefs.useMergedRefs([floating, forwardRef]);
+  const ref = useMergedRefs.useMergedRefs([setFloating, forwardRef]);
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: `${prefix}--popover`
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: cx__default["default"](`${prefix}--popover-content`, className),
     ref: ref
-  }, children), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--popover-caret`
+  }, children, autoAlign && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: cx__default["default"]({
+      [`${prefix}--popover-caret`]: true,
+      [`${prefix}--popover--auto-align`]: true
+    }),
+    ref: caretRef
+  })), !autoAlign && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: cx__default["default"]({
+      [`${prefix}--popover-caret`]: true
+    }),
+    ref: caretRef
   }));
 }
 const PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(PopoverContentRenderFunction);
+PopoverContent.displayName = 'PopoverContent';
 PopoverContent.propTypes = {
   /**
    * Provide elements to be rendered inside of the component

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

@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2016, 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 React from 'react';
+export interface RadioTileProps {
+    /**
+     * Specify whether the `RadioTile` should be checked.
+     */
+    checked?: boolean;
+    /**
+     * The `RadioTile` content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional `className` to be applied to the underlying `<label>`.
+     */
+    className?: string;
+    /**
+     * Specify whether the `RadioTile` should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Provide a unique id for the underlying `<input>`.
+     */
+    id?: string;
+    /**
+     * `true` to use the light version. For use on `$layer-01` backgrounds only.
+     * Don't use this to make tile background color the same as the container background color.
+     *
+     * @deprecated This prop is no longer needed and has been deprecated in v11 in favor of the new Layer component. It will be removed in the next major release.
+     */
+    light?: boolean;
+    /**
+     * Provide a `name` for the underlying `<input>`.
+     */
+    name?: string;
+    /**
+     * Provide an optional `onChange` hook that is called each time the value of
+     * the underlying `<input>` changes.
+     */
+    onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Specify the tab index of the underlying `<input>`.
+     */
+    tabIndex?: number;
+    /**
+     * Specify the value of the underlying `<input>`.
+     */
+    value: string | number;
+}
+declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.RefAttributes<HTMLInputElement>>;
+export default RadioTile;

package/lib/components/RadioTile/RadioTile.js

@@ -36,7 +36,6 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     children,
     className: customClassName,
     disabled,
-    // eslint-disable-next-line no-unused-vars
     light,
     checked,
     name,
@@ -80,9 +79,9 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     disabled: disabled,
     id: inputId,
     name: name,
-    onChange: !disabled ? handleOnChange : null,
-    onKeyDown: !disabled ? handleOnKeyDown : null,
-    tabIndex: !disabled ? tabIndex : null,
+    onChange: !disabled ? handleOnChange : undefined,
+    onKeyDown: !disabled ? handleOnKeyDown : undefined,
+    tabIndex: !disabled ? tabIndex : undefined,
     type: "radio",
     value: value,
     ref: ref
@@ -95,49 +94,50 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     className: `${prefix}--tile-content`
   }, children)));
 });
+RadioTile.displayName = 'RadioTile';
 RadioTile.propTypes = {
   /**
-   * `true` if this tile should be selected.
+   * Specify whether the `RadioTile` should be checked.
    */
   checked: PropTypes__default["default"].bool,
   /**
-   * The tile content.
+   * The `RadioTile` content.
    */
   children: PropTypes__default["default"].node,
   /**
-   * The CSS class names.
+   * Provide an optional `className` to be applied to the underlying `<label>`.
    */
   className: PropTypes__default["default"].string,
   /**
-   * Specify whether the RadioTile should be disabled
+   * Specify whether the `RadioTile` should be disabled.
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * The ID of the `<input>`.
+   * Provide a unique id for the underlying `<input>`.
    */
   id: PropTypes__default["default"].string,
   /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * `true` to use the light version. For use on `$layer-01` backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `RadioTile` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'),
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `RadioTile` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be removed in the next major release.'),
   /**
-   * The `name` of the `<input>`.
+   * Provide a `name` for the underlying `<input>`.
    */
   name: PropTypes__default["default"].string,
   /**
-   * The handler of the massaged `change` event on the `<input>`.
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes.
    */
   onChange: PropTypes__default["default"].func,
   /**
-   * Specify the tab index of the wrapper element
+   * Specify the tab index of the underlying `<input>`.
    */
   tabIndex: PropTypes__default["default"].number,
   /**
-   * The `value` of the `<input>`.
+   * Specify the value of the underlying `<input>`.
    */
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired
 };
-var RadioTile$1 = RadioTile;
 
-exports["default"] = RadioTile$1;
+exports["default"] = RadioTile;

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 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 RadioTile, { RadioTileProps } from './RadioTile';
+export default RadioTile;
+export { RadioTile };
+export type { RadioTileProps };

package/lib/components/Slug/index.js

@@ -86,7 +86,6 @@ const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_re
     autoAlign = true,
     children,
     className,
-    dotType,
     kind = 'default',
     onRevertClick,
     revertActive,
@@ -99,11 +98,6 @@ const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_re
   const id = useId.useId('slug');
   const slugClasses = cx__default["default"](className, {
     [`${prefix}--slug`]: true,
-    [`${prefix}--slug--hollow`]: kind === 'hollow' || dotType === 'hollow',
-    // Need to come up with a better name; explainable?
-    // Need to be able to target the non-hollow variant another way
-    // other than using `:not` all over the styles
-    [`${prefix}--slug--enabled`]: kind !== 'hollow' && dotType !== 'hollow',
     [`${prefix}--slug--revert`]: revertActive
   });
   const slugButtonClasses = cx__default["default"]({
@@ -152,9 +146,30 @@ Slug.propTypes = {
   /**
    * Specify how the popover should align with the button
    */
-  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  align: PropTypes__default["default"].oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
    */
   autoAlign: PropTypes__default["default"].bool,
   /**
@@ -165,14 +180,10 @@ Slug.propTypes = {
    * Specify an optional className to be added to the AI slug
    */
   className: PropTypes__default["default"].string,
-  /**
-   * Specify the type of dot that should be rendered in front of the inline variant
-   */
-  dotType: PropTypes__default["default"].oneOf(['default', 'hollow']),
   /**
    * Specify the type of Slug, from the following list of types:
    */
-  kind: PropTypes__default["default"].oneOf(['default', 'hollow', 'inline']),
+  kind: PropTypes__default["default"].oneOf(['default', 'inline']),
   /**
    * Callback function that fires when the revert button is clicked
    */

package/lib/components/Stack/HStack.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 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 React from 'react';
+import { StackProps } from './Stack';
+declare const HStack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<React.ReactNode>>;
+export { HStack };

package/lib/components/Stack/HStack.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var Stack = require('./Stack.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const HStack = /*#__PURE__*/React__default["default"].forwardRef(function HStack(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, _rollupPluginBabelHelpers["extends"]({}, props, {
+    ref: ref,
+    orientation: "horizontal"
+  }), children);
+});
+
+exports.HStack = HStack;

package/lib/components/Stack/Stack.d.ts

@@ -10,7 +10,7 @@ import React from 'react';
  * @type {Array<number>}
  */
 declare const SPACING_STEPS: number[];
-interface StackProps extends React.HTMLAttributes<HTMLElement> {
+export interface StackProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Provide a custom element type to render as the outermost element in
      * the Stack component. By default, this component will render a `div`.

package/lib/components/Stack/Stack.js

@@ -10,17 +10,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var layout = require('@carbon/layout');
+var React = require('react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React = require('react');
+var layout = require('@carbon/layout');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
  * The steps in the spacing scale

package/lib/components/Stack/VStack.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 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 React from 'react';
+import { StackProps } from './Stack';
+declare const VStack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<React.ReactNode>>;
+export { VStack };