@carbon/react 1.42.1 → 1.44.0-rc.0

package/lib/components/Slug/index.js

@@ -0,0 +1,199 @@
+/**
+ * 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 cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+var index = require('../Toggletip/index.js');
+var index$1 = require('../IconButton/index.js');
+var iconsReact = require('@carbon/icons-react');
+var useId = require('../../internal/useId.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _Undo;
+const SlugContent = /*#__PURE__*/React__default["default"].forwardRef(function SlugContent(_ref, ref) {
+  let {
+    children,
+    className
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const slugContentClasses = cx__default["default"](className, {
+    [`${prefix}--slug-content`]: true
+  });
+  return /*#__PURE__*/React__default["default"].createElement(index.ToggletipContent, {
+    className: slugContentClasses,
+    ref: ref
+  }, children);
+});
+SlugContent.propTypes = {
+  /**
+   * Specify the content you want rendered inside the slug ToggleTip
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be added to the AI slug callout
+   */
+  className: PropTypes__default["default"].string
+};
+const SlugActions = /*#__PURE__*/React__default["default"].forwardRef(function SlugActions(_ref2, ref) {
+  let {
+    children,
+    className
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const slugActionBarClasses = cx__default["default"](className, {
+    [`${prefix}--slug-actions`]: true
+  });
+  return /*#__PURE__*/React__default["default"].createElement(index.ToggletipActions, {
+    className: slugActionBarClasses,
+    ref: ref
+  }, children);
+});
+SlugActions.propTypes = {
+  /**
+   * Specify the content you want rendered inside the slug callout toolbar
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be added to the AI slug toolbar
+   */
+  className: PropTypes__default["default"].string
+};
+const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_ref3, ref) {
+  let {
+    aiText = 'AI',
+    aiTextLabel,
+    align,
+    autoAlign = true,
+    children,
+    className,
+    dotType,
+    kind,
+    onRevertClick,
+    revertActive,
+    revertLabel = 'Revert to AI input',
+    slugLabel = 'Show information',
+    size = 'xs',
+    ...rest
+  } = _ref3;
+  const prefix = usePrefix.usePrefix();
+  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"]({
+    [`${prefix}--slug__button`]: true,
+    [`${prefix}--slug__button--${size}`]: size,
+    [`${prefix}--slug__button--${kind}`]: kind,
+    [`${prefix}--slug__button--inline-with-content`]: kind === 'inline' && aiTextLabel
+  });
+  const handleOnRevertClick = evt => {
+    if (onRevertClick) {
+      onRevertClick(evt);
+    }
+  };
+  const ariaLabel = !aiTextLabel ? `${aiText} - ${slugLabel}` : `${aiText} - ${aiTextLabel}`;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: slugClasses,
+    ref: ref,
+    id: id
+  }, revertActive ? /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, _rollupPluginBabelHelpers["extends"]({
+    onClick: handleOnRevertClick,
+    kind: "ghost",
+    size: "sm",
+    label: revertLabel
+  }, rest), _Undo || (_Undo = /*#__PURE__*/React__default["default"].createElement(iconsReact.Undo, null))) : /*#__PURE__*/React__default["default"].createElement(index.Toggletip, _rollupPluginBabelHelpers["extends"]({
+    align: align,
+    autoAlign: autoAlign
+  }, rest), /*#__PURE__*/React__default["default"].createElement(index.ToggletipButton, {
+    className: slugButtonClasses,
+    label: ariaLabel
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--slug__text`
+  }, aiText), aiTextLabel && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--slug__additional-text`
+  }, aiTextLabel)), children));
+});
+Slug.propTypes = {
+  /**
+   * Specify the correct translation of the AI text
+   */
+  aiText: PropTypes__default["default"].string,
+  /**
+   * Specify additional text to be rendered next to the AI label in the inline variant
+   */
+  aiTextLabel: PropTypes__default["default"].string,
+  /**
+   * 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']),
+  /**
+   * 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,
+  /**
+   * Specify the content you want rendered inside the slug ToggleTip
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * 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']),
+  /**
+   * Callback function that fires when the revert button is clicked
+   */
+  onRevertClick: PropTypes__default["default"].func,
+  /**
+   * Specify whether the revert button should be visible
+   */
+  revertActive: PropTypes__default["default"].bool,
+  /**
+   * Specify the text that should be shown when the revert button is hovered
+   */
+  revertLabel: PropTypes__default["default"].string,
+  /**
+   * Specify the size of the button, from the following list of sizes:
+   */
+  size: PropTypes__default["default"].oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * Specify the content you want rendered inside the slug ToggleTip
+   */
+  slugContent: PropTypes__default["default"].node,
+  /**
+   * Specify the text that will be provided to the aria-label of the `Slug` button
+   */
+  slugLabel: PropTypes__default["default"].string
+};
+
+exports.Slug = Slug;
+exports.SlugActions = SlugActions;
+exports.SlugContent = SlugContent;

