@carbon/ibm-products 2.64.0 → 2.65.0-rc.0

package/lib/components/CoachmarkStack/CoachmarkStackHome.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
+type TooltipAlignment = 'top' | 'bottom';
 interface CoachmarkStackHomeProps {
     /**
      * Optional class name for this component.
@@ -53,6 +54,10 @@ interface CoachmarkStackHomeProps {
      * The title of the Coachmark.
      */
     title: string;
+    /**
+     * Label's tooltip position
+     */
+    tooltipAlign?: TooltipAlignment;
 }
 /**
  * DO NOT USE. This component is for the exclusive use

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -20,7 +20,7 @@ var reactDom = require('react-dom');
 var CoachmarkHeader = require('../Coachmark/CoachmarkHeader.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["className", "description", "isOpen", "renderMedia", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
+var _excluded = ["className", "description", "isOpen", "renderMedia", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title", "tooltipAlign"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -44,12 +44,18 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     portalTarget = _ref.portalTarget,
     closeButtonLabel = _ref.closeButtonLabel,
     title = _ref.title,
+    tooltipAlign = _ref.tooltipAlign,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var buttonFocusRef = React.useRef(null);
   var _useState = React.useState(0),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     linkFocusIndex = _useState2[0],
     setLinkFocusIndex = _useState2[1];
+  var navItemRefs = React.useRef([]);
+  var _useState3 = React.useState([]),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    overflowStates = _useState4[0],
+    setOverflowStates = _useState4[1];
   React.useEffect(function () {
     setTimeout(function () {
       if (isOpen && buttonFocusRef.current) {
@@ -65,10 +71,26 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   if (!navLinkLabels) {
     return pconsole.default.warn("".concat(componentName, " is an Onboarding internal component and is not intended for general use."));
   }
+  var itemRefHandler = function itemRefHandler(index, node) {
+    if (node && navItemRefs.current[index] !== node) {
+      var isOverflowing = node.scrollWidth > node.clientWidth;
+      navItemRefs.current[index] = node;
+      setOverflowStates(function (prev) {
+        var newState = _rollupPluginBabelHelpers.toConsumableArray(prev);
+        newState[index] = isOverflowing;
+        return newState;
+      });
+    }
+  };
   function renderNavLink(index, label) {
+    var _overflowStates$index;
     var ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var isOverflowing = (_overflowStates$index = overflowStates[index]) !== null && _overflowStates$index !== void 0 ? _overflowStates$index : false;
     return /*#__PURE__*/React.createElement("li", {
-      key: index
+      key: index,
+      ref: function ref(node) {
+        itemRefHandler(index, node);
+      }
     }, /*#__PURE__*/React.createElement(react.Button, {
       kind: "ghost",
       size: "sm",
@@ -77,7 +99,14 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
         onClickNavItem(index + 1);
       },
       ref: ref
-    }, label));
+    }, isOverflowing ? /*#__PURE__*/React.createElement(react.Tooltip, {
+      highContrast: false,
+      label: label,
+      align: tooltipAlign,
+      className: "".concat(blockClass, "__navLinkLabels-tooltip")
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(blockClass, "__navLinkLabels-text")
+    }, label)) : label));
   }
   return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
@@ -179,5 +208,9 @@ exports.CoachmarkStackHome.propTypes = {
   /**
    * The title of the Coachmark.
    */
-  title: index.default.string.isRequired
+  title: index.default.string.isRequired,
+  /**
+   * Label's tooltip position
+   */
+  tooltipAlign: index.default.oneOf(['top', 'bottom'])
 };

