@carbon/ibm-products 2.78.0 → 2.79.0

package/es/components/Tearsheet/next/TearsheetBody.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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';
+/**
+ * ----------------
+ * TearsheetBody
+ * ----------------
+ */
+export interface TearsheetBodyProps {
+    /**
+     * Optional static content for body
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
+declare const TearsheetBody: React.ForwardRefExoticComponent<TearsheetBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface MainContentProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * ----------------
+ * MainContent
+ * ----------------
+ */
+export declare const MainContent: React.ForwardRefExoticComponent<MainContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ----------------
+ * SummaryContent
+ * ----------------
+ */
+export interface SummaryContentProps {
+    children: ReactNode;
+    className?: string;
+    /**
+     * In mobile screens right side details section wont be visible by default. This prop can be toggled to open/close right panel in this case.
+     */
+    summaryPanelOpen?: boolean;
+    /**
+     * Specify a handler for closing the side panel.
+     * This handler closes the modal, e.g. changing `open` prop.
+     */
+    onSummaryPanelClose?(): void;
+}
+export declare const SummaryContent: React.ForwardRefExoticComponent<SummaryContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface InfluencerProps {
+    children: ReactNode;
+    className?: string;
+    /**
+     * In mobile screens right side details section wont be visible by default. This prop can be toggled to open/close right panel in this case.
+     */
+    influencerPanelOpen?: boolean;
+    /**
+     * Specify a handler for closing the side panel.
+     * This handler closes the modal, e.g. changing `open` prop.
+     */
+    onInfluencerPanelClose?(): void;
+}
+export declare const Influencer: React.ForwardRefExoticComponent<InfluencerProps & React.RefAttributes<HTMLDivElement>>;
+export default TearsheetBody;

package/es/components/Tearsheet/next/TearsheetBody.js

@@ -0,0 +1,121 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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 React__default, { forwardRef, useContext, useRef } from 'react';
+import { blockClass, TearsheetContext } from './context.js';
+import { SidePanel } from '../../SidePanel/SidePanel.js';
+import { Layer } from '@carbon/react';
+import { useCollapsible } from '../../../global/js/hooks/useCollapsible.js';
+
+/**
+ * ----------------
+ * TearsheetBody
+ * ----------------
+ */
+
+const TearsheetBody = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__body ${className}`,
+    ref: ref
+  }, children);
+});
+/**
+ * ----------------
+ * MainContent
+ * ----------------
+ */
+const MainContent = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref2;
+  const localRef = useRef(null);
+  const mainContentRef = ref || localRef;
+  const {
+    setFullyCollapsed,
+    disableHeaderCollapse
+  } = useContext(TearsheetContext);
+  const container = typeof mainContentRef === 'function' ? null : mainContentRef?.current ?? null;
+  const collapseHeader = collapse => {
+    if (container) {
+      if (collapse) {
+        const canScroll = container.scrollHeight > container.clientHeight; // collapse header only when there is scroll
+
+        if (canScroll) {
+          setFullyCollapsed?.(true);
+        }
+      } else if (container.scrollTop === 0) {
+        // expand header when scroll reaches top
+        setFullyCollapsed?.(false);
+      }
+    }
+  };
+  useCollapsible({
+    container,
+    triggerCollapse: collapseHeader,
+    disableHeaderCollapse
+  });
+  return /*#__PURE__*/React__default.createElement(Layer, _extends({
+    withBackground: true,
+    className: `${blockClass}__main-content  ${className}`,
+    ref: mainContentRef
+  }, rest), children);
+});
+
+/**
+ * ----------------
+ * SummaryContent
+ * ----------------
+ */
+
+const SummaryContent = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    children,
+    className,
+    summaryPanelOpen = false,
+    onSummaryPanelClose
+  } = _ref3;
+  const {
+    isSm
+  } = useContext(TearsheetContext);
+  return !isSm ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__summary-content ${className}`,
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement("aside", null, children)) : /*#__PURE__*/React__default.createElement(SidePanel, {
+    size: "sm",
+    open: summaryPanelOpen,
+    onRequestClose: onSummaryPanelClose
+  }, children);
+});
+const Influencer = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    children,
+    className,
+    influencerPanelOpen = false,
+    onInfluencerPanelClose
+  } = _ref4;
+  const {
+    isSm
+  } = useContext(TearsheetContext);
+  return !isSm ? /*#__PURE__*/React__default.createElement("aside", {
+    className: `${blockClass}__influencer ${className}`,
+    ref: ref
+  }, children) : /*#__PURE__*/React__default.createElement(SidePanel, {
+    size: "sm",
+    open: influencerPanelOpen,
+    onRequestClose: onInfluencerPanelClose,
+    placement: "left"
+  }, children);
+});
+
+export { Influencer, MainContent, SummaryContent, TearsheetBody as default };

