@carbon/react 1.40.0 → 1.41.0

package/lib/components/StructuredList/StructuredList.js

@@ -16,6 +16,8 @@ var cx = require('classnames');
 var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
+require('../Text/index.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -289,12 +291,13 @@ function StructuredListCell(props) {
     [`${prefix}--structured-list-content--nowrap`]: noWrap
   }, className);
   if (head) {
-    return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
       className: classes,
       role: "columnheader"
     }, other), children);
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
+    as: "div",
     className: classes,
     role: "cell"
   }, other), children);

package/lib/components/Switch/Switch.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var noopFn = require('../../internal/noopFn.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,8 +29,8 @@ const Switch = /*#__PURE__*/React__default["default"].forwardRef(function Switch
     disabled,
     index,
     name,
-    onClick,
-    onKeyDown,
+    onClick = noopFn.noopFn,
+    onKeyDown = noopFn.noopFn,
     selected = false,
     text,
     ...other
@@ -114,11 +115,6 @@ Switch.propTypes = {
    */
   text: PropTypes__default["default"].string
 };
-Switch.defaultProps = {
-  selected: false,
-  onClick: () => {},
-  onKeyDown: () => {}
-};
 var Switch$1 = Switch;
 
 exports["default"] = Switch$1;

package/lib/components/Tabs/Tabs.js

@@ -30,6 +30,8 @@ var usePressable = require('./usePressable.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var useEvent = require('../../internal/useEvent.js');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
+require('../Text/index.js');
+var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -595,7 +597,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
     className: `${prefix}--tabs__nav-item--icon-left`
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: 16
-  })), /*#__PURE__*/React__default["default"].createElement("span", {
+  })), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: `${prefix}--tabs__nav-item-label`,
     title: children
   }, children), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -604,7 +606,8 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
     })
   }, DismissIcon, !dismissable && Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: 16
-  }))), hasSecondaryLabel && /*#__PURE__*/React__default["default"].createElement("div", {
+  }))), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "div",
     className: `${prefix}--tabs__nav-item-secondary-label`,
     title: secondaryLabel
   }, secondaryLabel));

package/lib/components/Tag/Tag.js

@@ -16,6 +16,8 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+require('../Text/index.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -77,7 +79,7 @@ const Tag = _ref => {
     return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
       className: tagClasses,
       id: tagId
-    }, other), /*#__PURE__*/React__default["default"].createElement("span", {
+    }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       className: `${prefix}--tag__label`,
       title: typeof children === 'string' ? children : undefined
     }, children !== null && children !== undefined ? children : typeText), /*#__PURE__*/React__default["default"].createElement("button", {
@@ -96,7 +98,7 @@ const Tag = _ref => {
     id: tagId
   }, other), CustomIconElement ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tag__custom-icon`
-  }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement("span", {
+  }, /*#__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));
 };

package/lib/components/Text/Text.js

@@ -23,7 +23,7 @@ function Text(_ref) {
   let {
     as,
     children,
-    dir,
+    dir = 'auto',
     ...rest
   } = _ref;
   // TODO: Update with context typing once its been converted to TS

package/lib/components/Text/TextDirection.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import { ReactNode } from 'react';
-export type TextDir = 'ltr' | 'rtl' | 'auto';
+export type TextDir = 'ltr' | 'rtl' | 'auto' | string;
 export type GetTextDirection = (text: string | string[] | undefined) => TextDir;
 export interface TextDirectionProps {
     children: ReactNode | undefined;

package/lib/components/TextArea/TextArea.js

@@ -22,6 +22,9 @@ var useAnnouncer = require('../../internal/useAnnouncer.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var noopFn = require('../../internal/noopFn.js');
+require('../Text/index.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,20 +36,22 @@ const getInstanceId = setupGetInstanceId["default"]();
 const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwardRef) => {
   const {
     className,
+    disabled = false,
     id,
     labelText,
     hideLabel,
-    onChange,
-    onClick,
-    invalid,
-    invalidText,
-    helperText,
+    onChange = noopFn.noopFn,
+    onClick = noopFn.noopFn,
+    invalid = false,
+    invalidText = '',
+    helperText = '',
     light,
-    placeholder,
-    enableCounter,
-    maxCount,
+    placeholder = '',
+    enableCounter = false,
+    maxCount = undefined,
     warn = false,
-    warnText,
+    warnText = '',
+    rows = 4,
     ...other
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -55,8 +60,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
   } = React.useContext(FormContext.FormContext);
   const {
     defaultValue,
-    value,
-    disabled
+    value
   } = other;
   const [textCount, setTextCount] = React.useState(defaultValue?.toString()?.length || value?.toString()?.length || 0);
   const {
@@ -68,7 +72,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
   const textareaProps = {
     id,
     onChange: evt => {
-      if (!other.disabled && onChange) {
+      if (!disabled && onChange) {
         evt?.persist?.();
         // delay textCount assignation to give the textarea element value time to catch up if is a controlled input
         setTimeout(() => {
@@ -78,7 +82,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
       }
     },
     onClick: evt => {
-      if (!other.disabled && onClick) {
+      if (!disabled && onClick) {
         onClick(evt);
       }
     }
@@ -91,33 +95,38 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
     [`${prefix}--label--disabled`]: disabled
   });
-  const label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
+  const label = labelText ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "label",
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
   const counterClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled
   });
-  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
   const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: other.disabled
+    [`${prefix}--form__helper-text--disabled`]: disabled
   });
   const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "div",
     id: helperId,
     className: helperTextClasses
   }, helperText) : null;
   const errorId = id + '-error-msg';
-  const error = invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const error = invalid ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "div",
     role: "alert",
     className: `${prefix}--form-requirement`,
     id: errorId
   }, invalidText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--text-area__invalid-icon`
   })) : null;
