@carbon/react 1.38.0 → 1.39.0

package/es/components/StructuredList/StructuredList.d.ts

@@ -0,0 +1,271 @@
+/**
+ * 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 { type HTMLAttributes, type ReactNode, type KeyboardEvent, type ChangeEvent, type MouseEvent } from 'react';
+import PropTypes from 'prop-types';
+type DivAttrs = HTMLAttributes<HTMLDivElement>;
+export interface StructuredListWrapperProps extends DivAttrs {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     */
+    'aria-label'?: string;
+    /**
+     * Provide the contents of your StructuredListWrapper
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify if structured list is condensed, default is false
+     */
+    isCondensed?: boolean;
+    /**
+     * Specify if structured list is flush, default is false
+     */
+    isFlush?: boolean;
+    /**
+     * Specify whether your StructuredListWrapper should have selections
+     */
+    selection?: boolean;
+}
+export declare function StructuredListWrapper(props: StructuredListWrapperProps): JSX.Element;
+export declare namespace StructuredListWrapper {
+    var propTypes: {
+        /**
+         * Specify a label to be read by screen readers on the container node
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Specify a label to be read by screen readers on the container note.
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide the contents of your StructuredListWrapper
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if structured list is condensed, default is false
+         */
+        isCondensed: PropTypes.Requireable<boolean>;
+        /**
+         * Specify if structured list is flush, not valid for selection variant, default is false
+         */
+        isFlush: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether your StructuredListWrapper should have selections
+         */
+        selection: PropTypes.Requireable<boolean>;
+    };
+}
+export interface StructuredListHeadProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListHead
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+}
+export declare function StructuredListHead(props: any): JSX.Element;
+export declare namespace StructuredListHead {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListHead
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export interface StructuredListBodyProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListBody
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    head?: boolean;
+    /**
+     * Provide a handler that is invoked on the key down event for the control
+     */
+    onKeyDown?(event: KeyboardEvent): void;
+}
+export declare function StructuredListBody(props: StructuredListBodyProps): JSX.Element;
+export declare namespace StructuredListBody {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListBody
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        head: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a handler that is invoked on the key down event for the control
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export interface StructuredListRowProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListRow
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether your StructuredListRow should be used as a header row
+     */
+    head?: boolean;
+    /**
+     * Provide a handler that is invoked on the click
+     */
+    onClick?(event: MouseEvent): void;
+    /**
+     * Provide a handler that is invoked on the key down event for the control
+     */
+    onKeyDown?(event: KeyboardEvent): void;
+}
+export declare function StructuredListRow(props: StructuredListRowProps): JSX.Element;
+export declare namespace StructuredListRow {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListRow
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether your StructuredListRow should be used as a header row
+         */
+        head: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether a `<label>` should be used
+         */
+        label: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide a handler that is invoked on the click
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a handler that is invoked on the key down event for the control,
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export interface StructuredListInputProps extends DivAttrs {
+    /**
+     * Specify an optional className to be applied to the input
+     */
+    className?: string;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id?: string;
+    /**
+     * Provide a `name` for the input
+     */
+    name?: string;
+    /**
+     * Provide an optional hook that is called each time the input is updated
+     */
+    onChange?(event: ChangeEvent<HTMLInputElement>): void;
+    /**
+     * Provide a `title` for the input
+     */
+    title?: string;
+}
+export declare function StructuredListInput(props: StructuredListInputProps): JSX.Element;
+export declare namespace StructuredListInput {
+    var propTypes: {
+        /**
+         * Specify an optional className to be applied to the input
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the underlying input should be checked by default
+         */
+        defaultChecked: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Specify a custom `id` for the input
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide a `name` for the input
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional hook that is called each time the input is updated
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a `title` for the input
+         */
+        title: PropTypes.Requireable<string>;
+        /**
+         * Specify the value of the input
+         */
+        value: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+    };
+}
+export interface StructuredListCellProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListCell
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether your StructuredListCell should be used as a header cell
+     */
+    head?: boolean;
+    /**
+     * Specify whether your StructuredListCell should have text wrapping
+     */
+    noWrap?: boolean;
+}
+export declare function StructuredListCell(props: StructuredListCellProps): JSX.Element;
+export declare namespace StructuredListCell {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListCell
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether your StructuredListCell should be used as a header cell
+         */
+        head: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether your StructuredListCell should have text wrapping
+         */
+        noWrap: PropTypes.Requireable<boolean>;
+    };
+}
+export {};

package/es/components/StructuredList/StructuredList.js

@@ -20,18 +20,19 @@ function StructuredListWrapper(props) {
     children,
     selection,
     className,
-    ['aria-label']: ariaLabel,
+    ['aria-label']: ariaLabel = 'Structured list section',
+    // @ts-expect-error: Deprecated prop
     ariaLabel: deprecatedAriaLabel,
     isCondensed,
     isFlush,
     ...other
   } = props;
   const prefix = usePrefix();