package/es/components/Tearsheet/next/TearsheetHeader.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { IconButtonProps } from '@carbon/react';
+import React, { ReactNode } from 'react';
+/**
+ * ----------------
+ * TearsheetHeader
+ * ----------------
+ */
+export interface TearsheetHeaderProps {
+    /**
+     * Provide the optional content for header section and will be render after header titles and before progress indicator.
+     * People can make use of this if they want to have custom header.
+     */
+    children?: React.ReactNode;
+    /**
+     * The accessibility title for the close icon (if shown).
+     *
+     * **Note:** This prop is only required if a close icon is shown, i.e. if
+     * there are a no navigation actions and/or hasCloseIcon is true.
+     */
+    closeIconDescription?: string;
+    /**
+     * Enable a close icon ('x') in the header area of the tearsheet. By default,
+     * (when this prop is omitted, or undefined or null) a tearsheet does not
+     * display a close icon if there are navigation actions ("transactional
+     * tearsheet") and displays one if there are no navigation actions ("passive
+     * tearsheet"), and that behavior can be overridden if required by setting
+     * this prop to either true or false.
+     */
+    hideCloseButton?: boolean;
+    className?: string;
+    /**
+     * Default header collapse/expand while scrolling the main content can bd disabled  by setting this
+     */
+    disableHeaderCollapse?: boolean;
+}
+declare const TearsheetHeader: React.ForwardRefExoticComponent<TearsheetHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default TearsheetHeader;
+/**
+ * ----------------
+ * TearsheetNavigationBar
+ * ----------------
+ */
+export interface TearsheetNavigationBarProps {
+    children: ReactNode;
+    scroller?: React.ReactNode;
+    className?: string;
+}
+export declare const TearsheetNavigationBar: React.ForwardRefExoticComponent<TearsheetNavigationBarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ----------------
+ * TearsheetScrollButton
+ * ----------------
+ */
+export interface TearsheetScrollButtonProps extends IconButtonProps {
+    collapseText?: string;
+    expandText?: string;
+    className?: string;
+}
+export declare const TearsheetScrollButton: React.ForwardRefExoticComponent<TearsheetScrollButtonProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/Tearsheet/next/TearsheetHeader.js