package/lib/components/TextArea/TextArea.d.ts

@@ -85,6 +85,10 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
      * Specify the rows attribute for the `<textarea>`
      */
     rows?: number;
+    /**
+     * Provide a `Slug` component to be rendered inside the `TextArea` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Provide the current value of the `<textarea>`
      */

package/lib/components/TextArea/TextArea.js

@@ -52,6 +52,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     warn = false,
     warnText = '',
     rows = 4,
+    slug,
     ...other
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -66,9 +67,19 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
   const {
     current: textAreaInstanceId
   } = React.useRef(getInstanceId());
+  const textareaRef = React.useRef(null);
+  const ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
   React.useEffect(() => {
     setTextCount(defaultValue?.toString()?.length || value?.toString()?.length || 0);
   }, [value, defaultValue]);
+  useIsomorphicEffect["default"](() => {
+    if (other.cols && textareaRef.current) {
+      textareaRef.current.style.width = '';
+      textareaRef.current.style.resize = 'none';
+    } else if (textareaRef.current) {
+      textareaRef.current.style.width = `100%`;
+    }
+  }, [other.cols]);
   const textareaProps = {
     id,
     onChange: evt => {
@@ -87,29 +98,36 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
       }
     }
   };
-  if (enableCounter) {
-    textareaProps.maxLength = maxCount;
-  }
-  const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
+  const formItemClasses = cx__default["default"](`${prefix}--form-item`, className);
+  const textAreaWrapperClasses = cx__default["default"](`${prefix}--text-area__wrapper`, {
+    [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
+    [`${prefix}--text-area__wrapper--warn`]: warn,
+    [`${prefix}--text-area__wrapper--slug`]: slug
+  });
   const labelClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
     [`${prefix}--label--disabled`]: disabled
   });
+  const textareaClasses = cx__default["default"](`${prefix}--text-area`, {
+    [`${prefix}--text-area--light`]: light,
+    [`${prefix}--text-area--invalid`]: invalid,
+    [`${prefix}--text-area--warn`]: warn
+  });
+  const counterClasses = cx__default["default"](`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled
+  });
+  const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
   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(Text.Text, {
     as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
-  const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: disabled
-  });
   const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
@@ -132,27 +150,16 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
   }, warnText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   })) : null;
-  const textareaClasses = cx__default["default"](`${prefix}--text-area`, {
-    [`${prefix}--text-area--light`]: light,
-    [`${prefix}--text-area--invalid`]: invalid,
-    [`${prefix}--text-area--warn`]: warn
-  });
-  const textareaRef = React.useRef(null);
-  const ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
-  useIsomorphicEffect["default"](() => {
-    if (other.cols && textareaRef.current) {
-      textareaRef.current.style.width = '';
-      textareaRef.current.style.resize = 'none';
-    } else if (textareaRef.current) {
-      textareaRef.current.style.width = `100%`;
-    }
-  }, [other.cols]);
   let ariaDescribedBy;
   if (invalid) {
     ariaDescribedBy = errorId;
   } else if (!invalid && !warn && !isFluid && helperText) {
     ariaDescribedBy = helperId;
   }
+  if (enableCounter) {
+    textareaProps.maxLength = maxCount;
+  }
+  const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
   const input = /*#__PURE__*/React__default["default"].createElement("textarea", _rollupPluginBabelHelpers["extends"]({}, other, textareaProps, {
     placeholder: placeholder,
     className: textareaClasses,
@@ -163,21 +170,26 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     readOnly: other.readOnly,
     ref: ref
   }));
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](`${prefix}--form-item`, className)
+    className: formItemClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
   }, label, counter), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](`${prefix}--text-area__wrapper`, {
-      [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
-      [`${prefix}--text-area__wrapper--warn`]: warn
-    }),
+    className: textAreaWrapperClasses,
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--text-area__invalid-icon`
   }), warn && !invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