package/lib/components/CreateFullPage/CreateFullPage.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2023
+ * Copyright IBM Corp. 2021, 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.

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -21,7 +21,6 @@ var settings = require('../../settings.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useCreateComponentFocus = require('../../global/js/hooks/useCreateComponentFocus.js');
 var useValidCreateStepCount = require('../../global/js/hooks/useValidCreateStepCount.js');
-var useResetCreateComponent = require('../../global/js/hooks/useResetCreateComponent.js');
 var useCreateComponentStepChange = require('../../global/js/hooks/useCreateComponentStepChange.js');
 var CreateInfluencer = require('../CreateInfluencer/CreateInfluencer.js');
 
@@ -95,8 +94,7 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     modalIsOpen = _useState10[0],
     setModalIsOpen = _useState10[1];
   var previousState = usePreviousValue.usePreviousValue({
-    currentStep: currentStep,
-    open: open
+    currentStep: currentStep
   });
   var _useState11 = React.useState(false),
     _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
@@ -126,6 +124,7 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
     lastIncludedStep = _useState24[0],
     setLastIncludedStep = _useState24[1];
+  var invalidInitialStepWarned = React.useRef(false);
   React.useEffect(function () {
     var firstItem = stepData.findIndex(function (item) {
       return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
@@ -139,11 +138,18 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
 
     /**@ts-ignore */
-    if (open && initialStep) {
+    if (initialStep) {
       var numberOfHiddenSteps = getNumberOfHiddenSteps.getNumberOfHiddenSteps(stepData, initialStep);
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
   }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, modalIsOpen]);
+  React.useEffect(function () {
+    if (!(invalidInitialStepWarned !== null && invalidInitialStepWarned !== void 0 && invalidInitialStepWarned.current)) {
+      checkForValidInitialStep();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialStep, stepData]);
   useCreateComponentFocus.useCreateComponentFocus({
     previousState: previousState,
     currentStep: currentStep,
@@ -152,17 +158,6 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     firstFocusElement: firstFocusElement
   });
   useValidCreateStepCount.useValidCreateStepCount(stepData.length, componentName);
-  useResetCreateComponent.useResetCreateComponent({
-    firstIncludedStep: firstIncludedStep,
-    previousState: previousState,
-    open: true,
-    setCurrentStep: setCurrentStep,
-    stepData: stepData,
-    /**@ts-ignore */
-    initialStep: initialStep,
-    totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
-    componentName: componentName
-  });
   useCreateComponentStepChange.useCreateComponentStepChange({
     firstIncludedStep: firstIncludedStep,
     lastIncludedStep: lastIncludedStep,
@@ -185,6 +180,15 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setCreateComponentActions: setCreateFullPageActions,
     setModalIsOpen: setModalIsOpen
   });
+  var checkForValidInitialStep = function checkForValidInitialStep() {
+    // An invalid initialStep value was provided, we'll default to rendering the first step or last step
+
+    if (initialStep && stepData !== null && stepData !== void 0 && stepData.length && Number(initialStep) > Number(stepData === null || stepData === void 0 ? void 0 : stepData.length) || Number(initialStep) <= 0) {
+      invalidInitialStepWarned.current = true;
+      setCurrentStep(1);
+      console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
+    }
+  };
   // currently, we are not supporting the use of 'view all' toggle state
   /* istanbul ignore next */
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
@@ -238,9 +242,10 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setStepData: setStepData,
       stepData: stepData
     }
-  }, React.Children.map(children, function (child, index) {
+  }, React.Children.toArray(children).filter(Boolean).map(function (child, index) {
     return /*#__PURE__*/React.createElement(StepNumberContext.Provider, {
-      value: index + 1
+      value: index + 1,
+      key: index
     }, child);
   })))), /*#__PURE__*/React.createElement(ActionSet.ActionSet, {
     className: "".concat(blockClass, "__buttons"),

package/lib/components/Datagrid/Datagrid/DraggableElement.d.ts

@@ -11,16 +11,18 @@ interface DraggableElementProps extends PropsWithChildren {
     classList?: string;
     disabled?: boolean;
     id: string;
+    elementId?: string;
     isSticky?: boolean;
     selected?: boolean;
 }
 declare const DraggableElement: {
-    ({ id, children, classList, disabled, ariaLabel, isSticky, selected, }: DraggableElementProps): React.JSX.Element;
+    ({ id, elementId, children, classList, disabled, ariaLabel, isSticky, selected, }: DraggableElementProps): React.JSX.Element;
     propTypes: {
         ariaLabel: any;
         children: any;
         classList: any;
         disabled: any;
+        elementId: any;
         id: any;
         isSticky: any;
         selected: any;

package/lib/components/Datagrid/Datagrid/DraggableElement.js

@@ -22,6 +22,7 @@ var _Locked, _DraggableIcon;
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var DraggableElement = function DraggableElement(_ref) {
   var id = _ref.id,
+    elementId = _ref.elementId,
     children = _ref.children,
     classList = _ref.classList,
     disabled = _ref.disabled,
@@ -53,7 +54,7 @@ var DraggableElement = function DraggableElement(_ref) {
   };
   return /*#__PURE__*/React.createElement("li", _rollupPluginBabelHelpers.extends({
     className: cx(classList, "".concat(blockClass, "__draggable-handleHolder"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging)),
-    id: id,
+    id: elementId ? elementId : id,
     ref: setNodeRef,
     style: style
   }, attributes, listeners, {
@@ -71,6 +72,7 @@ DraggableElement.propTypes = {
   children: index.default.element.isRequired,
   classList: index.default.string,
   disabled: index.default.bool,
+  elementId: index.default.string,
   id: index.default.string.isRequired,
   isSticky: index.default.bool,
   selected: index.default.bool

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -12,6 +12,7 @@ var React = require('react');
 var index = require('../../../../../_virtual/index.js');
 var react = require('@carbon/react');
 var common = require('./common.js');
+var useId = require('../../../../../global/js/utils/useId.js');
 var DraggableElement = require('../../DraggableElement.js');
 var settings = require('../../../../../settings.js');
 var getNodeTextContent = require('../../../../../global/js/utils/getNodeTextContent.js');
@@ -31,6 +32,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     onSelectColumn = _ref.onSelectColumn,
     setAriaRegionText = _ref.setAriaRegionText;
   var draggableClass = "".concat(blockClass, "__draggable-item");
+  var generatedId = useId.useId();
   var visibleCols = columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
@@ -194,6 +196,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
       classList: draggableClass,
       key: colDef.id,
       id: colDef.id,
+      elementId: "".concat(colDef.id, "-").concat(generatedId),
       disabled: filterString.length > 0 || isFrozenColumn,
       ariaLabel: colHeaderTitle,
       isSticky: isFrozenColumn,

package/lib/components/InlineTip/InlineTip.js

@@ -84,7 +84,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   React.useEffect(function () {
     setIsCollapsed(collapsible);
   }, [collapsible]);
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+  return /*#__PURE__*/React.createElement(react.Section, _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-labelledby": labelId,
     className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), renderMedia && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
     ref: ref,
@@ -106,7 +106,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: 16
   }))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content")
-  }, /*#__PURE__*/React.createElement("h6", {
+  }, /*#__PURE__*/React.createElement(react.Heading, {
     id: labelId,
     className: "".concat(blockClass, "__title")
   }, title), /*#__PURE__*/React.createElement("section", {

package/lib/components/InterstitialScreen/InterstitialScreen.d.ts

@@ -1,15 +1,15 @@
 /**
- * Copyright IBM Corp. 2024, 2024
+ * Copyright IBM Corp. 2024, 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, { PropsWithChildren, ReactNode } from 'react';
-type BreakpointsWithMedia = {
-    xlg?: number;
-    lg?: number;
-};
-export interface InterstitialScreenProps extends PropsWithChildren {
+import React, { ReactNode, RefObject } from 'react';
+import { InterstitialScreenHeaderProps } from './InterstitialScreenHeader';
+import { InterstitialScreenBodyProps } from './InterstitialScreenBody';
+import { InterstitialScreenFooterProps } from './InterstitialScreenFooter';
+export type ActionType = 'close' | 'start' | 'skip' | 'back' | 'next';
+export interface InterstitialScreenProps {
     /**
      * Provide the contents of the InterstitialScreen.
      */
@@ -18,26 +18,6 @@ export interface InterstitialScreenProps extends PropsWithChildren {
      * Provide an optional class to be applied to the containing node.
      */
     className?: string;
-    /**
-     * Tooltip text and aria label for the Close button icon.
-     */
-    closeIconDescription?: string;
-    /**
-     * The domain this app belongs to, e.g. "IBM Cloud Pak".
-     */
-    domainName?: string;
-    /**
-     * Provide an optional class to be applied to the <header> element >.
-     */
-    headerClassName?: string;
-    /**
-     * Provide an optional class to be applied to the <header> element >.
-     */
-    headerTitle?: string;
-    /**
-     * Optional parameter to hide the progress indicator when multiple steps are used.
-     */
-    hideProgressIndicator?: boolean;
     /**
      * The aria label applied to the Interstitial Screen component
      */
@@ -51,46 +31,43 @@ export interface InterstitialScreenProps extends PropsWithChildren {
      * Specifies whether the component is currently open.
      */
     isOpen?: boolean;
-    /**
-     * Optional prop to render any media like images or any animated media.
-     */
-    renderMedia?: (params: any) => ReactNode;
-    /**
-     * optional prop to specify breakpoints when media is rendered through renderMedia
-     * Breakpoints are used to set the media content column size as well as the remainder for the main content areas column size.
-     * Medium and small breakpoints will be set to 0 internally to focus on the main content area.
-     */
-    breakpointsWithMedia?: BreakpointsWithMedia;
-    /**
-     * The label for the Next button.
-     */
-    nextButtonLabel?: string;
     /**
      * Function to call when the close button is clicked.
      */
-    onClose?: () => void;
-    /**
-     * The label for the Previous button.
-     */
-    previousButtonLabel?: string;
-    /**
-     * The name of this app, e.g. "QRadar".
-     */
-    productName?: string;
-    /**
-     * The label for the skip button.
-     */
-    skipButtonLabel?: string;
-    /**
-     * The label for the start button.
-     */
-    startButtonLabel?: string;
+    onClose?: (value: ActionType) => void;
+}
+type InterstitialScreenComponent = React.ForwardRefExoticComponent<InterstitialScreenProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.FC<InterstitialScreenHeaderProps>;
+    Body: React.FC<InterstitialScreenBodyProps>;
+    Footer: React.FC<InterstitialScreenFooterProps>;
+};
+export type disableButtonConfigType = {
+    skip?: boolean;
+    back?: boolean;
+    next?: boolean;
+    start?: boolean;
+};
+interface InterstitialScreenContextType {
+    bodyChildrenData?: ReactNode;
+    setBodyChildrenData?: (value: ReactNode) => void;
+    isFullScreen?: boolean;
+    handleClose?: (value: ActionType) => void;
+    progStep: number;
+    setProgStep?: (value: number) => void;
+    bodyScrollRef?: RefObject<HTMLDivElement | null>;
+    scrollRef?: RefObject<HTMLDivElement>;
+    handleGotoStep?: (value: number) => void;
+    stepCount: number;
+    setStepCount?: (value: number) => void;
+    disableButtonConfig?: disableButtonConfigType;
+    setDisableButtonConfig?: (value: disableButtonConfigType) => void;
 }
+export declare const InterstitialScreenContext: React.Context<InterstitialScreenContextType>;
 /**
  * InterstitialScreen can be a full page or an overlay, and are
  * shown on the first time a user accesses a new experience
  * (e.g. upon first login or first time opening a page where a
  * newly purchased capability is presented).
  */
-export declare let InterstitialScreen: React.ForwardRefExoticComponent<InterstitialScreenProps & React.RefAttributes<HTMLDivElement>>;
+export declare let InterstitialScreen: InterstitialScreenComponent;
 export {};