@carbon/ibm-products 2.78.0 → 2.79.0

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { createContext } from 'react';
+import { pkg } from '../../../settings.js';
+
+/**
+ * -------------
+ * Context setup
+ * -------------
+ */
+
+const TearsheetContext = /*#__PURE__*/createContext({
+  hasCloseIcon: true,
+  fullyCollapsed: false,
+  disableHeaderCollapse: false,
+  variant: 'wide',
+  isSm: false
+});
+const blockClass = `${pkg.prefix}--tearsheet__next`;
+
+export { TearsheetContext, blockClass };

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

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+export { Tearsheet } from './Tearsheet';
+export type { TearsheetProps, TearsheetComponentType, FooterProps, } from './Tearsheet';
+export type { MainContentProps, SummaryContentProps, TearsheetBodyProps, InfluencerProps, } from './TearsheetBody';
+export type { TearsheetHeaderProps, TearsheetNavigationBarProps, TearsheetScrollButtonProps, } from './TearsheetHeader';
+export type { TearsheetHeaderActionItemProps, TearsheetHeaderActionsProps, } from './TearsheetHeaderActions';
+export type { TearsheetHeaderContentProps } from './TearsheetHeaderContent';

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+
+export { Tearsheet } from './Tearsheet.js';

package/es/components/Toolbar/Toolbar.js

@@ -13,11 +13,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
-const {
-  checkComponentEnabled,
-  prefix
-} = pkg;
-const blockClass = `${prefix}--toolbar`;
+const blockClass = `${pkg.prefix}--toolbar`;
 const ToolbarContext = /*#__PURE__*/createContext({});
 
 /** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */

package/es/components/TruncatedText/TruncatedText.d.ts

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { PopoverAlignment } from '@carbon/react';
-interface TruncatedTextProps {
+export interface TruncatedTextProps {
     /**
      * Specify how the tooltip should align with the content in tooltip variant. Refer to Carbon tooltip docs for additional information.
      */
@@ -44,5 +44,4 @@ interface TruncatedTextProps {
      */
     value?: string;
 }
-export declare let TruncatedText: React.ForwardRefExoticComponent<TruncatedTextProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const TruncatedText: React.ForwardRefExoticComponent<TruncatedTextProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/TruncatedText/TruncatedText.js

@@ -15,7 +15,7 @@ import useTruncatedText from './useTruncatedText.js';
 
 const blockClass = `${pkg.prefix}--truncated-text`;
 const componentName = 'TruncatedText';
-let TruncatedText = /*#__PURE__*/forwardRef((props, ref) => {
+const TruncatedText = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     align = 'top',
     autoAlign = false,
@@ -82,7 +82,6 @@ let TruncatedText = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, getDevtoolsProps(componentName)), truncated ? truncatedBody : valueBody);
 });
-TruncatedText = pkg.checkComponentEnabled(TruncatedText, componentName);
 TruncatedText.displayName = componentName;
 
 export { TruncatedText };

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

@@ -5,3 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { TruncatedText } from './TruncatedText';
+export type { TruncatedTextProps } from './TruncatedText';

package/es/components/index.d.ts

@@ -34,7 +34,6 @@ export * from './StringFormatter';
 export * from './TagOverflow';
 export * from './TagSet';
 export * from './Tearsheet';
-export * from './TruncatedText';
 export * from './UserAvatar';
 export * from './WebTerminal';
 /**
@@ -44,8 +43,10 @@ export * from './WebTerminal';
 export * as preview__Coachmark from './Coachmark/next/Coachmark';
 export * as preview__CoachmarkTagline from './Coachmark/next/Coachmark/CoachmarkTagline';
 export * as preview__CoachmarkBeacon from './Coachmark/next/Coachmark/CoachmarkBeacon';
+export { TruncatedText as preview__TruncatedText, type TruncatedTextProps, } from './TruncatedText';
 export { FeatureFlags as preview__FeatureFlags, useFeatureFlag as preview__useFeatureFlag, useFeatureFlags as preview__useFeatureFlags, } from './FeatureFlags';
 export * as preview__PageHeader from './PageHeader/next';
+export * as preview__Tearsheet from './Tearsheet/next';
 export { BigNumber as previewCandidate__BigNumber, type BigNumberProps, } from './BigNumber';
 export { Coachmark as previewCandidate__Coachmark, BEACON_KIND, COACHMARK_OVERLAY_KIND, COACHMARK_ALIGNMENT, useCoachmark, type CoachmarkProps, } from './Coachmark';
 export { CoachmarkBeacon as previewCandidate__CoachmarkBeacon, type CoachmarkBeaconProps, } from './CoachmarkBeacon';

package/es/global/js/hooks/useCollapsible.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+interface UseCollapsibleHeaderOptions {
+    container: HTMLDivElement | null;
+    triggerCollapse: (collapsed: boolean) => void;
+    disableHeaderCollapse?: boolean;
+}
+/**
+ * Custom hook to manage collapsible header behavior based on scroll and drag gestures.
+ *
+ * This avoids relying solely on scroll events because collapsing the header can
+ * remove scrollable space, preventing further scroll events from firing.
+ */
+export declare function useCollapsible({ container, triggerCollapse, disableHeaderCollapse, }: UseCollapsibleHeaderOptions): void;
+export {};

package/es/global/js/hooks/useCollapsible.js

