@carbon/ibm-products 2.34.0 → 2.36.0-alpha.27

package/lib/components/ImportModal/ImportModal.js

@@ -85,6 +85,7 @@ exports.ImportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var updateFiles = function updateFiles(newFiles) {
     var updatedFiles = newFiles.map(function (file) {
+      var _newFile$fileSize;
       var newFile = {
         uuid: file.uuid || uuidv4["default"](),
         status: 'edit',
@@ -103,7 +104,7 @@ exports.ImportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         newFile.errorBody = invalidFileTypeErrorBody || defaultErrorBody;
         newFile.errorSubject = invalidFileTypeErrorHeader || defaultErrorHeader;
         newFile.invalid = true;
-      } else if (maxFileSize && newFile.fileSize > maxFileSize) {
+      } else if (maxFileSize && ((_newFile$fileSize = newFile === null || newFile === void 0 ? void 0 : newFile.fileSize) !== null && _newFile$fileSize !== void 0 ? _newFile$fileSize : 0) > maxFileSize) {
         newFile.errorBody = maxFileSizeErrorBody || defaultErrorBody;
         newFile.errorSubject = maxFileSizeErrorHeader || defaultErrorHeader;
         newFile.invalid = true;
@@ -136,7 +137,7 @@ exports.ImportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               _context.next = 10;
               break;
             }
-            throw new Error(response.status);
+            throw new Error("".concat(response.status));
           case 10:
             _context.next = 12;
             return response.blob();

package/lib/components/InlineTip/InlineTip.d.ts

@@ -1,7 +1,95 @@
+/**
+ * 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';
+type MediaType = {
+    render?: () => ReactNode;
+    filePaths?: string[];
+};
+interface InlineTipProps {
+    /**
+     * Optional "call to action" ghost button or link that can appear
+     * directly below the content. This component comes with pre-styled
+     * elements available to use: `InlineTipLink` and `InlineTipButton`.
+     */
+    action?: ReactNode;
+    /**
+     * Provide the contents of the InlineTip.
+     */
+    children: ReactNode;
+    /**
+     * 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 label for the collapse button.
+     * This button is not visible if `media` is specified.
+     */
+    collapseButtonLabel?: string;
+    /**
+     * If set to `true`, it will truncate the body text to
+     * one line and expose an expand/collapse button toggle.
+     *
+     * This feature is disabled if `media` is specified.
+     */
+    collapsible?: boolean;
+    /**
+     * The label for the expand button.
+     * This button is not visible if `media` is specified.
+     */
+    expandButtonLabel?: string;
+    /**
+     * The object describing an image in one of two shapes.
+     * - If a single media element is required, use `{render}`.
+     * - If a stepped animation is required, use `{filePaths}`.
+     *
+     * Enabling `media` disables the `collapsible` feature.
+     */
+    media: MediaType;
+    /**
+     * Set to `true` to arrange the information in a format
+     * that is easier to read in a limited space.
+     */
+    narrow?: boolean;
+    /**
+     * Function to call when the tertiary button is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Function to call when the InlineTip is closed via the "X" button.
+     */
+    onClose?: () => void;
+    /**
+     * Defining the label will show a the tertiary button with the crossroads icon.
+     * You will still need to define the `onClose` method to trigger a callback.
+     */
+    tertiaryButtonLabel?: string;
+    /**
+     * The title of the InlineTip.
+     */
+    title: string;
+    /**
+     * If true, insert 1 rem of "space" on the left of the component.
+     * This will allow the component's content to line up with other
+     * content on the page under special circumstances.
+     *
+     * This will only be applied when `narrow` is false.
+     */
+    withLeftGutter?: boolean;
+}
 /**
  * Inline tips are messages embedded within other components that
  * provide an ambient way to deliver learning content without
  * distracting the user from their flow.
  */
-export let InlineTip: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let InlineTip: React.ForwardRefExoticComponent<InlineTipProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/InlineTip/InlineTip.js

@@ -44,9 +44,9 @@ var defaults = {
   narrow: false,
   withLeftGutter: false,
   onClick: function onClick() {},
-  onClose: function onClose() {}
+  onClose: function onClose() {},
+  title: 'Use case-specific heading'
 };
-
 /**
  * Inline tips are messages embedded within other components that
  * provide an ambient way to deliver learning content without
@@ -196,6 +196,7 @@ exports.InlineTip.propTypes = {
    *
    * Enabling `media` disables the `collapsible` feature.
    */
+  /**@ts-ignore*/
   media: index["default"].oneOfType([index["default"].shape({
     render: index["default"].func
   }), index["default"].shape({

package/lib/components/InlineTip/InlineTipLink.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, { PropsWithChildren, ReactNode } from 'react';
+interface InlineTipLinkProps extends PropsWithChildren {
+    /**
+     * Provide the contents of the InlineTipLink.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
 /**
  * This is a standard Carbon link, styled specifically for use inside InlineTip.
  */
-export let InlineTipLink: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let InlineTipLink: React.ForwardRefExoticComponent<InlineTipLinkProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/InterstitialScreenView/InterstitialScreenView.d.ts

@@ -1,5 +1,26 @@
+/**
+ * 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, { PropsWithChildren, ReactNode } from 'react';
+interface InterstitialScreenViewProps extends PropsWithChildren {
+    /**
+     * Provide the contents of the InterstitialScreenView.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * The label to pass to the ProgressStep component.
+     */
+    stepTitle: string;
+}
 /**
  * A Novice to Pro component intended to be used as the child elements of the InterstitialScreen component.
  */
-export let InterstitialScreenView: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let InterstitialScreenView: React.ForwardRefExoticComponent<InterstitialScreenViewProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/InterstitialScreenView/InterstitialScreenView.js

@@ -29,7 +29,6 @@ var _excluded = ["children", "className", "stepTitle"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen-view");
 var componentName = 'InterstitialScreenView';
-
 /**
  * A Novice to Pro component intended to be used as the child elements of the InterstitialScreen component.
  */

package/lib/components/InterstitialScreenViewModule/InterstitialScreenViewModule.d.ts

@@ -1,5 +1,26 @@
 /**
- * View module to help in building interstitial screen views.
+ * Copyright IBM Corp. 2024, 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 InterstitialScreenViewModule: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+interface InterstitialScreenViewModuleProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The description of this component.
+     */
+    description: string;
+    /**
+     * The title of this component.
+     */
+    title: string;
+}
+/**
+ * View module to help in building interstitial screen views.
+ */
+export declare let InterstitialScreenViewModule: React.ForwardRefExoticComponent<InterstitialScreenViewModuleProps & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/Nav/Nav.js

@@ -111,7 +111,7 @@ exports.Nav = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
    */
   var handleListClick = function handleListClick(id) {
     Object.keys(navigationLists.current).forEach(function (key) {
-      if (key !== id && !navigationLists.current[key].isExpandedOnPageload) {
+      if (key !== id && !navigationLists.current[key].isExpandedOnPageLoad) {
         navigationLists.current[key].close();
       }
     });

package/lib/components/Nav/NavList.js

@@ -31,7 +31,7 @@ var defaults = {
   className: '',
   children: null,
   id: '',
-  isExpandedOnPageload: false,
+  isExpandedOnPageLoad: false,
   onItemClick: function onItemClick() {},
   onListClick: function onListClick() {},
   tabIndex: 0,
@@ -50,8 +50,8 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     icon = _ref$icon === void 0 ? defaults.icon : _ref$icon,
     _ref$id = _ref.id,
     id = _ref$id === void 0 ? defaults.id : _ref$id,
-    _ref$isExpandedOnPage = _ref.isExpandedOnPageload,
-    isExpandedOnPageload = _ref$isExpandedOnPage === void 0 ? defaults.isExpandedOnPageload : _ref$isExpandedOnPage,
+    _ref$isExpandedOnPage = _ref.isExpandedOnPageLoad,
+    isExpandedOnPageLoad = _ref$isExpandedOnPage === void 0 ? defaults.isExpandedOnPageLoad : _ref$isExpandedOnPage,
     _ref$navigationItemTi = _ref.navigationItemTitle,
     navigationItemTitle = _ref$navigationItemTi === void 0 ? defaults.navigationItemTitle : _ref$navigationItemTi,
     _ref$onItemClick = _ref.onItemClick,
@@ -62,7 +62,7 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? defaults.title : _ref$title;
-  var _useState = React.useState(isExpandedOnPageload),
+  var _useState = React.useState(isExpandedOnPageLoad),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
@@ -74,7 +74,7 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       var childProps = _ref3.props;
       return childProps.href;
     });
-    setOpen(hrefs.includes(activeHref) || isExpandedOnPageload);
+    setOpen(hrefs.includes(activeHref) || isExpandedOnPageLoad);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -108,7 +108,7 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   React.useImperativeHandle(ref, function () {
     return {
       close: close,
-      isExpandedOnPageload: isExpandedOnPageload
+      isExpandedOnPageLoad: isExpandedOnPageLoad
     };
   });
   var newChildren = React__default["default"].Children.map(children, function (child, index) {
@@ -159,7 +159,7 @@ NavList.propTypes = {
   /** @type {string} ID of a list. */
   id: index.propTypesExports.string,
   /** @type {boolean} State of a list. */
-  isExpandedOnPageload: index.propTypesExports.bool,
+  isExpandedOnPageLoad: index.propTypesExports.bool,
   /** @type {boolean} Title of nav. */
   navigationItemTitle: index.propTypesExports.string,
   /** @type {Function} Click handler for an item. */

package/lib/components/NonLinearReading/NonLinearReading.d.ts

@@ -1,7 +1,33 @@
+/**
+ * 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';
+type Theme = 'light' | 'dark';
+interface NonLinearReadingProps {
+    /**
+     * The keyword of the component appears as a pill.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The content that appears when the keyword is toggled open.
+     */
+    definition: ReactNode;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: Theme;
+}
 /**
  * Use non-linear reading when space is limited to share a
  * brief, at-a-glance, summary of a concept that may require
  * more explanation for some users.
  */
-export let NonLinearReading: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let NonLinearReading: React.ForwardRefExoticComponent<NonLinearReadingProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/lib/components/NonLinearReading/NonLinearReading.js

@@ -29,12 +29,6 @@ var _excluded = ["children", "className", "definition", "theme"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--non-linear-reading");
 var componentName = 'NonLinearReading';
-
-// Default values for props
-var defaults = {
-  theme: 'light'
-};
-
 /**
  * Use non-linear reading when space is limited to share a
  * brief, at-a-glance, summary of a concept that may require
@@ -45,7 +39,7 @@ exports.NonLinearReading = /*#__PURE__*/React__default["default"].forwardRef(fun
     className = _ref.className,
     definition = _ref.definition,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    theme = _ref$theme === void 0 ? 'light' : _ref$theme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -82,6 +76,7 @@ exports.NonLinearReading.propTypes = {
   /**
    * The keyword of the component appears as a pill.
    */
+
   children: index["default"].node.isRequired,
   /**
    * Provide an optional class to be applied to the containing node.

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -326,7 +326,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     id: blockClass,
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "__container")),
     style: {
-      animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out 250ms') : null
+      animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
     },
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef

package/lib/components/PageHeader/PageHeader.js

@@ -195,7 +195,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     checkUpdateVerticalSpace();
   };
   var handleCollapseToggle = function handleCollapseToggle() {
-    PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, metrics.headerOffset, metrics.headerTopValue);
+    PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, headerRef, metrics.headerOffset, metrics.headerTopValue);
   };
 
   // use effects
@@ -314,9 +314,9 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
   };
   React.useEffect(function () {
     if (collapseHeader === true) {
-      PageHeaderUtils.utilSetCollapsed(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
+      PageHeaderUtils.utilSetCollapsed(collapseHeader, headerRef, metrics.headerOffset, metrics.headerTopValue);
     }
-  }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
+  }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue, headerRef]);
   useResizeObserver.useResizeObserver(sizingContainerRef, handleResizeActionBarColumn);
   useResizeObserver.useResizeObserver(headerRef, handleResize);
 

package/lib/components/PageHeader/PageHeaderUtils.d.ts

@@ -1,6 +1,6 @@
 export const blockClass: string;
 export function utilCheckUpdateVerticalSpace(headerRef: {}, offsetTopMeasuringRef: {}, navigation: {}, enableBreadcrumbScroll: boolean, hasActionBar: boolean, widthIsNarrow: boolean, setMetrics: () => any): void;
-export function utilSetCollapsed(collapse: any, headerOffset: any, headerTopValue: any): void;
+export function utilSetCollapsed(collapse: any, headerRef: any, headerOffset: any, headerTopValue: any): void;
 export function utilGetBreadcrumbItemForTitle(blockClass: any, collapseTitle: any, title: any): {
     label: any;
     title: any;

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -148,16 +148,17 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
 };
 
 // Trigger a window scroll, if necessary, to set the collapsed state.
-var utilSetCollapsed = function utilSetCollapsed(collapse, headerOffset, headerTopValue) {
+var utilSetCollapsed = function utilSetCollapsed(collapse, headerRef, headerOffset, headerTopValue) {
   /* don't know how to test resize */
   /* istanbul ignore else */
+  var scrollableTarget = scrollableAncestor.scrollableAncestor(headerRef.current);
   if (collapse) {
-    window.scrollTo({
+    scrollableTarget.scrollTo({
       top: headerOffset - headerTopValue,
       behavior: 'smooth'
     });
   } else {
-    window.scrollTo({
+    scrollableTarget.scrollTo({
       top: 0,
       behavior: 'smooth'
     });

package/lib/components/SearchBar/SearchBar.d.ts

@@ -1,5 +1,53 @@
 /**
- * Search bar with input field and search button
+ * Copyright IBM Corp. 2024, 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 SearchBar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
+type Scopes = string[] | object[];
+interface SearchBarProps extends PropsWithChildren {
+    /** @type {string} Optional additional class name. */
+    className?: string;
+    /** @type {string} The label text for the search text input. */
+    clearButtonLabelText: string;
+    /**
+     * Whether or not the scopes MultiSelect label is visually hidden.
+     */
+    hideScopesLabel?: boolean;
+    /** @type {string} The label text for the search text input. */
+    labelText?: string;
+    /** @type {Function} Function handler for when the user changes their query search. */
+    onChange?: (event: any) => void;
+    /** @type {Function} Function handler for when the user submits a search. */
+    onSubmit?: (event: any) => void;
+    /** @type {string} Placeholder text to be displayed in the search input. */
+    placeHolderText: string;
+    /** @type {Function} Function to get the text for each scope to display in dropdown. */
+    scopeToString?: () => void;
+    /** @type {Array<any>} Array of allowed search scopes. */
+    scopes?: Scopes;
+    /** @type {string} The name text for the search scope type. */
+    scopesTypeLabel?: typeof conditionalScopePropValidator;
+    /** @type {Array<any> Array of initially selected search scopes. */
+    selectedScopes?: Scopes;
+    /**
+     * Optional custom sorting algorithm for an array of scope items.
+     * By default, scope items are sorted in ascending alphabetical order,
+     * with "selected" items moved to the start of the scope items array.
+     */
+    sortItems?: () => void;
+    /** @type {string} The label text for the search submit button. */
+    submitLabel: string;
+    /**
+     * Provide accessible label text for the scopes MultiSelect.
+     */
+    titleText?: string;
+    /** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
+    translateWithId?: () => void;
+    /** @type {string} Search query value. */
+    value?: string;
+}
+export declare let SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLFormElement>>;
+declare const conditionalScopePropValidator: (props: any, propName: any, componentName: any, ...rest: any[]) => Error | null;
+export {};

package/lib/components/SearchBar/SearchBar.js

@@ -38,10 +38,6 @@ var defaults = {
   selectedScopes: [],
   hideScopesLabel: true
 };
-
-/**
- * Search bar with input field and search button
- */
 exports.SearchBar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
     clearButtonLabelText = _ref.clearButtonLabelText,
@@ -54,11 +50,11 @@ exports.SearchBar = /*#__PURE__*/React__default["default"].forwardRef(function (
     onSubmit = _ref$onSubmit === void 0 ? defaults.onSubmit : _ref$onSubmit,
     placeHolderText = _ref.placeHolderText,
     _ref$scopes = _ref.scopes,
-    scopes = _ref$scopes === void 0 ? defaults.scopes : _ref$scopes,
+    scopes = _ref$scopes === void 0 ? [] : _ref$scopes,
     scopesTypeLabel = _ref.scopesTypeLabel,
     scopeToString = _ref.scopeToString,
     _ref$selectedScopes = _ref.selectedScopes,
-    selectedScopes = _ref$selectedScopes === void 0 ? defaults.selectedScopes : _ref$selectedScopes,
+    selectedScopes = _ref$selectedScopes === void 0 ? [] : _ref$selectedScopes,
     sortItems = _ref.sortItems,
     submitLabel = _ref.submitLabel,
     translateWithId = _ref.translateWithId,
@@ -171,6 +167,7 @@ var conditionalScopePropValidator = function conditionalScopePropValidator(props
   if (props.scopes && props.scopes.length > 0 && !props[propName]) {
     return new Error("Required `".concat(propName, "` when `scopes` prop type is supplied to `").concat(componentName, "`. Validation failed."));
   }
+  /**@ts-ignore */
   for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
     rest[_key - 3] = arguments[_key];
   }
@@ -200,11 +197,13 @@ exports.SearchBar.propTypes = {
   /** @type {Function} Function to get the text for each scope to display in dropdown. */
   scopeToString: index["default"].func,
   /** @type {Array<any>} Array of allowed search scopes. */
+  /**@ts-ignore */
   scopes: index["default"].arrayOf(index["default"].oneOfType([index["default"].string, index["default"].object])),
   /** @type {string} The name text for the search scope type. */
   // eslint-disable-next-line react/require-default-props
   scopesTypeLabel: conditionalScopePropValidator,
   /** @type {Array<any> Array of initially selected search scopes. */
+  /**@ts-ignore */
   selectedScopes: index["default"].arrayOf(index["default"].oneOfType([index["default"].string, index["default"].object])),
   /**
    * Optional custom sorting algorithm for an array of scope items.