@carbon/ibm-products 2.78.0 → 2.79.0-rc.0

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

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

package/lib/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/lib/components/Tearsheet/next/index.js

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var Tearsheet = require('./Tearsheet.js');
+
+
+
+exports.Tearsheet = Tearsheet.Tearsheet;

package/lib/components/Toolbar/Toolbar.js

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

package/lib/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/lib/components/TruncatedText/TruncatedText.js

@@ -17,7 +17,7 @@ var useTruncatedText = require('./useTruncatedText.js');
 
 const blockClass = `${settings.pkg.prefix}--truncated-text`;
 const componentName = 'TruncatedText';
-exports.TruncatedText = /*#__PURE__*/React.forwardRef((props, ref) => {
+const TruncatedText = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     align = 'top',
     autoAlign = false,
@@ -84,5 +84,6 @@ exports.TruncatedText = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), truncated ? truncatedBody : valueBody);
 });
-exports.TruncatedText = settings.pkg.checkComponentEnabled(exports.TruncatedText, componentName);
-exports.TruncatedText.displayName = componentName;
+TruncatedText.displayName = componentName;
+
+exports.TruncatedText = TruncatedText;

package/lib/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/lib/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/lib/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/lib/global/js/hooks/useCollapsible.js

@@ -0,0 +1,70 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var React = require('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;
+  React.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]);
+}
+
+exports.useCollapsible = useCollapsible;

package/lib/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/lib/global/js/hooks/useMatchMedia.js

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var React = require('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] = React.useState(defaultState);
+  React.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;
+};
+
+exports.useMatchMedia = useMatchMedia;

package/lib/index.js

@@ -36,6 +36,7 @@ var ExpressiveCard = require('./components/ExpressiveCard/ExpressiveCard.js');
 var FullPageError = require('./components/FullPageError/FullPageError.js');
 var ImportModal = require('./components/ImportModal/ImportModal.js');
 var InterstitialScreen = require('./components/InterstitialScreen/InterstitialScreen.js');
+var InterstitialScreenView = require('./components/InterstitialScreen/InterstitialScreenView.js');
 var MultiAddSelect = require('./components/MultiAddSelect/MultiAddSelect.js');
 var NotificationsPanel = require('./components/NotificationsPanel/NotificationsPanel.js');
 var OptionsTile = require('./components/OptionsTile/OptionsTile.js');
@@ -50,15 +51,16 @@ var TagOverflow = require('./components/TagOverflow/TagOverflow.js');
 var TagSet = require('./components/TagSet/TagSet.js');
 var Tearsheet = require('./components/Tearsheet/Tearsheet.js');
 var TearsheetNarrow = require('./components/Tearsheet/TearsheetNarrow.js');
-var TruncatedText = require('./components/TruncatedText/TruncatedText.js');
 var WebTerminal = require('./components/WebTerminal/WebTerminal.js');
 var WebTerminalContentWrapper = require('./components/WebTerminal/WebTerminalContentWrapper.js');
-var index$5 = require('./components/WebTerminal/hooks/index.js');
+var index$6 = require('./components/WebTerminal/hooks/index.js');
 var index = require('./components/Coachmark/next/Coachmark/index.js');
 var index$1 = require('./components/Coachmark/next/Coachmark/CoachmarkTagline/index.js');
 var index$2 = require('./components/Coachmark/next/Coachmark/CoachmarkBeacon/index.js');
-var index$4 = require('./components/FeatureFlags/index.js');
+var TruncatedText = require('./components/TruncatedText/TruncatedText.js');
+var index$5 = require('./components/FeatureFlags/index.js');
 var index$3 = require('./components/PageHeader/next/index.js');
+var index$4 = require('./components/Tearsheet/next/index.js');
 var BigNumber = require('./components/BigNumber/BigNumber.js');
 var Coachmark = require('./components/Coachmark/Coachmark.js');
 var enums = require('./components/Coachmark/utils/enums.js');
