@carbon/react 1.40.0 → 1.41.0

package/es/components/StructuredList/StructuredList.js

@@ -12,6 +12,8 @@ import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 const GridSelectedRowStateContext = /*#__PURE__*/React__default.createContext(null);
 const GridSelectedRowDispatchContext = /*#__PURE__*/React__default.createContext(null);
@@ -279,12 +281,13 @@ function StructuredListCell(props) {
     [`${prefix}--structured-list-content--nowrap`]: noWrap
   }, className);
   if (head) {
-    return /*#__PURE__*/React__default.createElement("span", _extends({
+    return /*#__PURE__*/React__default.createElement(Text, _extends({
       className: classes,
       role: "columnheader"
     }, other), children);
   }
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement(Text, _extends({
+    as: "div",
     className: classes,
     role: "cell"
   }, other), children);

package/es/components/Switch/Switch.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { noopFn } from '../../internal/noopFn.js';
 
 const Switch = /*#__PURE__*/React__default.forwardRef(function Switch(props, tabRef) {
   const {
@@ -18,8 +19,8 @@ const Switch = /*#__PURE__*/React__default.forwardRef(function Switch(props, tab
     disabled,
     index,
     name,
-    onClick,
-    onKeyDown,
+    onClick = noopFn,
+    onKeyDown = noopFn,
     selected = false,
     text,
     ...other
@@ -104,11 +105,6 @@ Switch.propTypes = {
    */
   text: PropTypes.string
 };
-Switch.defaultProps = {
-  selected: false,
-  onClick: () => {},
-  onKeyDown: () => {}
-};
 var Switch$1 = Switch;
 
 export { Switch$1 as default };

package/es/components/Tabs/Tabs.js

@@ -26,6 +26,8 @@ import { usePressable } from './usePressable.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { useEvent } from '../../internal/useEvent.js';
 import { useMatchMedia } from '../../internal/useMatchMedia.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowRight, ArrowLeft, Home, End, Delete } from '../../internal/keyboard/keys.js';
 
@@ -584,7 +586,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
     className: `${prefix}--tabs__nav-item--icon-left`
   }, /*#__PURE__*/React__default.createElement(Icon, {
     size: 16
-  })), /*#__PURE__*/React__default.createElement("span", {
+  })), /*#__PURE__*/React__default.createElement(Text, {
     className: `${prefix}--tabs__nav-item-label`,
     title: children
   }, children), /*#__PURE__*/React__default.createElement("div", {
@@ -593,7 +595,8 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
     })
   }, DismissIcon, !dismissable && Icon && /*#__PURE__*/React__default.createElement(Icon, {
     size: 16
-  }))), hasSecondaryLabel && /*#__PURE__*/React__default.createElement("div", {
+  }))), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--tabs__nav-item-secondary-label`,
     title: secondaryLabel
   }, secondaryLabel));

package/es/components/Tag/Tag.js

@@ -12,6 +12,8 @@ import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 var _Close;
 const getInstanceId = setupGetInstanceId();
@@ -67,7 +69,7 @@ const Tag = _ref => {
     return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
       className: tagClasses,
       id: tagId
-    }, other), /*#__PURE__*/React__default.createElement("span", {
+    }, other), /*#__PURE__*/React__default.createElement(Text, {
       className: `${prefix}--tag__label`,
       title: typeof children === 'string' ? children : undefined
     }, children !== null && children !== undefined ? children : typeText), /*#__PURE__*/React__default.createElement("button", {
@@ -86,7 +88,7 @@ const Tag = _ref => {
     id: tagId
   }, other), CustomIconElement ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tag__custom-icon`
-  }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, {
     title: typeof children === 'string' ? children : undefined
   }, children !== null && children !== undefined ? children : typeText));
 };

package/es/components/Text/Text.js

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

package/es/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/es/components/TextArea/TextArea.js

@@ -18,25 +18,30 @@ import { useAnnouncer } from '../../internal/useAnnouncer.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { noopFn } from '../../internal/noopFn.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 const getInstanceId = setupGetInstanceId();
 const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   const {
     className,
+    disabled = false,
     id,
     labelText,
     hideLabel,
-    onChange,
-    onClick,
-    invalid,
-    invalidText,
-    helperText,
+    onChange = noopFn,
+    onClick = 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();
@@ -45,8 +50,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   } = useContext(FormContext);
   const {
     defaultValue,
-    value,
-    disabled
+    value
   } = other;
   const [textCount, setTextCount] = useState(defaultValue?.toString()?.length || value?.toString()?.length || 0);
   const {
@@ -58,7 +62,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   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(() => {
@@ -68,7 +72,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
       }
     },
     onClick: evt => {
-      if (!other.disabled && onClick) {
+      if (!disabled && onClick) {
         onClick(evt);
       }
     }
@@ -81,33 +85,38 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
     [`${prefix}--label--disabled`]: disabled
   });
