@carbon/ibm-products 2.35.0 → 2.36.0

package/es/components/Carousel/Carousel.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useCallback, useEffect, useImperativeHandle } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import { CarouselItem } from './CarouselItem.js';
@@ -14,7 +14,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
 var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--carousel");
 var componentName = 'Carousel';
@@ -53,29 +52,31 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$onScroll = _ref.onScroll,
     onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var carouselRef = useRef();
-  var scrollRef = useRef();
+  var carouselRef = useRef(null);
+  var scrollRef = useRef(null);
   // Array of refs used to reference this component's children DOM elements
   var childElementsRef = useRef(Array(React__default.Children.count(children)).fill(useRef(null)));
-  var leftFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left) || fadedEdgeColor;
-  var rightFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right) || fadedEdgeColor;
+  var leftFadedEdgeColor = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
+  var rightFadedEdgeColor = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right : fadedEdgeColor;
 
   // Trigger callbacks to report state of the carousel
   var handleOnScroll = useCallback(function () {
+    var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
+    if (!scrollRef.current) {
+      return;
+    }
+
     // viewport's width
-    var clientWidth = scrollRef.current.clientWidth;
+    var clientWidth = (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.clientWidth;
     // scroll position
-    var scrollLeft = parseInt(scrollRef.current.scrollLeft, 10);
+    var scrollLeft = parseInt("".concat((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollLeft), 10);
     // scrollable width
-    var scrollWidth = scrollRef.current.scrollWidth;
+    var scrollWidth = (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth;
 
     // The maximum scrollLeft achievable is the scrollable width - the viewport width.
     var scrollLeftMax = scrollWidth - clientWidth;
     // if isNaN(scrollLeft / scrollLeftMax), then set to zero
     var scrollPercent = parseFloat((scrollLeft / scrollLeftMax).toFixed(2)) || 0;
-    if (!scrollRef.current) {
-      return;
-    }
 
     // Callback 1: Does the carousel have enough content to enable scrolling?
     onChangeIsScrollable(scrollWidth > clientWidth);
@@ -95,7 +96,8 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   // Get all elements that are visible in the container.
   var getElementsInView = useCallback(function () {
-    var containerRect = scrollRef.current.getBoundingClientRect();
+    var _scrollRef$current4;
+    var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.getBoundingClientRect();
     var inViewElements = childElementsRef.current.filter(function (el) {
       return getElementInView(containerRect, el.getBoundingClientRect());
     });
@@ -104,8 +106,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   // Return container's and children's rect data
   var getContainerAndChildRectData = useCallback(function () {
+    var _scrollRef$current5;
     // Get the rect of the container
-    var containerRect = scrollRef.current.getBoundingClientRect();
+    var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.getBoundingClientRect();
     // Get all child elements that are in view of the container, and return their bounding rects.
     var elementRectsInView = getElementsInView().map(function (el) {
       return el.getBoundingClientRect();
@@ -123,27 +126,37 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     };
   }, [getElementsInView]);
   var handleScrollNext = useCallback(function () {
+    if (!scrollRef.current) {
+      return;
+    }
     var _getContainerAndChild = getContainerAndChildRectData(),
       containerRect = _getContainerAndChild.containerRect,
       visibleWidth = _getContainerAndChild.visibleWidth;
     // Set the scrollValue to the visibleWidth, but if the visibleWidth value is 0, set it to the container's width
-    var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect.width;
+    var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect === null || containerRect === void 0 ? void 0 : containerRect.width;
     // Increment the scrollLeft of the container
     scrollRef.current.scrollLeft += scrollValue;
   }, [getContainerAndChildRectData]);
   var handleScrollPrev = useCallback(function () {
+    var _containerRect$width, _containerRect$left;
+    if (!scrollRef.current) {
+      return;
+    }
     var _getContainerAndChild2 = getContainerAndChildRectData(),
       containerRect = _getContainerAndChild2.containerRect,
       elementRectsInView = _getContainerAndChild2.elementRectsInView,
       visibleWidth = _getContainerAndChild2.visibleWidth;
     // Set the scrollValue to the visibleWidth minus the first child's left value,
     // but if the visibleWidth value is 0, set it to the container's width plus the container's left value
-    var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : containerRect.width + containerRect.left;
+    var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : ((_containerRect$width = containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) !== null && _containerRect$width !== void 0 ? _containerRect$width : 0) + ((_containerRect$left = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _containerRect$left !== void 0 ? _containerRect$left : 0);
 
     // Decrement the scrollLeft of the container
     scrollRef.current.scrollLeft -= scrollValue;
   }, [getContainerAndChildRectData]);
   var handleScrollReset = useCallback(function () {
+    if (!scrollRef.current) {
+      return;
+    }
     // This doesn't trigger "scrollend"...
     scrollRef.current.scrollLeft = 0;
     // ...so trigger a callback manually.
@@ -170,6 +183,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   // On window.resize, reset carousel to zero.
   useEffect(function () {
     var handleWindowResize = function handleWindowResize() {
+      if (!scrollRef.current) {
+        return;
+      }
       scrollRef.current.scrollLeft = 0;
       handleOnScroll();
     };
@@ -185,9 +201,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       handleOnScroll();
     };
     var scrollDiv = scrollRef.current;
-    scrollDiv.addEventListener('scrollend', handleScrollend);
+    scrollDiv === null || scrollDiv === void 0 || scrollDiv.addEventListener('scrollend', handleScrollend);
     return function () {
-      return scrollDiv.removeEventListener('scrollend', handleScrollend);
+      return scrollDiv === null || scrollDiv === void 0 ? void 0 : scrollDiv.removeEventListener('scrollend', handleScrollend);
     };
   }, [handleOnScroll]);
 
@@ -207,9 +223,7 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         passive: false
       });
       return function () {
-        scrollDiv.removeEventListener('wheel', handleWheel, {
-          passive: false
-        });
+        scrollDiv.removeEventListener('wheel', handleWheel);
       };
     }
   }, []);
@@ -305,6 +319,7 @@ Carousel.propTypes = {
    *
    * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
    */
+  /**@ts-ignore*/
   fadedEdgeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     left: PropTypes.string,
     right: PropTypes.string

package/es/components/Carousel/CarouselItem.d.ts

@@ -1,5 +1,22 @@
+/**
+ * Copyright IBM Corp. 2023, 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 React, { ReactNode } from 'react';
+interface CarouselItemProps {
+    /**
+     * Provide the contents of the CarouselItem.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
 /**
  * TODO: A description of the component.
  */
-export const CarouselItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
+export { CarouselItem };

package/es/components/Carousel/CarouselItem.js

@@ -13,7 +13,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
 var _excluded = ["children", "className"];
-
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 

package/es/components/Coachmark/utils/enums.d.ts

@@ -1,23 +1,37 @@
-export namespace BEACON_KIND {
-    let DEFAULT: string;
-}
-export namespace COACHMARK_OVERLAY_KIND {
-    let TOOLTIP: string;
-    let FLOATING: string;
-    let FIXED: string;
-    let STACKED: string;
-}
-export namespace COACHMARK_ALIGNMENT {
-    let BOTTOM: string;
-    let BOTTOM_LEFT: string;
-    let BOTTOM_RIGHT: string;
-    let LEFT: string;
-    let LEFT_TOP: string;
-    let LEFT_BOTTOM: string;
-    let RIGHT: string;
-    let RIGHT_TOP: string;
-    let RIGHT_BOTTOM: string;
-    let TOP: string;
-    let TOP_LEFT: string;
-    let TOP_RIGHT: string;
+/**
+ * Reserved for future expansion, i.e. "RING".
+ */
+export declare enum BEACON_KIND {
+    DEFAULT = "default"
 }
+/**
+ * Describes the style and behavior of a Coachmark.
+ * @param TOOLTIP includes a caret pointing to the animated beacon.
+ * @param FLOATING includes a drag handle across the top.
+ * @param FIXED is fixed to the bottom-right of the viewport.
+ * @param STACKED is fixed to the bottom-right of the viewport, includes links to show more, stackable Coachmarks if included.
+ */
+export declare const COACHMARK_OVERLAY_KIND: {
+    TOOLTIP: string;
+    FLOATING: string;
+    FIXED: string;
+    STACKED: string;
+};
+/**
+ * Where to render the Coachmark relative to its target.
+ * Applies only to Floating and Tooltip Coachmarks.
+ */
+export declare const COACHMARK_ALIGNMENT: {
+    BOTTOM: string;
+    BOTTOM_LEFT: string;
+    BOTTOM_RIGHT: string;
+    LEFT: string;
+    LEFT_TOP: string;
+    LEFT_BOTTOM: string;
+    RIGHT: string;
+    RIGHT_TOP: string;
+    RIGHT_BOTTOM: string;
+    TOP: string;
+    TOP_LEFT: string;
+    TOP_RIGHT: string;
+};

package/es/components/CoachmarkBeacon/CoachmarkBeacon.d.ts

@@ -1,5 +1,29 @@
 /**
- * Use beacon for the target prop of a Coachmark component.
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * 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 let CoachmarkBeacon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { BEACON_KIND } from '../Coachmark';
+interface CoachmarkBeaconProps {
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * What style of beacon.
+     * BEACON_KIND is an exported enum from the Coachmark and can be used for this value.
+     * @see {@link BEACON_KIND}
+     */
+    kind?: BEACON_KIND;
+    /**
+     * The aria label.
+     */
+    label: string;
+}
+/**
+ * Use beacon for the target prop of a Coachmark component.
+ */
+export declare let CoachmarkBeacon: React.ForwardRefExoticComponent<CoachmarkBeaconProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/CoachmarkBeacon/CoachmarkBeacon.js

@@ -22,7 +22,6 @@ var componentName = 'CoachmarkBeacon';
 var defaults = {
   kind: 'default'
 };
-
 /**
  * Use beacon for the target prop of a Coachmark component.
  */
@@ -54,8 +53,7 @@ var CoachmarkBeacon = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     "aria-label": label,
     className: "".concat(blockClass, "__target")
   }), /*#__PURE__*/React__default.createElement("svg", {
-    className: "".concat(blockClass, "__center"),
-    alt: ""
+    className: "".concat(blockClass, "__center")
   }, _circle || (_circle = /*#__PURE__*/React__default.createElement("circle", {
     r: 1,
     cx: 38,

package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.d.ts

@@ -1,7 +1,33 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * 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';
+interface CoachmarkOverlayElementProps {
+    /**
+     * An optional button can be rendered below the description.
+     * This can be a link, button, Coachmark button, etc.
+     */
+    button?: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * The description of the Coachmark.
+     */
+    description: ReactNode;
+    /**
+     * The title of the Coachmark.
+     */
+    title: string;
+}
 /**
  * Component to be displayed within a CoachmarkOverlayElements container.
  * Can be used 1 to N number, to display content in a Coachmark's overlay
  * in a carousel fashion.
  */
-export let CoachmarkOverlayElement: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkOverlayElement: React.ForwardRefExoticComponent<CoachmarkOverlayElementProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js

@@ -17,7 +17,6 @@ var _excluded = ["button", "className", "description", "title"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--coachmark-overlay-element");
 var componentName = 'CoachmarkOverlayElement';
-
 /**
  * Component to be displayed within a CoachmarkOverlayElements container.
  * Can be used 1 to N number, to display content in a Coachmark's overlay

package/es/components/ConditionBuilder/assets/sampleInput.d.ts

@@ -2,7 +2,7 @@ export declare const inputData: {
     properties: ({
         id: string;
         label: string;
-        icon: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType;
+        icon: import("@carbon/react/icons").CarbonIconType;
         type: string;
         config: {
             options: {
@@ -17,13 +17,13 @@ export declare const inputData: {
     } | {
         id: string;
         label: string;
-        icon: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType;
+        icon: import("@carbon/react/icons").CarbonIconType;
         type: string;
         config: {
             options: {
                 label: string;
                 id: string;
-                icon: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType;
+                icon: import("@carbon/react/icons").CarbonIconType;
             }[];
             includeSearch: boolean;
             min?: undefined;
@@ -33,7 +33,7 @@ export declare const inputData: {
     } | {
         id: string;
         label: string;
-        icon: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType;
+        icon: import("@carbon/react/icons").CarbonIconType;
         type: string;
         config: {
             options?: undefined;
@@ -45,7 +45,7 @@ export declare const inputData: {
     } | {
         id: string;
         label: string;
-        icon: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType;
+        icon: import("@carbon/react/icons").CarbonIconType;
         type: string;
         config: {
             min: number;

package/es/components/CreateFullPage/CreateFullPage.d.ts

@@ -1,5 +1,122 @@
-export const StepsContext: React.Context<null>;
-export const StepNumberContext: React.Context<number>;
+/**
+ * Copyright IBM Corp. 2021, 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 React, { ReactNode } from 'react';
+export declare const StepsContext: React.Context<null>;
+export declare const StepNumberContext: React.Context<number>;
+interface HeaderBreadcrumbs {
+    /** breadcrumb item key */
+    key: string;
+    /** breadcrumb item label */
+    label: string;
+    /** breadcrumb item link */
+    href?: string;
+    /** breadcrumb item title tooltip */
+    title?: string;
+    /** Provide if this breadcrumb item represents the current page */
+    isCurrentPage?: boolean;
+}
+type CreateFullPageBreadcrumbsProps = {
+    /** The header breadcrumbs */
+    breadcrumbs?: null | undefined;
+    /**
+     * Label for open/close overflow button used for breadcrumb items that do not fit
+     */
+    breadcrumbsOverflowAriaLabel?: never;
+} | {
+    /** The header breadcrumbs */
+    breadcrumbs: HeaderBreadcrumbs;
+    /**
+     * Label for open/close overflow button used for breadcrumb items that do not fit
+     */
+    breadcrumbsOverflowAriaLabel: string;
+};
+type CreateFullPageBaseProps = {
+    /**
+     * The back button text
+     */
+    backButtonText?: string;
+    /**
+     * The cancel button text
+     */
+    cancelButtonText: string;
+    /**
+     * The main content of the full page
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Specifies elements to focus on first on render.
+     */
+    firstFocusElement?: string;
+    /**
+     * This can be used to open the component to a step other than the first step.
+     * For example, a create flow was previously in progress, data was saved, and
+     * is now being completed.
+     */
+    initialStep?: number;
+    /**	Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
+    maxVisibleBreadcrumbs?: number;
+    /**
+     * The primary 'danger' button text in the modal
+     */
+    modalDangerButtonText: string;
+    /**
+     * The description located below the title in the modal
+     */
+    modalDescription?: string;
+    /**
+     * The secondary button text in the modal
+     */
+    modalSecondaryButtonText: string;
+    /**
+     * The title located in the header of the modal
+     */
+    modalTitle: string;
+    /**
+     * The next button text
+     */
+    nextButtonText: string;
+    /**
+     * A prop to omit the trailing slash for the breadcrumbs
+     */
+    noTrailingSlash?: boolean;
+    /**
+     * An optional handler that is called when the user closes the full page (by
+     * clicking the secondary button, located in the modal, which triggers after
+     * clicking the ghost button in the modal
+     */
+    onClose?: () => void;
+    /**
+     * Specify a handler for submitting the multi step full page (final step).
+     * This function can _optionally_ return a promise that is either resolved or rejected and the CreateFullPage will handle the submitting state of the create button.
+     */
+    onRequestSubmit: () => void;
+    /**
+     * A secondary title of the full page, displayed in the influencer area
+     */
+    secondaryTitle?: string;
+    /**
+     * @ignore
+     * The aria label to be used for the UI Shell SideNav Carbon component
+     */
+    sideNavAriaLabel?: string;
+    /**
+     * The submit button text
+     */
+    submitButtonText: string;
+    /**
+     * The main title of the full page, displayed in the header area
+     */
+    title?: string;
+};
+type CreateFullPageProps = CreateFullPageBaseProps & CreateFullPageBreadcrumbsProps;
 /**
  * Use with creations that must be completed in order for a service to be usable.
  *
@@ -12,5 +129,5 @@ on the Carbon's grid system
 include `<Row>` and `<Column>` components inside of each `CreateFullPageStep`
 component to get the desired affect.
  */
-export let CreateFullPage: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CreateFullPage: React.ForwardRefExoticComponent<CreateFullPageProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/CreateFullPage/CreateFullPage.js

@@ -35,7 +35,6 @@ var StepsContext = /*#__PURE__*/createContext(null);
 // This is a context supplied separately to each step in the container
 // to let it know what number it is in the sequence of steps
 var StepNumberContext = /*#__PURE__*/createContext(-1);
-
 /**
  * Use with creations that must be completed in order for a service to be usable.
  *
@@ -114,7 +113,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState20 = _slicedToArray(_useState19, 2),
     firstIncludedStep = _useState20[0],
     setFirstIncludedStep = _useState20[1];
-  var _useState21 = useState(null),
+  var _useState21 = useState(),
     _useState22 = _slicedToArray(_useState21, 2),
     lastIncludedStep = _useState22[0],
     setLastIncludedStep = _useState22[1];
@@ -129,11 +128,13 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     if (lastItem !== lastIncludedStep) {
       setLastIncludedStep(lastItem);
     }
+
+    /**@ts-ignore */
     if (open && initialStep) {
       var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
-  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep]);
+  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, modalIsOpen]);
   useCreateComponentFocus({
     previousState: previousState,
     currentStep: currentStep,
@@ -145,9 +146,11 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   useResetCreateComponent({
     firstIncludedStep: firstIncludedStep,
     previousState: previousState,
+    /**@ts-ignore */
     open: open,
     setCurrentStep: setCurrentStep,
     stepData: stepData,
+    /**@ts-ignore */
     initialStep: initialStep,
     totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
     componentName: componentName
@@ -160,6 +163,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     isSubmitDisabled: isDisabled,
     setCurrentStep: setCurrentStep,
     setIsSubmitting: setIsSubmitting,
+    /**@ts-ignore */
     setShouldViewAll: setShouldViewAll,
     onClose: onClose,
     onRequestSubmit: onRequestSubmit,
@@ -180,15 +184,14 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     ref: ref,
     className: cx(blockClass, className)
-  }, getDevtoolsProps(componentName)), (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__header")
-  }, /*#__PURE__*/React__default.createElement(SimpleHeader, {
+  }, getDevtoolsProps(componentName)), (title || breadcrumbs) && /*#__PURE__*/React__default.createElement(SimpleHeader, {
     title: title,
     breadcrumbs: breadcrumbs,
     noTrailingSlash: noTrailingSlash,
     overflowAriaLabel: breadcrumbsOverflowAriaLabel,
-    maxVisible: maxVisibleBreadcrumbs
-  })), /*#__PURE__*/React__default.createElement("div", {
+    maxVisible: maxVisibleBreadcrumbs,
+    className: "".concat(blockClass, "__header")
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__influencer-and-body-container")
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__influencer")
@@ -271,6 +274,7 @@ CreateFullPage.propTypes = {
    */
   backButtonText: PropTypes.string.isRequired,
   /** The header breadcrumbs */
+  /**@ts-ignore */
   breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
     /** breadcrumb item key */
     key: PropTypes.string.isRequired,

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -129,6 +129,8 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (open && initialStep) {
       var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
+    } else {
+      setCurrentStep(firstIncludedStep);
     }
   }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, open]);
   useCreateComponentFocus({

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -135,14 +135,15 @@ var DatagridRow = function DatagridRow(datagridState) {
   })) : /*#__PURE__*/React__default.createElement("td", {
     className: "".concat(blockClass, "__table-row-ai-spacer")
   }) : null, row.cells.map(function (cell, index) {
-    var _cell$column, _content$props, _associatedHeader$;
+    var _cell$column, _cell$column2, _content$props, _associatedHeader$;
     var cellProps = cell.getCellProps();
     // eslint-disable-next-line no-unused-vars
     var children = cellProps.children;
       cellProps.role;
       var restProps = _objectWithoutProperties(cellProps, _excluded2);
+    var columnClassname = cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.className;
     var content = children || /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && (_SkeletonText || (_SkeletonText = /*#__PURE__*/React__default.createElement(SkeletonText, null))));
-    if ((cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.id) === selectionColumnId) {
+    if ((cell === null || cell === void 0 || (_cell$column2 = cell.column) === null || _cell$column2 === void 0 ? void 0 : _cell$column2.id) === selectionColumnId) {
       // directly render component without the wrapping TableCell
       return cell.render('Cell', {
         key: cell.column.id
@@ -153,7 +154,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       return h.id === cell.column.id;
     });
     return /*#__PURE__*/React__default.createElement(TableCell, _extends({
-      className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)))
+      className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
     }, restProps, {
       key: cell.column.id,
       title: title

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

@@ -166,9 +166,10 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
     var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colHeaderTitle;
     var isFrozenColumn = !!colDef.sticky;
+    var isDisabled = colDef.disabled;
     var listContents = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: isColumnVisible(colDef),
-      disabled: isFrozenColumn,
+      disabled: isDisabled || isFrozenColumn,
       onChange: function onChange(_, _ref2) {
         var checked = _ref2.checked;
         return onSelectColumn(colDef, checked);