-  const classes = cx(`${prefix}--structured-list`, className, {
+  const classes = cx(`${prefix}--structured-list`, {
     [`${prefix}--structured-list--selection`]: selection,
     [`${prefix}--structured-list--condensed`]: isCondensed,
     [`${prefix}--structured-list--flush`]: isFlush && !selection
-  });
+  }, className);
   const [selectedRow, setSelectedRow] = React__default.useState(null);
   return /*#__PURE__*/React__default.createElement(GridSelectedRowStateContext.Provider, {
     value: selectedRow
@@ -75,12 +76,6 @@ StructuredListWrapper.propTypes = {
    */
   selection: PropTypes.bool
 };
-StructuredListWrapper.defaultProps = {
-  selection: false,
-  isCondensed: false,
-  isFlush: false,
-  ['aria-label']: 'Structured list section'
-};
 function StructuredListHead(props) {
   const {
     children,
@@ -132,9 +127,6 @@ StructuredListBody.propTypes = {
    */
   onKeyDown: PropTypes.func
 };
-StructuredListBody.defaultProps = {
-  onKeyDown: () => {}
-};
 const GridRowContext = /*#__PURE__*/React__default.createContext(null);
 function StructuredListRow(props) {
   const {
@@ -153,11 +145,11 @@ function StructuredListRow(props) {
   const value = {
     id
   };
-  const classes = cx(`${prefix}--structured-list-row`, className, {
+  const classes = cx(`${prefix}--structured-list-row`, {
     [`${prefix}--structured-list-row--header-row`]: head,
     [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
     [`${prefix}--structured-list-row--selected`]: selectedRow === id
-  });
+  }, className);
   return head ? /*#__PURE__*/React__default.createElement("div", _extends({
     role: "row"
   }, other, {
@@ -171,9 +163,9 @@ function StructuredListRow(props) {
   }, other, {
     role: "row",
     className: classes,
-    onClick: () => {
-      setSelectedRow(id);
-      onClick && onClick();
+    onClick: event => {
+      setSelectedRow?.(id);
+      onClick && onClick(event);
     },
     onFocus: () => {
       setHasFocusWithin(true);
@@ -204,7 +196,7 @@ StructuredListRow.propTypes = {
    */
   label: deprecate(PropTypes.bool, `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.`),
   /**
-   * Provide a handler that is invoked on the click,
+   * Provide a handler that is invoked on the click
    */
   onClick: PropTypes.func,
   /**
@@ -212,10 +204,6 @@ StructuredListRow.propTypes = {
    */
   onKeyDown: PropTypes.func
 };
-StructuredListRow.defaultProps = {
-  head: false,
-  onKeyDown: () => {}
-};
 function StructuredListInput(props) {
   const defaultId = useId('structureListInput');
   const {
@@ -234,10 +222,10 @@ function StructuredListInput(props) {
   return /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
     type: "radio",
     tabIndex: 0,
-    checked: row && row.id === selectedRow,
+    checked: !!row && row.id === selectedRow,
     value: row?.id ?? '',
     onChange: event => {
-      setSelectedRow(event.target.value);
+      setSelectedRow?.(event.target.value);
       onChange && onChange(event);
     },
     id: id ?? defaultId,
@@ -276,9 +264,6 @@ StructuredListInput.propTypes = {
    */
   value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, `\nThe prop \`value\` will be removed in the next major version of Carbon.`)
 };
-StructuredListInput.defaultProps = {
-  title: 'title'
-};
 function StructuredListCell(props) {
   const {
     children,
@@ -288,11 +273,11 @@ function StructuredListCell(props) {
     ...other
   } = props;
   const prefix = usePrefix();
-  const classes = cx(className, {
+  const classes = cx({
     [`${prefix}--structured-list-th`]: head,
     [`${prefix}--structured-list-td`]: !head,
     [`${prefix}--structured-list-content--nowrap`]: noWrap
-  });
+  }, className);
   if (head) {
     return /*#__PURE__*/React__default.createElement("span", _extends({
       className: classes,
@@ -322,9 +307,5 @@ StructuredListCell.propTypes = {
    */
   noWrap: PropTypes.bool
 };
-StructuredListCell.defaultProps = {
-  head: false,
-  noWrap: false
-};
 
 export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper };

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export * from './StructuredList';
+export { default as StructuredListSkeleton, type StructuredListSkeletonProps, } from './StructuredList.Skeleton';

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/SideNavDivider.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
+var _hr;
 function SideNavDivider(_ref) {
   let {
     className
@@ -17,9 +18,8 @@ function SideNavDivider(_ref) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--side-nav__divider`, className);
   return /*#__PURE__*/React__default.createElement("li", {
-    role: "separator",
     className: classNames
-  });
+  }, _hr || (_hr = /*#__PURE__*/React__default.createElement("hr", null)));
 }
 SideNavDivider.propTypes = {
   /**

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';
@@ -75,6 +76,8 @@ export { default as SelectItemGroup } from './components/SelectItemGroup/SelectI
 export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
 export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
 export { default as Slider } from './components/Slider/index.js';
+export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/StructuredList.js';
+export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
 export { default as TabContent } from './components/TabContent/TabContent.js';
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
@@ -214,8 +217,6 @@ export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as SecondaryButton } from './components/SecondaryButton/SecondaryButton.js';
 export { default as SkeletonIcon } from './components/SkeletonIcon/SkeletonIcon.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
-export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
-export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/StructuredList.js';
 export { default as Switch } from './components/Switch/Switch.js';
 export { default as IconSwitch } from './components/Switch/IconSwitch.js';
 export { Stack } from './components/Stack/Stack.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,
@@ -234,13 +237,17 @@ function CodeSnippet(_ref) {
 }
 CodeSnippet.propTypes = {
   /**
-   * Specify a label to be read by screen readers on the containing <textbox>
+   * 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
    */
   ['aria-label']: PropTypes__default["default"].string,
   /**
    * Deprecated, please use `aria-label` instead.
-   * Specify a label to be read by screen readers on the containing <textbox>
+   * Specify a label to be read by screen readers on the containing textbox
    * node
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),