@@ -0,0 +1,121 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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 { ModalHeader, IconButton } from '@carbon/react';
+import React__default, { useContext, useRef, useEffect } from 'react';
+import cx from 'classnames';
+import { TearsheetContext, blockClass } from './context.js';
+import { ChevronUp } from '@carbon/react/icons';
+
+/**
+ * ----------------
+ * TearsheetHeader
+ * ----------------
+ */
+
+const TearsheetHeader = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    closeIconDescription,
+    hideCloseButton = false,
+    className,
+    disableHeaderCollapse,
+    ...rest
+  } = props;
+  const {
+    setHasCloseIcon,
+    fullyCollapsed,
+    onClose,
+    setDisableHeaderCollapse
+  } = useContext(TearsheetContext);
+  const localRef = useRef(undefined);
+  const headerRef = ref || localRef;
+  useEffect(() => {
+    setHasCloseIcon?.(!!hideCloseButton);
+  }, [hideCloseButton, setHasCloseIcon]);
+  useEffect(() => {
+    setDisableHeaderCollapse?.(!!disableHeaderCollapse);
+  }, [disableHeaderCollapse, setDisableHeaderCollapse]);
+  return /*#__PURE__*/React__default.createElement(ModalHeader, _extends({
+    ref: headerRef,
+    className: cx(`${blockClass}__header`, {
+      [`${className}`]: true,
+      [`${blockClass}__header--with-close-icon`]: !!hideCloseButton,
+      [`${blockClass}__header-collapsed`]: fullyCollapsed
+    }),
+    closeClassName: cx({
+      [`${blockClass}__header--no-close-icon`]: hideCloseButton
+    }),
+    closeModal: onClose,
+    iconDescription: closeIconDescription
+  }, rest), children);
+});
+
+/**
+ * ----------------
+ * TearsheetNavigationBar
+ * ----------------
+ */
+
+const TearsheetNavigationBar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    scroller,
+    className,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: `${blockClass}__navigation-bar  ${className}`
+  }, rest), children, scroller);
+});
+
+/**
+ * ----------------
+ * TearsheetScrollButton
+ * ----------------
+ */
+
+const TearsheetScrollButton = /*#__PURE__*/React__default.forwardRef(function PageHeaderExpander(_ref, ref) {
+  let {
+    className,
+    children,
+    label,
+    onClick,
+    collapseText = 'Collapse',
+    expandText = 'Expand',
+    ...other
+  } = _ref;
+  const {
+    fullyCollapsed,
+    setFullyCollapsed
+  } = React__default.useContext(TearsheetContext);
+  const handleScroller = isFullyCollapsed => {
+    setFullyCollapsed?.(!isFullyCollapsed);
+  };
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: `${blockClass}__scroller-container  ${className}`
+  }, /*#__PURE__*/React__default.createElement(IconButton, _extends({
+    ref: ref,
+    label: fullyCollapsed ? expandText : collapseText,
+    size: "md",
+    kind: "ghost",
+    autoAlign: true
+  }, other, {
+    onClick: event => {
+      onClick?.(event);
+      handleScroller(!!fullyCollapsed);
+    },
+    className: cx(className, `${blockClass}__scroller-button`)
+  }), /*#__PURE__*/React__default.createElement(ChevronUp, {
+    className: cx(`${blockClass}__scroller-button-icon`, {
+      [`${blockClass}__scroller-button-icon-collapsed`]: fullyCollapsed
+    })
+  })));
+});
+
+export { TearsheetNavigationBar, TearsheetScrollButton, TearsheetHeader as default };

package/es/components/Tearsheet/next/TearsheetHeaderActions.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { MenuButtonProps } from '@carbon/react';
+import React, { ReactNode } from 'react';
+/**
+ * ----------------
+ * TearsheetHeaderActions
+ * ----------------
+ */
+type EnhancedChild = React.ReactElement<{
+    id: string;
+    menuItemLabel: string;
+}>;
+export interface TearsheetHeaderActionsProps {
+    /**
+     * Provide child elements to be rendered inside TearsheetHeaderActions.
+     */
+    children: EnhancedChild[];
+    /**
+     * Specify an optional className to be added to your TearsheetHeaderActions
+     */
+    className?: string;
+    /**
+     * The PageHeaderContent's page actions collapsible Menu button label
+     */
+    menuButtonProps?: MenuButtonProps;
+}
+export declare const TearsheetHeaderActions: ({ className, children, menuButtonProps, }: TearsheetHeaderActionsProps) => React.JSX.Element;
+/**
+ * ----------------
+ * TearsheetHeaderActionsItem
+ * ----------------
+ */
+export interface TearsheetHeaderActionItemProps {
+    /**
+     * Provide child elements to be rendered inside TearsheetHeaderActions.
+     */
+    children: ReactNode;
+    /**
+     * Specify an optional className to be added to your TearsheetHeaderActions
+     */
+    className?: string;
+    /**
+     * The PageHeaderContent's page actions collapsible Menu button label
+     */
+    overflowItemLabel?: string;
+    id?: string;
+}
+export declare const TearsheetHeaderActionItem: ({ children, className, }: TearsheetHeaderActionItemProps) => React.JSX.Element;
+export {};