-  const warning = warn ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const warning = warn ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "div",
     role: "alert",
     className: `${prefix}--form-requirement`
   }, warnText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
@@ -149,7 +158,8 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     className: textareaClasses,
     "aria-invalid": invalid,
     "aria-describedby": ariaDescribedBy,
-    disabled: other.disabled,
+    disabled: disabled,
+    rows: rows,
     readOnly: other.readOnly,
     ref: ref
   }));
@@ -266,19 +276,5 @@ TextArea.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-TextArea.defaultProps = {
-  disabled: false,
-  onChange: () => {},
-  onClick: () => {},
-  placeholder: '',
-  rows: 4,
-  invalid: false,
-  invalidText: '',
-  helperText: '',
-  enableCounter: false,
-  maxCount: undefined,
-  warn: false,
-  warnText: ''
-};
 
 exports["default"] = TextArea;

package/lib/components/TextInput/ControlledPasswordInput.js

@@ -19,6 +19,7 @@ var warning = require('../../internal/warning.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var noopFn = require('../../internal/noopFn.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,12 +35,13 @@ const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRe
     className,
     id,
     placeholder,
-    onChange,
-    onClick,
+    onChange = noopFn.noopFn,
+    onClick = noopFn.noopFn,
+    disabled = false,
     hideLabel,
-    invalid,
-    invalidText,
-    helperText,
+    invalid = false,
+    invalidText = '',
+    helperText = '',
     light,
     // eslint-disable-next-line react/prop-types
     type = 'password',
@@ -49,7 +51,7 @@ const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRe
     tooltipAlignment = 'center',
     hidePasswordLabel = 'Hide password',
     showPasswordLabel = 'Show password',
-    size,
+    size = undefined,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -69,12 +71,12 @@ const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRe
   const sharedTextInputProps = {
     id,
     onChange: evt => {
-      if (!other.disabled) {
+      if (!disabled) {
         onChange?.(evt);
       }
     },
     onClick: evt => {
-      if (!other.disabled) {
+      if (!disabled) {
         onClick?.(evt);
       }
     },
@@ -86,10 +88,10 @@ const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRe
   };
   const labelClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: other.disabled
+    [`${prefix}--label--disabled`]: disabled
   });
   const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: other.disabled
+    [`${prefix}--form__helper-text--disabled`]: disabled
   });
   const label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