-  }), input, /*#__PURE__*/React__default["default"].createElement("span", {
+  }), input, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-area__counter-alert`,
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
@@ -263,6 +275,10 @@ TextArea.propTypes = {
    * Specify the rows attribute for the `<textarea>`
    */
   rows: PropTypes__default["default"].number,
+  /**
+   * Provide a `Slug` component to be rendered inside the `TextArea` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Provide the current value of the `<textarea>`
    */

package/lib/components/TextInput/TextInput.d.ts

@@ -4,6 +4,7 @@
  * 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 { ReactNodeLike } from 'prop-types';
 import React, { ReactNode } from 'react';
 type ExcludedAttributes = 'defaultValue' | 'id' | 'size' | 'value';
 export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
@@ -85,6 +86,10 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
      * Specify the size of the Text Input. Currently supports the following:
      */
     size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Provide a `Slug` component to be rendered inside the `TextInput` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify the type of the `<input>`
      */

package/lib/components/TextInput/TextInput.js

@@ -52,6 +52,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     warnText,
     enableCounter = false,
     maxCount,
+    slug,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -123,7 +124,8 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     [`${prefix}--text-input__field-outer-wrapper--inline`]: inline
   });
   const fieldWrapperClasses = cx__default["default"](`${prefix}--text-input__field-wrapper`, {
-    [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn
+    [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
+    [`${prefix}--text-input__field-wrapper--slug`]: slug
   });
   const iconClasses = cx__default["default"]({
     [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
@@ -162,6 +164,14 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
   } = React.useContext(FormContext.FormContext);
   const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
   const Icon = normalizedProps.icon;
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -173,7 +183,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     "data-invalid": normalizedProps.invalid || null
   }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses
-  }), input, /*#__PURE__*/React__default["default"].createElement("span", {
+  }), input, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-input__counter-alert`,
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
@@ -260,6 +270,10 @@ TextInput.propTypes = {
    * Specify the size of the Text Input. Currently supports the following:
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  /**
+   * Provide a `Slug` component to be rendered inside the `TextInput` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify the type of the `<input>`
    */

package/lib/components/UIShell/SideNav.js

@@ -180,7 +180,7 @@ function SideNavRenderFunction(_ref, ref) {
     tabIndex: -1,
     ref: navRef,
     className: `${prefix}--side-nav__navigation ${className}`,
-    inert: !isRail && (expanded || isLg ? undefined : -1)
+    inert: !isRail ? expanded || isLg ? undefined : -1 : undefined
   }, accessibilityLabel, eventHandlers, other), childrenToRender));
 }
 const SideNav = /*#__PURE__*/React__default["default"].forwardRef(SideNavRenderFunction);

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

@@ -0,0 +1,29 @@
+/**
+ * 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';
+interface SideNavHeaderProps {
+    /**
+     * The child nodes to be rendered
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Property to indicate if the side nav container is open (or not). Use to
+     * keep local state and styling in step with the SideNav expansion state.
+     */
+    isSideNavExpanded?: boolean;
+    /**
+     * Provide an icon to render in the header of the side navigation. Should be
+     * a React class.
+     */
+    renderIcon: React.ComponentType;
+}
+declare const SideNavHeader: React.FC<SideNavHeaderProps>;
+export default SideNavHeader;

package/lib/components/UIShell/SideNavHeader.js

@@ -23,8 +23,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const SideNavHeader = _ref => {
   let {
-    className: customClassName,
     children,
+    className: customClassName,
     renderIcon: IconElement
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -52,8 +52,8 @@ SideNavHeader.propTypes = {
    * Provide an icon to render in the header of the side navigation. Should be
    * a React class.
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]).isRequired
 };
-var SideNavHeader$1 = SideNavHeader;
 