package/es/components/Tearsheet/next/TearsheetHeaderActions.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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 { MenuButton, MenuItem } from '@carbon/react';
+import React__default, { useRef, useState, useLayoutEffect } from 'react';
+import { blockClass } from './context.js';
+import { createOverflowHandler } from '@carbon/utilities';
+
+/**
+ * ----------------
+ * TearsheetHeaderActions
+ * ----------------
+ */
+
+const TearsheetHeaderActions = _ref => {
+  let {
+    className,
+    children,
+    menuButtonProps
+  } = _ref;
+  const containerRef = useRef(null);
+  const offsetRef = useRef(null);
+  const [menuButtonVisibility, setMenuButtonVisibility] = useState(false);
+  const [hiddenItems, setHiddenItems] = useState([]);
+  const hasOtherChildType = useRef(false);
+
+  // need to set the grid columns width based on the menu button's width
+  // to avoid overlapping when resizing
+  useLayoutEffect(() => {
+    if (menuButtonVisibility && offsetRef.current) {
+      const width = offsetRef.current.offsetWidth;
+      document.documentElement.style.setProperty('--tearsheet-header-title-grid-width', `${width}px`);
+    }
+  }, [menuButtonVisibility]);
+  const items = React__default.Children.toArray(children).filter(child => {
+    if (/*#__PURE__*/React__default.isValidElement(child) && child.type !== TearsheetHeaderActionItem) {
+      hasOtherChildType.current = true;
+    }
+    return /*#__PURE__*/React__default.isValidElement(child);
+  });
+  useLayoutEffect(() => {
+    //Menu button will be rendered only if they pass the items in TearsheetHeaderActionItem
+    if (!containerRef.current || hasOtherChildType.current) {
+      return;
+    }
+    createOverflowHandler({
+      container: containerRef.current,
+      onChange: (visible, hidden) => {
+        setHiddenItems(items?.slice(visible.length));
+        if (hidden.length > 0) {
+          setMenuButtonVisibility(true);
+        }
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerRef.current]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__content__header-actions  ${className}`,
+    ref: containerRef
+  }, children, !hasOtherChildType.current && /*#__PURE__*/React__default.createElement("span", {
+    "data-offset": true,
+    "data-hidden": true,
+    ref: offsetRef
+  }, /*#__PURE__*/React__default.createElement(MenuButton, _extends({
+    size: "sm"
+  }, menuButtonProps), hiddenItems.map(item => {
+    if (! /*#__PURE__*/React__default.isValidElement(item)) {
+      return null;
+    }
+    const childProps = item.props;
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      renderIcon: childProps?.children?.props?.renderIcon ?? undefined,
+      key: childProps.id,
+      onClick: childProps?.children?.props?.onClick,
+      label: childProps.overflowItemLabel
+    });
+  }))));
+};
+
+/**
+ * ----------------
+ * TearsheetHeaderActionsItem
+ * ----------------
+ */
+
+const TearsheetHeaderActionItem = _ref2 => {
+  let {
+    children,
+    className
+  } = _ref2;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__header-action-item  ${className}`
+  }, children);
+};
+
+export { TearsheetHeaderActionItem, TearsheetHeaderActions };

package/es/components/Tearsheet/next/TearsheetHeaderContent.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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';
+import { CarbonIconType } from '@carbon/react/icons';
+export interface TearsheetHeaderContentProps {
+    /**
+     * Provide the optional content for header section and will be render after header titles and before progress indicator.
+     * People can make use of this if they want to have custom header.
+     */
+    children?: React.ReactNode;
+    title: string;
+    label?: string;
+    description?: string;
+    descriptionExpandLabel?: string;
+    descriptionCollapseLabel?: string;
+    titleIcon?: CarbonIconType;
+    titleIconPosition?: 'leading' | 'trailing';
+    /**
+     * The PageHeaderContent's page actions
+     */
+    headerActions?: React.ReactNode;
+}
+declare const TearsheetHeaderContent: React.ForwardRefExoticComponent<TearsheetHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
+export default TearsheetHeaderContent;

package/es/components/Tearsheet/next/TearsheetHeaderContent.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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__default, { useContext } from 'react';
+import cx from 'classnames';
+import { TearsheetContext, blockClass } from './context.js';
+import { TruncatedText } from '../../TruncatedText/TruncatedText.js';
+
+const TearsheetHeaderContent = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    label,
+    title,
+    description,
+    descriptionExpandLabel = 'Read more',
+    descriptionCollapseLabel = 'Read less',
+    titleIcon: Icon,
+    titleIconPosition = 'leading',
+    headerActions,
+    ...rest
+  } = props;
+  const {
+    isSm
+  } = useContext(TearsheetContext);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__header-content-wrapper`,
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__header-content`
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: `${blockClass}__header-label`
+  }, label), /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__content__title-wrapper`
+  }, /*#__PURE__*/React__default.createElement("h2", {
+    className: cx(`${blockClass}__header-title`, {
+      [`${blockClass}__leading-icon`]: Icon && titleIconPosition === 'leading'
+    }, {
+      [`${blockClass}__trailing-icon`]: Icon && titleIconPosition === 'trailing'
+    })
+  }, !isSm && Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    size: 32
+  }), /*#__PURE__*/React__default.createElement(TruncatedText, {
+    id: `${blockClass}__header-title__truncatedText`,
+    className: `${blockClass}__content__title`,
+    align: "bottom",
+    autoAlign: true,
+    value: title
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__header-description`
+  }, /*#__PURE__*/React__default.createElement(TruncatedText, {
+    id: `${blockClass}__header-description__truncatedText`,
+    expandLabel: descriptionExpandLabel,
+    collapseLabel: descriptionCollapseLabel,
+    value: description,
+    type: "expand"
+  })), children && /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__header-content--extra`
+  }, children)), headerActions && /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__header-actions`
+  }, headerActions));
+});
+
+export { TearsheetHeaderContent as default };