@@ -224,14 +226,5 @@ ControlledPasswordInput.propTypes = {
    */
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
-ControlledPasswordInput.defaultProps = {
-  disabled: false,
-  onChange: () => {},
-  onClick: () => {},
-  invalid: false,
-  invalidText: '',
-  helperText: '',
-  size: undefined
-};
 
 exports["default"] = ControlledPasswordInput;

package/lib/components/TextInput/TextInput.js

@@ -21,6 +21,8 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useAnnouncer = require('../../internal/useAnnouncer.js');
+require('../Text/index.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -131,17 +133,20 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     [`${prefix}--label--disabled`]: disabled,
     [`${prefix}--text-input__label-counter`]: true
   });
-  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
-  const label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
+  const label = labelText ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "label",
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
   const labelWrapper = /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--text-input__label-wrapper`
   }, label, counter);
-  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "div",
     id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;

package/lib/components/Tile/Tile.js

@@ -23,6 +23,8 @@ var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var index = require('../FeatureFlags/index.js');
 var useId = require('../../internal/useId.js');
+require('../Text/index.js');
+var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -89,9 +91,7 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
   function handleOnKeyDown(evt) {
     evt?.persist?.();
     if (match.matches(evt, [keys.Enter, keys.Space])) {
-      evt.preventDefault();
       setIsSelected(!isSelected);
-      onKeyDown(evt);
     }
     onKeyDown(evt);
   }
@@ -111,6 +111,7 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
   return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({
     className: classes,
     href: href,
+    tabIndex: !href && !disabled ? 0 : undefined,
     onClick: !disabled ? handleOnClick : undefined,
     onKeyDown: handleOnKeyDown,
     ref: ref,
@@ -233,7 +234,8 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
       title: title
     }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
       className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`
-    }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkbox, null))), /*#__PURE__*/React__default["default"].createElement("label", {
+    }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkbox, null))), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+      as: "label",
       htmlFor: id,
       className: `${prefix}--tile-content`
     }, children))

package/lib/components/TileGroup/TileGroup.js

@@ -15,6 +15,7 @@ var React = require('react');
 var RadioTile = require('../RadioTile/RadioTile.js');
 var warning = require('../../internal/warning.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var noopFn = require('../../internal/noopFn.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -51,11 +52,14 @@ class TileGroup extends React__default["default"].Component {
       return children;
     });
     _rollupPluginBabelHelpers.defineProperty(this, "handleChange", (newSelection, value, evt) => {
+      const {
+        onChange = noopFn.noopFn
+      } = this.props;
       if (newSelection !== this.state.selected) {
         this.setState({
           selected: newSelection
         });
-        this.props.onChange(newSelection, this.props.name, evt);
+        onChange(newSelection, this.props.name, evt);
       }
     });
     _rollupPluginBabelHelpers.defineProperty(this, "renderLegend", legend => {
@@ -130,8 +134,5 @@ _rollupPluginBabelHelpers.defineProperty(TileGroup, "propTypes", {
    */
   valueSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 });
-_rollupPluginBabelHelpers.defineProperty(TileGroup, "defaultProps", {
-  onChange: /* istanbul ignore next */() => {}
-});
 
 exports["default"] = TileGroup;

package/lib/components/Toggle/Toggle.js

@@ -15,6 +15,8 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var useControllableState = require('../../internal/useControllableState.js');
 var usePrefix = require('../../internal/usePrefix.js');
+require('../Text/index.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -102,7 +104,7 @@ function Toggle(_ref) {
     })), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {
       htmlFor: ariaLabelledby ? undefined : id,
       className: `${prefix}--toggle__label`
-    }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
+    }, labelText && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       className: labelTextClasses
     }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
       className: appearanceClasses
@@ -115,7 +117,7 @@ function Toggle(_ref) {
       viewBox: "0 0 6 5"
     }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
       d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