-exports["default"] = SideNavHeader$1;
+exports["default"] = SideNavHeader;

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

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+/**
+ * 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, { ReactNode } from 'react';
+interface BaseSwitcherProps {
+    /**
+     * expects to receive <SwitcherItem />
+     */
+    children: ReactNode;
+    /**
+     * Optionally provide a custom class to apply to the underlying `<ul>` node
+     */
+    className?: string;
+    /**
+     * Specify whether the panel is expanded
+     */
+    expanded?: boolean;
+}
+interface SwitcherWithAriaLabel extends BaseSwitcherProps {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+}
+interface SwitcherWithAriaLabelledBy extends BaseSwitcherProps {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+}
+type SwitcherProps = SwitcherWithAriaLabel | SwitcherWithAriaLabelledBy;
+declare const Switcher: React.ForwardRefExoticComponent<SwitcherProps & React.RefAttributes<HTMLUListElement>>;
+export default Switcher;

package/lib/components/UIShell/Switcher.js

@@ -12,10 +12,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var cx = require('classnames');
-var PropTypes = require('prop-types');
-var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
+var PropTypes = require('prop-types');
+var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+var getDisplayName = require('../../prop-types/tools/getDisplayName.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,7 +24,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-const Switcher = /*#__PURE__*/React__default["default"].forwardRef(function Switcher(props, forwardRef) {
+const Switcher = /*#__PURE__*/React.forwardRef(function Switcher(props, forwardRef) {
   const switcherRef = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([switcherRef, forwardRef]);
   const prefix = usePrefix.usePrefix();
@@ -39,7 +40,7 @@ const Switcher = /*#__PURE__*/React__default["default"].forwardRef(function Swit
     'aria-labelledby': ariaLabelledBy
   };
   const className = cx__default["default"](`${prefix}--switcher`, {
-    [customClassName]: !!customClassName
+    [customClassName || '']: !!customClassName
   });
   const handleSwitcherItemFocus = _ref => {
     let {
@@ -64,13 +65,14 @@ const Switcher = /*#__PURE__*/React__default["default"].forwardRef(function Swit
           return enabledIndices[nextIndex];
       }
     })();
-    const switcherItem = switcherRef.current.children[nextValidIndex].children[0];
-    switcherItem?.focus();
+    const switcherItem = switcherRef.current?.children[nextValidIndex]?.children[0];
+    if (switcherItem) {
+      switcherItem.focus();
+    }
   };
-  const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => {
-    // handleSwitcherItemFocus should only be passed down if the child is a SwitcherItem
-    // SwitcherDivider, for example, does not accept a handleSwitcherItemFocus prop
-    if (child.type?.displayName === 'SwitcherItem') {
+  const childrenWithProps = React__default["default"].Children.map(children, (child, index) => {
+    // only setup click handlers if onChange event is passed
+    if ( /*#__PURE__*/React__default["default"].isValidElement(child) && child.type && getDisplayName["default"](child.type) === 'Switcher') {
       return /*#__PURE__*/React__default["default"].cloneElement(child, {
         handleSwitcherItemFocus,
         index,
@@ -108,6 +110,5 @@ Switcher.propTypes = {
    */
   expanded: PropTypes__default["default"].bool
 };
-var Switcher$1 = Switcher;
 
-exports["default"] = Switcher$1;
+exports["default"] = Switcher;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SwitcherDividerProps {
+    /**
+     * Optionally provide a custom class to apply to the underlying `<li>` node
+     */
+    className?: string;
+}
+declare const SwitcherDivider: React.FC<SwitcherDividerProps>;
+export default SwitcherDivider;

package/lib/components/UIShell/SwitcherDivider.js

@@ -27,11 +27,11 @@ const SwitcherDivider = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const className = cx__default["default"](`${prefix}--switcher__item--divider`, {
-    [customClassName]: !!customClassName
+  const classNames = cx__default["default"](`${prefix}--switcher__item--divider`, {
+    [customClassName || '']: !!customClassName
   });
   return /*#__PURE__*/React__default["default"].createElement("hr", _rollupPluginBabelHelpers["extends"]({}, other, {
-    className: className
+    className: classNames
   }));
 };
 SwitcherDivider.propTypes = {
@@ -40,6 +40,5 @@ SwitcherDivider.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var SwitcherDivider$1 = SwitcherDivider;
 
-exports["default"] = SwitcherDivider$1;
+exports["default"] = SwitcherDivider;