package/es/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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';
+import { StepState } from '../../../StepFlow';
+interface Props {
+    children?: ReactNode;
+    influencer?: ((a: StepState) => ReactNode) | null;
+    open?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    hasCloseIcon?: boolean;
+    closeIconDescription?: string;
+    selectorPrimaryFocus?: string;
+    setOpen?: (open: boolean) => void;
+    progressIndicator?: 'vertical' | 'horizontal';
+}
+export declare const TearsheetWithSteps: ({ children, open, setOpen, onClose, influencer, title, hasCloseIcon, closeIconDescription, selectorPrimaryFocus, progressIndicator, ...rest }: Props) => React.JSX.Element;
+export {};

package/es/components/Tearsheet/next/context.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * -------------
+ * Context setup
+ * -------------
+ */
+interface TearsheetContextType {
+    hasCloseIcon: boolean;
+    setHasCloseIcon?: (value: boolean) => void;
+    fullyCollapsed: boolean;
+    setFullyCollapsed?: (value: boolean) => void;
+    refs?: any;
+    onClose?: () => void;
+    disableHeaderCollapse?: boolean;
+    setDisableHeaderCollapse?: (value: boolean) => void;
+    variant: 'wide' | 'narrow';
+    isSm: boolean;
+}
+export declare const TearsheetContext: import("react").Context<TearsheetContextType>;
+export declare const blockClass: string;
+export {};