@carbon/react 1.38.0 → 1.39.0-rc.0

package/es/components/CodeSnippet/CodeSnippet.js

@@ -27,6 +27,7 @@ const defaultMinCollapsedNumberOfRows = 3;
 const defaultMinExpandedNumberOfRows = 16;
 function CodeSnippet(_ref) {
   let {
+    align = 'bottom',
     className,
     type,
     children,
@@ -146,6 +147,7 @@ function CodeSnippet(_ref) {
       }, children));
     }
     return /*#__PURE__*/React__default.createElement(Copy, _extends({}, rest, {
+      align: align,
       onClick: handleCopyClick,
       "aria-label": deprecatedAriaLabel || ariaLabel,
       "aria-describedby": uid,
@@ -200,6 +202,7 @@ function CodeSnippet(_ref) {
   }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--snippet__overflow-indicator--right`
   }), !hideCopyButton && /*#__PURE__*/React__default.createElement(CopyButton, {
+    align: align,
     size: type === 'multi' ? 'sm' : 'md',
     disabled: disabled,
     onClick: handleCopyClick,
@@ -221,6 +224,10 @@ function CodeSnippet(_ref) {
   })));
 }
 CodeSnippet.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Specify a label to be read by screen readers on the containing <textbox>
    * node

package/es/components/ComboBox/ComboBox.d.ts

@@ -5,11 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Downshift from 'downshift';
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithoutRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxType, ListBoxSize } from '../ListBox';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
-export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+interface OnChangeData<ItemType> {
+    selectedItem: ItemType | null;
+}
+type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
+export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.
@@ -35,12 +38,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Additional props passed to Downshift
      */
-    downshiftProps?: React.ComponentProps<typeof Downshift>;
+    downshiftProps?: ComponentProps<typeof Downshift<ItemType>>;
     /**
      * Provide helper text that is used alongside the control label for
      * additional help
      */
-    helperText?: string;
+    helperText?: ReactNode;
     /**
      * Specify a custom `id` for the input
      */
@@ -49,7 +52,7 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
      * from their collection that are pre-selected
      */
-    initialSelectedItem?: object | string | number;
+    initialSelectedItem?: ItemType;
     /**
      * Specify if the currently selected value is invalid.
      */
@@ -57,23 +60,23 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Message which is displayed if the value is invalid.
      */
-    invalidText?: ReactNodeLike;
+    invalidText?: ReactNode;
     /**
      * Optional function to render items as custom components instead of strings.
      * Defaults to null and is overridden by a getter
      */
-    itemToElement?: React.ComponentType | null;
+    itemToElement?: ComponentType<ItemType> | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field
      * from a given item to serve as the item label in the list
      */
-    itemToString?: (item: unknown) => string;
+    itemToString?: ItemToStringHandler<ItemType>;
     /**
      * We try to stay as generic as possible here to allow individuals to pass
      * in a collection of whatever kind of data structure they prefer
      */
-    items: (object | string | number)[];
+    items: ItemType[];
     /**
      * @deprecated
      * should use "light theme" (white background)?
@@ -85,9 +88,7 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * `({ selectedItem }) => void`
     //  * @param {{ selectedItem }}
      */
-    onChange: (data: {
-        selectedItem: any;
-    }) => void;
+    onChange: (data: OnChangeData<ItemType>) => void;
     /**
      * Callback function to notify consumer when the text input changes.
      * This provides support to change available items based on the text.
@@ -95,18 +96,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * @param {string} inputText
      */
     onInputChange?: (inputText: string) => void;
-    /**
-     * Helper function passed to Downshift that allows the user to observe internal
-     * state changes
-     * `(changes, stateAndHelpers) => void`
-     */
-    onStateChange?: (changes: object, stateAndHelpers: object) => void;
     /**
      * Callback function that fires when the combobox menu toggle is clicked
      * `(evt) => void`
      * @param {MouseEvent} event
      */
-    onToggleClick?: (evt: MouseEvent) => void;
+    onToggleClick?: (evt: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Used to provide a placeholder text node before a user enters any input.
      * This is only present if the control has no items selected
@@ -119,13 +114,17 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * For full control of the selection
      */
-    selectedItem?: object | string | number;
+    selectedItem?: ItemType | null;
     /**
      * Specify your own filtering logic by passing in a `shouldFilterItem`
      * function that takes in the current input and an item and passes back
      * whether or not the item should be filtered.
      */
-    shouldFilterItem?: (input: any) => boolean;
+    shouldFilterItem?: (input: {
+        item: ItemType;
+        itemToString?: ItemToStringHandler<ItemType>;
+        inputValue: string | null;
+    }) => boolean;
     /**
      * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
      */
@@ -134,12 +133,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * Provide text to be used in a `<label>` element that is tied to the
      * combobox via ARIA attributes.
      */
-    titleText?: ReactNodeLike;
+    titleText?: ReactNode;
     /**
      * Specify a custom translation function that takes in a message identifier
      * and returns the localized string for the message
      */
-    translateWithId?: (id: any) => string;
+    translateWithId?: (id: string) => string;
     /**
      * Currently supports either the default type, or an inline variant
      */
@@ -151,7 +150,11 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: ReactNodeLike;
+    warnText?: ReactNode;
+}
+type ComboboxComponentProps<ItemType> = PropsWithoutRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
+interface ComboBoxComponent {
+    <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement | null;
 }
-declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<unknown>>;
-export default ComboBox;
+declare const _default: ComboBoxComponent;
+export default _default;

package/es/components/ComboBox/ComboBox.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import Downshift from 'downshift';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useContext, useRef, useState, useEffect } from 'react';
 import '../Text/index.js';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import ListBox from '../ListBox/index.js';
@@ -38,7 +38,13 @@ const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
   }
-  return item && item.label;
+  if (typeof item === 'number') {
+    return `${item}`;
+  }
+  if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
+    return item['label'];
+  }
+  return '';
 };
 const defaultShouldFilterItem = () => true;
 const getInputValue = _ref => {
@@ -74,10 +80,10 @@ const findHighlightedIndex = (_ref2, inputValue) => {
   return -1;
 };
 const getInstanceId = setupGetInstanceId();
-const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   var _Text;
   const {
-    ['aria-label']: ariaLabel,
+    ['aria-label']: ariaLabel = 'Choose an item',
     ariaLabel: deprecatedAriaLabel,
     className: containerClassName,
     direction,
@@ -90,7 +96,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     invalidText,
     items,
     itemToElement,
-    itemToString,
+    itemToString = defaultItemToString,
     light,
     onChange,
     onInputChange,
@@ -98,14 +104,13 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     placeholder,
     readOnly,
     selectedItem,
-    shouldFilterItem,
+    shouldFilterItem = defaultShouldFilterItem,
     size,
     titleText,
     translateWithId,
     type: _type,
     warn,
     warnText,
-    onStateChange: _onStateChange,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -168,7 +173,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       const {
         inputValue
       } = changes;
-      const filteredItems = filterItems(items, itemToString, inputValue);
+      const filteredItems = filterItems(items, itemToString, inputValue || null);
       const indexToHighlight = findHighlightedIndex({
         ...props,
         items: filteredItems
@@ -176,7 +181,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       setHighlightedIndex(indexToHighlight);
       return indexToHighlight;
     }
-    return highlightedIndex;
+    return highlightedIndex || 0;
   };
   const handleOnStateChange = (changes, _ref3) => {
     let {
@@ -351,7 +356,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       disabled: disabled,
       className: inputClasses,
       type: "text",
-      tabIndex: "0",
+      tabIndex: 0,
       "aria-autocomplete": "list",
       "aria-expanded": rootProps['aria-expanded'],
       "aria-haspopup": "listbox",
@@ -378,24 +383,24 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps({
       'aria-label': deprecatedAriaLabel || ariaLabel
     }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
+      const isObject = item !== null && typeof item === 'object';
+      const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
+      const disabled = isObject && 'disabled' in item ? !!item.disabled : undefined;
       const itemProps = getItemProps({
         item,
         index,
         ['aria-current']: selectedItem === item ? 'true' : 'false',
         ['aria-selected']: highlightedIndex === index ? 'true' : 'false',
-        disabled: item.disabled
+        disabled
       });
       return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
         key: itemProps.id,
         isActive: selectedItem === item,
         isHighlighted: highlightedIndex === index,
-        title: itemToElement ? item.text : itemToString ? itemToString(item) : undefined
-      }, itemProps), itemToElement ?
-      /*#__PURE__*/
-      // @ts-ignore
-      React__default.createElement(ItemToElement, _extends({
+        title: title
+      }, itemProps), ItemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
         key: itemProps.id
-      }, item)) : itemToString ? itemToString(item) : defaultItemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {
+      }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {
         className: `${prefix}--list-box__menu-item__selected-icon`
       }));
     }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default.createElement(Text, {
@@ -439,7 +444,7 @@ ComboBox.propTypes = {
    * Provide helper text that is used alongside the control label for
    * additional help
    */
-  helperText: PropTypes.string,
+  helperText: PropTypes.node,
   /**
    * Specify a custom `id` for the input
    */
@@ -491,12 +496,6 @@ ComboBox.propTypes = {
    * @param {string} inputText
    */
   onInputChange: PropTypes.func,
-  /**
-   * Helper function passed to Downshift that allows the user to observe internal
-   * state changes
-   * `(changes, stateAndHelpers) => void`
-   */
-  onStateChange: PropTypes.func,
   /**
    * Callback function that fires when the combobox menu toggle is clicked
    * `(evt) => void`

package/es/components/Copy/Copy.js

@@ -16,6 +16,7 @@ import { IconButton } from '../IconButton/index.js';
 
 function Copy(_ref) {
   let {
+    align = 'bottom',
     children,
     className,
     feedback,
@@ -49,7 +50,7 @@ function Copy(_ref) {
   const initialLabel = other['aria-label'] ?? '';
   return /*#__PURE__*/React__default.createElement(IconButton, _extends({
     closeOnActivation: false,
-    align: "bottom",
+    align: align,
     className: classNames,
     label: animation ? feedback : initialLabel,
     onClick: composeEventHandlers([onClick, handleClick]),
@@ -59,6 +60,10 @@ function Copy(_ref) {
   }), children);
 }
 Copy.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Pass in content to be rendered in the underlying `<button>`
    */

package/es/components/CopyButton/CopyButton.js

@@ -16,6 +16,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 function CopyButton(_ref) {
   let {
+    align = 'bottom',
     iconDescription,
     className,
     ...other
@@ -27,6 +28,7 @@ function CopyButton(_ref) {
       max: 'lg'
     }
   }, /*#__PURE__*/React__default.createElement(Copy, _extends({
+    align: align,
     className: cx(className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
   }, other), /*#__PURE__*/React__default.createElement(Copy$1, {
@@ -34,6 +36,10 @@ function CopyButton(_ref) {
   })));
 }
 CopyButton.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */

package/es/components/FileUploader/FileUploader.js

@@ -28,7 +28,7 @@ class FileUploader extends React__default.Component {
       evt.stopPropagation();
       const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
       this.setState({
-        filenames: this.props.multiple ? this.state.filenames.concat(filenames) : filenames
+        filenames: this.props.multiple ? [...new Set([...this.state.filenames, ...filenames])] : filenames
       });
       if (this.props.onChange) {
         this.props.onChange(evt);

package/es/components/Grid/index.d.ts

@@ -9,3 +9,4 @@ export { Grid } from './Grid';
 export { default as Row } from './Row';
 export { default as Column } from './Column';
 export { ColumnHang } from './ColumnHang';
+export { GridSettings } from './GridContext';

package/es/components/Link/Link.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
-interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
      * @description Indicates the element that represents the
      *   current item within a container or set of related

package/es/components/Link/index.d.ts

@@ -4,6 +4,6 @@
  * 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 Link from './Link';
+import Link, { type LinkProps } from './Link';
 export default Link;
-export { Link };
+export { Link, type LinkProps };

package/es/components/Popover/index.d.ts

@@ -4,7 +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 React, { type WeakValidationMap, type ElementType } from 'react';
+import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
 import { type PolymorphicProps } from '../../types/common';
 export type PopoverAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
 interface PopoverBaseProps {
@@ -52,10 +52,14 @@ interface PopoverBaseProps {
     open: boolean;
 }
 export type PopoverProps<E extends ElementType> = PolymorphicProps<E, PopoverBaseProps>;
-export declare const Popover: (<E extends React.ElementType<any> = "span">(props: PopoverProps<E>) => JSX.Element) & {
-    displayName?: string | undefined;
-    propTypes?: WeakValidationMap<PopoverProps<any>> | undefined;
-};
+export interface PopoverComponent {
+    <E extends ElementType = 'span'>(props: PopoverProps<E> & {
+        forwardRef?: ForwardedRef<ElementType>;
+    }): JSX.Element | null;
+    displayName?: string;
+    propTypes?: WeakValidationMap<PopoverProps<any>>;
+}
+export declare const Popover: PopoverComponent;
 export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;
 export {};

package/es/components/Popover/index.js

@@ -19,7 +19,7 @@ const PopoverContext = /*#__PURE__*/React__default.createContext({
     current: null
   }
 });
-function PopoverRenderFunction(_ref, forwardRef) {
+const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFunction(_ref, forwardRef) {
   let {
     isTabTip,
     align = isTabTip ? 'bottom-left' : 'bottom',
@@ -179,8 +179,7 @@ function PopoverRenderFunction(_ref, forwardRef) {
     className: className,
     ref: ref
   }), isTabTip ? mappedChildren : children));
-}
-const Popover = /*#__PURE__*/React__default.forwardRef(PopoverRenderFunction);
+});
 
 // Note: this displayName is temporarily set so that Storybook ArgTable
 // correctly displays the name of this component

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

@@ -10,7 +10,7 @@ interface HeaderContainerRenderProps {
     isSideNavExpanded: boolean;
     onClickSideNavExpand: () => void;
 }
-interface HeaderContainerProps {
+export interface HeaderContainerProps {
     isSideNavExpanded?: boolean;
     render: React.ComponentType<HeaderContainerRenderProps>;
 }

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

@@ -7,7 +7,7 @@
 import { type ComponentProps } from 'react';
 import PropTypes from 'prop-types';
 type HeaderMenuButtonBaseProps = Omit<ComponentProps<'button'>, 'title' | 'type'>;
-interface HeaderMenuButtonProps extends HeaderMenuButtonBaseProps {
+export interface HeaderMenuButtonProps extends HeaderMenuButtonBaseProps {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     className?: string;
@@ -74,7 +74,9 @@ declare namespace HeaderMenuButton {
         fill(value: string, start?: number | undefined, end?: number | undefined): [key: string];
         copyWithin(target: number, start: number, end?: number | undefined): [key: string];
         entries(): IterableIterator<[number, string]>;
-        keys(): IterableIterator<number>;
+        keys(): IterableIterator<number>; /**
+         * Specify whether the menu button is collapsible.
+         */
         values(): IterableIterator<string>;
         includes(searchElement: string, fromIndex?: number | undefined): boolean;
         flatMap<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];

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

@@ -6,7 +6,7 @@
  */
 import { type ComponentProps, type ForwardedRef, type ReactNode, ElementType, WeakValidationMap } from 'react';
 import { LinkProps } from './Link';
-type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
+export type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
     className?: string | undefined;
     isActive?: boolean | undefined;
     isCurrentPage?: boolean | undefined;

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

@@ -7,7 +7,7 @@
 import { type ElementType } from 'react';
 import PropTypes from 'prop-types';
 import { type LinkProps } from './Link';
-type HeaderNameProps<E extends ElementType> = LinkProps<E> & {
+export type HeaderNameProps<E extends ElementType> = LinkProps<E> & {
     prefix?: string | undefined;
 };
 declare function HeaderName<E extends ElementType = 'a'>({ children, className: customClassName, prefix, ...rest }: HeaderNameProps<E>): JSX.Element;

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

@@ -6,7 +6,7 @@
  */
 import { type ComponentProps } from 'react';
 import PropTypes from 'prop-types';
-type HeaderNavigationProps = ComponentProps<'nav'>;
+export type HeaderNavigationProps = ComponentProps<'nav'>;
 declare function HeaderNavigation({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, className: customClassName, ...rest }: HeaderNavigationProps): JSX.Element;
 declare namespace HeaderNavigation {
     var propTypes: {
@@ -61,10 +61,7 @@ declare namespace HeaderNavigation {
         includes(searchElement: string, fromIndex?: number | undefined): boolean;
         flatMap<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
         flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
-        at(index: number): string | undefined; /**
-         * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
-         * or `HeaderMenu`
-         */
+        at(index: number): string | undefined;
         [Symbol.iterator](): IterableIterator<string>;
         [Symbol.unscopables](): {
             copyWithin: boolean;

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

@@ -6,7 +6,7 @@
  */
 import { type ReactNode } from 'react';
 import PropTypes from 'prop-types';
-interface HeaderSideNavItemsProps {
+export interface HeaderSideNavItemsProps {
     className?: string | undefined;
     children?: ReactNode;
     hasDivider?: boolean | undefined;

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEventHandler } from 'react';
-interface SideNavProps extends ComponentProps<'nav'> {
+export interface SideNavProps extends ComponentProps<'nav'> {
     expanded?: boolean | undefined;
     defaultExpanded?: boolean | undefined;
     isChildOfHeader?: boolean | undefined;

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

@@ -6,7 +6,7 @@
  */
 import { ComponentProps } from 'react';
 import PropTypes from 'prop-types';
-type SkipToContentProps = Omit<ComponentProps<'a'>, 'children'> & {
+export type SkipToContentProps = Omit<ComponentProps<'a'>, 'children'> & {
     children?: string | undefined;
 };
 declare function SkipToContent({ children, className: customClassName, href, tabIndex, ...rest }: SkipToContentProps): JSX.Element;

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

@@ -6,21 +6,21 @@
  */
 export { default as Content } from './Content';
 export { default as Header } from './Header';
-export { default as HeaderContainer } from './HeaderContainer';
+export { default as HeaderContainer, type HeaderContainerProps, } from './HeaderContainer';
 export { default as HeaderGlobalAction } from './HeaderGlobalAction';
 export { default as HeaderGlobalBar } from './HeaderGlobalBar';
 export { default as HeaderMenu } from './HeaderMenu';
-export { default as HeaderMenuButton } from './HeaderMenuButton';
-export { default as HeaderMenuItem } from './HeaderMenuItem';
-export { default as HeaderName } from './HeaderName';
-export { default as HeaderNavigation } from './HeaderNavigation';
+export { default as HeaderMenuButton, type HeaderMenuButtonProps, } from './HeaderMenuButton';
+export { default as HeaderMenuItem, type HeaderMenuItemProps, } from './HeaderMenuItem';
+export { default as HeaderName, type HeaderNameProps } from './HeaderName';
+export { default as HeaderNavigation, type HeaderNavigationProps, } from './HeaderNavigation';
 export { default as HeaderPanel } from './HeaderPanel';
-export { default as HeaderSideNavItems } from './HeaderSideNavItems';
+export { default as HeaderSideNavItems, type HeaderSideNavItemsProps, } from './HeaderSideNavItems';
 export { default as Switcher } from './Switcher';
 export { default as SwitcherItem } from './SwitcherItem';
 export { default as SwitcherDivider } from './SwitcherDivider';
-export { default as SkipToContent } from './SkipToContent';
-export { default as SideNav } from './SideNav';
+export { default as SkipToContent, type SkipToContentProps, } from './SkipToContent';
+export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as SideNavDetails } from './SideNavDetails';
 export { default as SideNavDivider } from './SideNavDivider';
 export { default as SideNavFooter } from './SideNavFooter';

package/es/index.js

@@ -50,6 +50,7 @@ export { Grid } from './components/Grid/Grid.js';
 export { default as Row } from './components/Grid/Row.js';
 export { default as Column } from './components/Grid/Column.js';
 export { ColumnHang } from './components/Grid/ColumnHang.js';
+export { GridSettings } from './components/Grid/GridContext.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
 export { IdPrefix } from './components/IdPrefix/index.js';
 export { default as Link } from './components/Link/Link.js';

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -39,6 +39,7 @@ const defaultMinCollapsedNumberOfRows = 3;
 const defaultMinExpandedNumberOfRows = 16;
 function CodeSnippet(_ref) {
   let {
+    align = 'bottom',
     className,
     type,
     children,
@@ -158,6 +159,7 @@ function CodeSnippet(_ref) {
       }, children));
     }
     return /*#__PURE__*/React__default["default"].createElement(Copy["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+      align: align,
       onClick: handleCopyClick,
       "aria-label": deprecatedAriaLabel || ariaLabel,
       "aria-describedby": uid,
@@ -212,6 +214,7 @@ function CodeSnippet(_ref) {
   }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--snippet__overflow-indicator--right`
   }), !hideCopyButton && /*#__PURE__*/React__default["default"].createElement(CopyButton["default"], {
+    align: align,
     size: type === 'multi' ? 'sm' : 'md',
     disabled: disabled,
     onClick: handleCopyClick,
@@ -233,6 +236,10 @@ function CodeSnippet(_ref) {
   })));
 }
 CodeSnippet.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Specify a label to be read by screen readers on the containing <textbox>
    * node