@@ -0,0 +1,68 @@
+/**
+ * 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 { useEffect } from 'react';
+
+/**
+ * Custom hook to manage collapsible header behavior based on scroll and drag gestures.
+ *
+ * This avoids relying solely on scroll events because collapsing the header can
+ * remove scrollable space, preventing further scroll events from firing.
+ */
+function useCollapsible(_ref) {
+  let {
+    container,
+    triggerCollapse,
+    disableHeaderCollapse = false
+  } = _ref;
+  useEffect(() => {
+    if (!container || disableHeaderCollapse) {
+      return;
+    }
+    let startY = null;
+    let isDragging = false;
+    const onPointerDown = e => {
+      startY = e.clientY;
+      isDragging = true;
+    };
+    const onPointerMove = e => {
+      if (!isDragging || startY === null) {
+        return;
+      }
+      const diffY = startY - e.clientY;
+      if (diffY > 5) {
+        triggerCollapse(true);
+      } else if (diffY < -5) {
+        triggerCollapse(false);
+      }
+    };
+    const onPointerUp = () => {
+      isDragging = false;
+      startY = null;
+      document.body.style.cursor = 'default';
+    };
+    const onWheel = e => {
+      if (e.deltaY > 0) {
+        triggerCollapse(true);
+      } else if (e.deltaY < 0) {
+        triggerCollapse(false);
+      }
+    };
+    container.addEventListener('pointerdown', onPointerDown);
+    container.addEventListener('pointermove', onPointerMove);
+    container.addEventListener('pointerup', onPointerUp);
+    container.addEventListener('wheel', onWheel);
+    return () => {
+      container.removeEventListener('pointerdown', onPointerDown);
+      container.removeEventListener('pointermove', onPointerMove);
+      container.removeEventListener('pointerup', onPointerUp);
+      container.removeEventListener('wheel', onWheel);
+    };
+  }, [container, triggerCollapse, disableHeaderCollapse]);
+}
+
+export { useCollapsible };

package/es/global/js/hooks/useMatchMedia.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+/**
+ * Listens to changes in a media query and returns whether it matches.
+ * @param mediaQuery - The media query to listen to. For example, `(min-width: 600px)`.
+ * @param defaultState - The initial state to return before the media query is evaluated. Defaults to `false`.
+ * @returns Whether the media query matches.
+ */
+export declare const useMatchMedia: (mediaQuery: string, defaultState?: boolean) => boolean;

package/es/global/js/hooks/useMatchMedia.js

@@ -0,0 +1,33 @@
+/**
+ * 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 { useState, useEffect } from 'react';
+
+/**
+ * Listens to changes in a media query and returns whether it matches.
+ * @param mediaQuery - The media query to listen to. For example, `(min-width: 600px)`.
+ * @param defaultState - The initial state to return before the media query is evaluated. Defaults to `false`.
+ * @returns Whether the media query matches.
+ */
+const useMatchMedia = function (mediaQuery) {
+  let defaultState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const [matches, setMatches] = useState(defaultState);
+  useEffect(() => {
+    const listener = event => {
+      setMatches(event.matches);
+    };
+    const mediaQueryList = window.matchMedia(mediaQuery);
+    mediaQueryList.addEventListener('change', listener);
+    setMatches(mediaQueryList.matches);
+    return () => {
+      mediaQueryList.removeEventListener('change', listener);
+    };
+  }, [mediaQuery]);
+  return matches;
+};
+
+export { useMatchMedia };

package/es/index.js

@@ -34,6 +34,7 @@ export { ExpressiveCard } from './components/ExpressiveCard/ExpressiveCard.js';
 export { FullPageError } from './components/FullPageError/FullPageError.js';
 export { ImportModal } from './components/ImportModal/ImportModal.js';
 export { InterstitialScreen } from './components/InterstitialScreen/InterstitialScreen.js';
+export { InterstitialScreenView } from './components/InterstitialScreen/InterstitialScreenView.js';
 export { MultiAddSelect } from './components/MultiAddSelect/MultiAddSelect.js';
 export { NotificationsPanel } from './components/NotificationsPanel/NotificationsPanel.js';
 export { OptionsTile } from './components/OptionsTile/OptionsTile.js';
@@ -48,7 +49,6 @@ export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
 export { TagSet } from './components/TagSet/TagSet.js';
 export { Tearsheet } from './components/Tearsheet/Tearsheet.js';
 export { TearsheetNarrow } from './components/Tearsheet/TearsheetNarrow.js';
-export { TruncatedText } from './components/TruncatedText/TruncatedText.js';
 export { WebTerminal } from './components/WebTerminal/WebTerminal.js';
 export { WebTerminalContentWrapper } from './components/WebTerminal/WebTerminalContentWrapper.js';
 export { WebTerminalProvider, useWebTerminal } from './components/WebTerminal/hooks/index.js';
@@ -58,9 +58,12 @@ import * as index$1 from './components/Coachmark/next/Coachmark/CoachmarkTagline
 export { index$1 as preview__CoachmarkTagline };
 import * as index$2 from './components/Coachmark/next/Coachmark/CoachmarkBeacon/index.js';
 export { index$2 as preview__CoachmarkBeacon };
+export { TruncatedText as preview__TruncatedText } from './components/TruncatedText/TruncatedText.js';
 export { FeatureFlags as preview__FeatureFlags, useFeatureFlag as preview__useFeatureFlag, useFeatureFlags as preview__useFeatureFlags } from './components/FeatureFlags/index.js';
 import * as index$3 from './components/PageHeader/next/index.js';
 export { index$3 as preview__PageHeader };
+import * as index$4 from './components/Tearsheet/next/index.js';
+export { index$4 as preview__Tearsheet };
 export { BigNumber as previewCandidate__BigNumber } from './components/BigNumber/BigNumber.js';
 export { Coachmark as previewCandidate__Coachmark } from './components/Coachmark/Coachmark.js';
 export { BEACON_KIND, COACHMARK_ALIGNMENT, COACHMARK_OVERLAY_KIND } from './components/Coachmark/utils/enums.js';