-  const label = labelText ? /*#__PURE__*/React__default.createElement("label", {
+  const label = labelText ? /*#__PURE__*/React__default.createElement(Text, {
+    as: "label",
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
   const counterClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled
   });
-  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement("div", {
+  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
   const helperTextClasses = cx(`${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.createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     id: helperId,
     className: helperTextClasses
   }, helperText) : null;
   const errorId = id + '-error-msg';
-  const error = invalid ? /*#__PURE__*/React__default.createElement("div", {
+  const error = invalid ? /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     role: "alert",
     className: `${prefix}--form-requirement`,
     id: errorId
   }, invalidText, isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--text-area__invalid-icon`
   })) : null;
-  const warning = warn ? /*#__PURE__*/React__default.createElement("div", {
+  const warning = warn ? /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     role: "alert",
     className: `${prefix}--form-requirement`
   }, warnText, isFluid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
@@ -139,7 +148,8 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     className: textareaClasses,
     "aria-invalid": invalid,
     "aria-describedby": ariaDescribedBy,
-    disabled: other.disabled,
+    disabled: disabled,
+    rows: rows,
     readOnly: other.readOnly,
     ref: ref
   }));
@@ -256,19 +266,5 @@ TextArea.propTypes = {
    */
   warnText: PropTypes.node
 };
-TextArea.defaultProps = {
-  disabled: false,
-  onChange: () => {},
-  onClick: () => {},
-  placeholder: '',
-  rows: 4,
-  invalid: false,
-  invalidText: '',
-  helperText: '',
-  enableCounter: false,
-  maxCount: undefined,
-  warn: false,
-  warnText: ''
-};
 
 export { TextArea as default };

package/es/components/TextInput/ControlledPasswordInput.js

@@ -15,6 +15,7 @@ import { warning } from '../../internal/warning.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { noopFn } from '../../internal/noopFn.js';
 
 const getInstanceId = setupGetInstanceId();
 let didWarnAboutDeprecation = false;
@@ -24,12 +25,13 @@ const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function
     className,
     id,
     placeholder,
-    onChange,
-    onClick,
+    onChange = noopFn,
+    onClick = noopFn,
+    disabled = false,
     hideLabel,
-    invalid,
-    invalidText,
-    helperText,
+    invalid = false,
+    invalidText = '',
+    helperText = '',
     light,
     // eslint-disable-next-line react/prop-types
     type = 'password',
@@ -39,7 +41,7 @@ const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function
     tooltipAlignment = 'center',
     hidePasswordLabel = 'Hide password',
     showPasswordLabel = 'Show password',
-    size,
+    size = undefined,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -59,12 +61,12 @@ const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function
   const sharedTextInputProps = {
     id,
     onChange: evt => {
-      if (!other.disabled) {
+      if (!disabled) {
         onChange?.(evt);
       }
     },
     onClick: evt => {
-      if (!other.disabled) {
+      if (!disabled) {
         onClick?.(evt);
       }
     },
@@ -76,10 +78,10 @@ const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function
   };
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: other.disabled
+    [`${prefix}--label--disabled`]: disabled
   });
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: other.disabled
+    [`${prefix}--form__helper-text--disabled`]: disabled
   });
   const label = labelText ? /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
@@ -214,14 +216,5 @@ ControlledPasswordInput.propTypes = {
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-ControlledPasswordInput.defaultProps = {
-  disabled: false,
-  onChange: () => {},
-  onClick: () => {},
-  invalid: false,
-  invalidText: '',
-  helperText: '',
-  size: undefined
-};
 
 export { ControlledPasswordInput as default };

package/es/components/TextInput/TextInput.js

@@ -17,6 +17,8 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useAnnouncer } from '../../internal/useAnnouncer.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref, ref) {
   let {
@@ -121,17 +123,20 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     [`${prefix}--label--disabled`]: disabled,
     [`${prefix}--text-input__label-counter`]: true
   });