@@ -87,7 +89,7 @@ var ToolbarButton = require('./components/Toolbar/ToolbarButton.js');
 var ToolbarGroup = require('./components/Toolbar/ToolbarGroup.js');
 var TruncatedList = require('./components/TruncatedList/TruncatedList.js');
 var ComboButton = require('./components/ComboButton/ComboButton.js');
-var index$6 = require('./components/ComboButton/ComboButtonItem/index.js');
+var index$7 = require('./components/ComboButton/ComboButtonItem/index.js');
 var Datagrid = require('./components/Datagrid/Datagrid/Datagrid.js');
 var useDatagrid = require('./components/Datagrid/useDatagrid.js');
 var useInfiniteScroll = require('./components/Datagrid/useInfiniteScroll.js');
@@ -177,6 +179,7 @@ exports.ExpressiveCard = ExpressiveCard.ExpressiveCard;
 exports.FullPageError = FullPageError.FullPageError;
 exports.ImportModal = ImportModal.ImportModal;
 exports.InterstitialScreen = InterstitialScreen.InterstitialScreen;
+exports.InterstitialScreenView = InterstitialScreenView.InterstitialScreenView;
 exports.MultiAddSelect = MultiAddSelect.MultiAddSelect;
 exports.NotificationsPanel = NotificationsPanel.NotificationsPanel;
 exports.OptionsTile = OptionsTile.OptionsTile;
@@ -191,21 +194,19 @@ exports.TagOverflow = TagOverflow.TagOverflow;
 exports.TagSet = TagSet.TagSet;
 exports.Tearsheet = Tearsheet.Tearsheet;
 exports.TearsheetNarrow = TearsheetNarrow.TearsheetNarrow;
-Object.defineProperty(exports, "TruncatedText", {
-	enumerable: true,
-	get: function () { return TruncatedText.TruncatedText; }
-});
 exports.WebTerminal = WebTerminal.WebTerminal;
 exports.WebTerminalContentWrapper = WebTerminalContentWrapper.WebTerminalContentWrapper;
-exports.WebTerminalProvider = index$5.WebTerminalProvider;
-exports.useWebTerminal = index$5.useWebTerminal;
+exports.WebTerminalProvider = index$6.WebTerminalProvider;
+exports.useWebTerminal = index$6.useWebTerminal;
 exports.preview__Coachmark = index;
 exports.preview__CoachmarkTagline = index$1;
 exports.preview__CoachmarkBeacon = index$2;
-exports.preview__FeatureFlags = index$4.FeatureFlags;
-exports.preview__useFeatureFlag = index$4.useFeatureFlag;
-exports.preview__useFeatureFlags = index$4.useFeatureFlags;
+exports.preview__TruncatedText = TruncatedText.TruncatedText;
+exports.preview__FeatureFlags = index$5.FeatureFlags;
+exports.preview__useFeatureFlag = index$5.useFeatureFlag;
+exports.preview__useFeatureFlags = index$5.useFeatureFlags;
 exports.preview__PageHeader = index$3;
+exports.preview__Tearsheet = index$4;
 exports.previewCandidate__BigNumber = BigNumber.BigNumber;
 exports.previewCandidate__Coachmark = Coachmark.Coachmark;
 exports.BEACON_KIND = enums.BEACON_KIND;
@@ -235,7 +236,7 @@ exports.previewCandidate__ToolbarButton = ToolbarButton.ToolbarButton;
 exports.previewCandidate__ToolbarGroup = ToolbarGroup.ToolbarGroup;
 exports.previewCandidate__TruncatedList = TruncatedList.TruncatedList;
 exports.ComboButton = ComboButton.ComboButton;
-exports.ComboButtonItem = index$6.ComboButtonItem;
+exports.ComboButtonItem = index$7.ComboButtonItem;
 exports.Datagrid = Datagrid.Datagrid;
 exports.useDatagrid = useDatagrid.default;
 exports.useInfiniteScroll = useInfiniteScroll.default;