@carbon/react 1.42.1 → 1.44.0-rc.0

package/es/components/Slug/index.js

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

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

@@ -42,6 +42,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     warn = false,
     warnText = '',
     rows = 4,
+    slug,
     ...other
   } = props;
   const prefix = usePrefix();
@@ -56,9 +57,19 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   const {
     current: textAreaInstanceId
   } = useRef(getInstanceId());
+  const textareaRef = useRef(null);
+  const ref = useMergedRefs([forwardRef, textareaRef]);
   useEffect(() => {
     setTextCount(defaultValue?.toString()?.length || value?.toString()?.length || 0);
   }, [value, defaultValue]);
+  useIsomorphicEffect(() => {
+    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 => {
@@ -77,29 +88,36 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
       }
     }
   };
-  if (enableCounter) {
-    textareaProps.maxLength = maxCount;
-  }
-  const ariaAnnouncement = useAnnouncer(textCount, maxCount);
+  const formItemClasses = cx(`${prefix}--form-item`, className);
+  const textAreaWrapperClasses = cx(`${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(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
     [`${prefix}--label--disabled`]: disabled
   });
+  const textareaClasses = cx(`${prefix}--text-area`, {
+    [`${prefix}--text-area--light`]: light,
+    [`${prefix}--text-area--invalid`]: invalid,
+    [`${prefix}--text-area--warn`]: warn
+  });
+  const counterClasses = cx(`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled
+  });
+  const helperTextClasses = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
   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(Text, {
     as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
-  const helperTextClasses = cx(`${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.createElement(Text, {
     as: "div",
@@ -122,27 +140,16 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   }, warnText, isFluid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   })) : null;
-  const textareaClasses = cx(`${prefix}--text-area`, {
-    [`${prefix}--text-area--light`]: light,
-    [`${prefix}--text-area--invalid`]: invalid,
-    [`${prefix}--text-area--warn`]: warn
-  });
-  const textareaRef = useRef(null);
-  const ref = useMergedRefs([forwardRef, textareaRef]);
-  useIsomorphicEffect(() => {
-    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(textCount, maxCount);
   const input = /*#__PURE__*/React__default.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder,
     className: textareaClasses,
@@ -153,21 +160,26 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     readOnly: other.readOnly,
     ref: ref
   }));
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", {
-    className: cx(`${prefix}--form-item`, className)
+    className: formItemClasses
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
   }, label, counter), /*#__PURE__*/React__default.createElement("div", {
-    className: cx(`${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.createElement(WarningFilled, {
     className: `${prefix}--text-area__invalid-icon`
   }), warn && !invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
-  }), input, /*#__PURE__*/React__default.createElement("span", {
+  }), input, normalizedSlug, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-area__counter-alert`,
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
@@ -253,6 +265,10 @@ TextArea.propTypes = {
    * Specify the rows attribute for the `<textarea>`
    */
   rows: PropTypes.number,
+  /**
+   * Provide a `Slug` component to be rendered inside the `TextArea` component
+   */
+  slug: PropTypes.node,
   /**
    * Provide the current value of the `<textarea>`
    */

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

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

package/es/components/UIShell/SideNav.js

@@ -170,7 +170,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.forwardRef(SideNavRenderFunction);

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

@@ -13,8 +13,8 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const SideNavHeader = _ref => {
   let {
-    className: customClassName,
     children,
+    className: customClassName,
     renderIcon: IconElement
   } = _ref;
   const prefix = usePrefix();
@@ -42,8 +42,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.oneOfType([PropTypes.func, PropTypes.object]).isRequired
 };
-var SideNavHeader$1 = SideNavHeader;
 
-export { SideNavHeader$1 as default };
+export { SideNavHeader as default };

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

@@ -6,14 +6,15 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef } from 'react';
+import React__default, { forwardRef, useRef } from 'react';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import PropTypes from 'prop-types';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import getDisplayName from '../../prop-types/tools/getDisplayName.js';
 
-const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props, forwardRef) {
+const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
   const switcherRef = useRef(null);
   const ref = useMergedRefs([switcherRef, forwardRef]);
   const prefix = usePrefix();
@@ -29,7 +30,7 @@ const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props,
     'aria-labelledby': ariaLabelledBy
   };
   const className = cx(`${prefix}--switcher`, {
-    [customClassName]: !!customClassName
+    [customClassName || '']: !!customClassName
   });
   const handleSwitcherItemFocus = _ref => {
     let {
@@ -54,13 +55,14 @@ const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props,
           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.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.Children.map(children, (child, index) => {
+    // only setup click handlers if onChange event is passed
+    if ( /*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
       return /*#__PURE__*/React__default.cloneElement(child, {
         handleSwitcherItemFocus,
         index,
@@ -98,6 +100,5 @@ Switcher.propTypes = {
    */
   expanded: PropTypes.bool
 };
-var Switcher$1 = Switcher;
 
-export { Switcher$1 as default };
+export { Switcher as default };

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

@@ -17,11 +17,11 @@ const SwitcherDivider = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const className = cx(`${prefix}--switcher__item--divider`, {
-    [customClassName]: !!customClassName
+  const classNames = cx(`${prefix}--switcher__item--divider`, {
+    [customClassName || '']: !!customClassName
   });
   return /*#__PURE__*/React__default.createElement("hr", _extends({}, other, {
-    className: className
+    className: classNames
   }));
 };
 SwitcherDivider.propTypes = {
@@ -30,6 +30,5 @@ SwitcherDivider.propTypes = {
    */
   className: PropTypes.string
 };
-var SwitcherDivider$1 = SwitcherDivider;
 
-export { SwitcherDivider$1 as default };
+export { SwitcherDivider as default };

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

@@ -0,0 +1,49 @@
+import React from 'react';
+interface BaseSwitcherItemProps {
+    /**
+     * Specify the text content for the link
+     */
+    children: React.ReactNode;
+    /**
+     * Optionally provide a custom class to apply to the underlying `<li>` node
+     */
+    className?: string;
+    /**
+     * event handlers
+     */
+    handleSwitcherItemFocus?: (event: {
+        currentIndex: number;
+        direction: number;
+    }) => void;
+    /**
+     * Specify the index of the SwitcherItem
+     */
+    index?: number;
+    /**
+     * event handlers
+     */
+    onKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Specify the tab index of the Link
+     */
+    tabIndex?: number;
+    /**
+     * Specify whether the panel is expanded
+     */
+    expanded?: boolean;
+    /**
+     * Specify whether the panel is selected
+     */
+    isSelected?: boolean;
+}
+interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+}
+interface SwitcherItemWithAriaLabelledBy extends BaseSwitcherItemProps {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+}
+type SwitcherItemProps = SwitcherItemWithAriaLabel | SwitcherItemWithAriaLabelledBy;
+declare const SwitcherItem: React.ForwardRefExoticComponent<SwitcherItemProps & React.RefAttributes<React.ElementType<any>>>;
+export default SwitcherItem;