-    })))), renderSideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
+    })))), renderSideLabel && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       className: `${prefix}--toggle__text`,
       "aria-hidden": "true"
     }, sideLabel))))

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

@@ -37,6 +37,7 @@ export declare namespace ToggletipLabel {
 interface ToggletipProps<E extends ElementType> {
     align?: PopoverAlignment | undefined;
     as?: E | undefined;
+    autoAlign?: boolean | undefined;
     className?: string | undefined;
     children?: ReactNode;
     defaultOpen?: boolean | undefined;
@@ -46,7 +47,7 @@ interface ToggletipProps<E extends ElementType> {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-export declare function Toggletip<E extends ElementType = 'span'>({ align, as, className: customClassName, children, defaultOpen, }: ToggletipProps<E>): JSX.Element;
+export declare function Toggletip<E extends ElementType = 'span'>({ align, as, autoAlign, className: customClassName, children, defaultOpen, }: ToggletipProps<E>): JSX.Element;
 export declare namespace Toggletip {
     var propTypes: {
         /**
@@ -58,6 +59,10 @@ export declare namespace Toggletip {
          * component.
          */
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
         /**
          * Custom children to be rendered as the content of the label
          */

package/lib/components/Toggletip/index.js

@@ -73,6 +73,7 @@ function Toggletip(_ref2) {
   let {
     align,
     as,
+    autoAlign,
     className: customClassName,
     children,
     defaultOpen = false
@@ -147,7 +148,8 @@ function Toggletip(_ref2) {
     open: open,
     onKeyDown: onKeyDown,
     onBlur: handleBlur,
-    ref: ref
+    ref: ref,
+    autoAlign: autoAlign
   }, children));
 }
 Toggletip.propTypes = {
@@ -160,6 +162,10 @@ Toggletip.propTypes = {
    * component.
    */
   as: PropTypes__default["default"].elementType,
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * Custom children to be rendered as the content of the label
    */

package/lib/components/UIShell/Content.js

@@ -24,7 +24,7 @@ const Content = _ref => {
   let {
     className: customClassName,
     children,
-    tagName,
+    tagName = 'main',
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -48,9 +48,6 @@ Content.propTypes = {
    */
   tagName: PropTypes__default["default"].string
 };
-Content.defaultProps = {
-  tagName: 'main'
-};
 var Content$1 = Content;
 
 exports["default"] = Content$1;

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

@@ -25,5 +25,5 @@ interface SideNavContextData {
     isRail?: boolean | undefined;
 }
 export declare const SideNavContext: React.Context<SideNavContextData>;
-declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "slot" | "style" | "title" | "className" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "expanded" | "enterDelayMs" | "defaultExpanded" | "addFocusListeners" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur" | "inert"> & React.RefAttributes<HTMLElement>>;
+declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "slot" | "style" | "title" | "className" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "tabIndex" | "color" | "lang" | "role" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "expanded" | "enterDelayMs" | "defaultExpanded" | "addFocusListeners" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur" | "inert"> & React.RefAttributes<HTMLElement>>;
 export default SideNav;

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

@@ -0,0 +1,32 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+export interface SideNavDetailsProps {
+    children?: React.ReactNode;
+    className?: string;
+    title: string;
+}
+declare const SideNavDetails: {
+    ({ children, className: customClassName, title, ...rest }: SideNavDetailsProps): JSX.Element;
+    propTypes: {
+        /**
+         * Provide optional children to render in `SideNavDetails`. Useful for
+         * rendering the `SideNavSwitcher` component.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Optionally provide a custom class to apply to the underlying `<li>` node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide the text that will be rendered as the title in the component
+         */
+        title: PropTypes.Validator<string>;
+    };
+};
+export default SideNavDetails;

package/lib/components/UIShell/SideNavDetails.js

@@ -52,6 +52,5 @@ SideNavDetails.propTypes = {
    */
   title: PropTypes__default["default"].string.isRequired
 };
-var SideNavDetails$1 = SideNavDetails;
 
-exports["default"] = SideNavDetails$1;
+exports["default"] = SideNavDetails;