-  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement("div", {
+  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
-  const label = labelText ? /*#__PURE__*/React__default.createElement("label", {
+  const label = labelText ? /*#__PURE__*/React__default.createElement(Text, {
+    as: "label",
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
   const labelWrapper = /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--text-input__label-wrapper`
   }, label, counter);
-  const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;

package/es/components/Tile/Tile.js

@@ -19,6 +19,8 @@ import { getInteractiveContent, getRoleContent } from '../../internal/useNoInter
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { useId } from '../../internal/useId.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -79,9 +81,7 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
   function handleOnKeyDown(evt) {
     evt?.persist?.();
     if (matches(evt, [Enter, Space])) {
-      evt.preventDefault();
       setIsSelected(!isSelected);
-      onKeyDown(evt);
     }
     onKeyDown(evt);
   }
@@ -101,6 +101,7 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
   return /*#__PURE__*/React__default.createElement(Link, _extends({
     className: classes,
     href: href,
+    tabIndex: !href && !disabled ? 0 : undefined,
     onClick: !disabled ? handleOnClick : undefined,
     onKeyDown: handleOnKeyDown,
     ref: ref,
@@ -223,7 +224,8 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
       title: title
     }, rest), /*#__PURE__*/React__default.createElement("span", {
       className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`
-    }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement("label", {
+    }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement(Text, {
+      as: "label",
       htmlFor: id,
       className: `${prefix}--tile-content`
     }, children))

package/es/components/TileGroup/TileGroup.js

@@ -11,6 +11,7 @@ import React__default from 'react';
 import RadioTile from '../RadioTile/RadioTile.js';
 import { warning } from '../../internal/warning.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
+import { noopFn } from '../../internal/noopFn.js';
 
 class TileGroup extends React__default.Component {
   constructor() {
@@ -42,11 +43,14 @@ class TileGroup extends React__default.Component {
       return children;
     });
     _defineProperty(this, "handleChange", (newSelection, value, evt) => {
+      const {
+        onChange = 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);
       }
     });
     _defineProperty(this, "renderLegend", legend => {
@@ -121,8 +125,5 @@ _defineProperty(TileGroup, "propTypes", {
    */
   valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 });
-_defineProperty(TileGroup, "defaultProps", {
-  onChange: /* istanbul ignore next */() => {}
-});
 
 export { TileGroup as default };

package/es/components/Toggle/Toggle.js

@@ -11,6 +11,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 var _path;
 function Toggle(_ref) {
@@ -92,7 +94,7 @@ function Toggle(_ref) {
     })), /*#__PURE__*/React__default.createElement(LabelComponent, {
       htmlFor: ariaLabelledby ? undefined : id,
       className: `${prefix}--toggle__label`
-    }, labelText && /*#__PURE__*/React__default.createElement("span", {
+    }, labelText && /*#__PURE__*/React__default.createElement(Text, {
       className: labelTextClasses
     }, labelText), /*#__PURE__*/React__default.createElement("div", {
       className: appearanceClasses
@@ -105,7 +107,7 @@ function Toggle(_ref) {
       viewBox: "0 0 6 5"
     }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
       d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
-    })))), renderSideLabel && /*#__PURE__*/React__default.createElement("span", {
+    })))), renderSideLabel && /*#__PURE__*/React__default.createElement(Text, {
       className: `${prefix}--toggle__text`,
       "aria-hidden": "true"
     }, sideLabel))))

package/es/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/es/components/Toggletip/index.js

@@ -63,6 +63,7 @@ function Toggletip(_ref2) {
   let {
     align,
     as,
+    autoAlign,
     className: customClassName,
     children,
     defaultOpen = false
@@ -137,7 +138,8 @@ function Toggletip(_ref2) {
     open: open,
     onKeyDown: onKeyDown,
     onBlur: handleBlur,
-    ref: ref
+    ref: ref,
+    autoAlign: autoAlign
   }, children));
 }
 Toggletip.propTypes = {
@@ -150,6 +152,10 @@ Toggletip.propTypes = {
    * component.
    */
   as: PropTypes.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.bool,
   /**
    * Custom children to be rendered as the content of the label
    */

package/es/components/UIShell/Content.js

@@ -14,7 +14,7 @@ const Content = _ref => {
   let {
     className: customClassName,
     children,
-    tagName,
+    tagName = 'main',
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -38,9 +38,6 @@ Content.propTypes = {
    */
   tagName: PropTypes.string
 };
-Content.defaultProps = {
-  tagName: 'main'
-};
 var Content$1 = Content;
 
 export { Content$1 as default };

package/es/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/es/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/es/components/UIShell/SideNavDetails.js

@@ -42,6 +42,5 @@ SideNavDetails.propTypes = {
    */
   title: PropTypes.string.isRequired
 };
-var SideNavDetails$1 = SideNavDetails;
 
-export { SideNavDetails$1 as default };
+export { SideNavDetails as default };

package/es/components/UIShell/SideNavDivider.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2021
+ *
+ * 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';
+interface SideNavDividerProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+}
+declare const SideNavDivider: React.FC<SideNavDividerProps>;
+export default SideNavDivider;