@carbon/ibm-products 2.39.0 → 2.40.1-canary.10

package/es/components/Guidebanner/Guidebanner.d.ts

@@ -1,6 +1,66 @@
+/**
+ * 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 GuidebannerProps {
+    /**
+     * Provide the contents of the Guidebanner.
+     * One or more GuidebannerElement components are required.
+     */
+    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;
+    /**
+     * Text label for the Collapse button.
+     */
+    collapseButtonLabel?: string;
+    /**
+     * When true, the Guidebanner will initialize in a collapsed state,
+     * showing the title and the Expand button.
+     *
+     * When expanded, it will show the GuidebannerElement child components and the Collapse button.
+     */
+    collapsible?: boolean;
+    /**
+     * Text label for the Expand button.
+     */
+    expandButtonLabel?: string;
+    /**
+     * Tooltip text and aria label for the Next button icon.
+     */
+    nextIconDescription?: string;
+    /**
+     * If defined, a Close button will render in the top-right corner and a
+     * callback function will be triggered when button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Tooltip text and aria label for the Back button icon.
+     */
+    previousIconDescription?: string;
+    /**
+     * Title text.
+     */
+    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.
+     */
+    withLeftGutter?: boolean;
+}
 /**
  * The guide banner sits at the top of a page, or page-level tab,
  * to introduce foundational concepts related to the page's content.
  */
-export let Guidebanner: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let Guidebanner: React.ForwardRefExoticComponent<GuidebannerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/Guidebanner/Guidebanner.js

@@ -57,8 +57,8 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     previousIconDescription = _ref$previousIconDesc === void 0 ? defaults.previousIconDescription : _ref$previousIconDesc,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var scrollRef = useRef();
-  var toggleRef = useRef();
+  var scrollRef = useRef(null);
+  var toggleRef = useRef(null);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     scrollPosition = _useState2[0],
@@ -77,6 +77,7 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     });
   };
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    "aria-expanded": !isCollapsed,
     className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(Idea, {
@@ -107,8 +108,7 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: "md",
     className: "".concat(blockClass, "__toggle-button"),
     onClick: handleClickToggle,
-    ref: toggleRef,
-    "aria-expanded": !isCollapsed
+    ref: toggleRef
   }, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
     className: cx("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
   }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -172,9 +172,10 @@ Guidebanner.propTypes = {
     React__default.Children.forEach(prop, function (child) {
       if (child.type.displayName !== 'GuidebannerElement') {
         var _child$type, _child$type2;
-        // If not GuidebannerElement, then show:
-        // React component name(child.type?.name) or
-        // HTML element name(child.type).
+        // If child element is not `GuidebannerElement`, then show:
+        // Carbon Products component's `displayName` (child.type.displayName) or
+        // React component's `name` (child.type.name) or
+        // HTML element's tag name (child.type).
         error = new Error("`Guidebanner` only accepts children of type `GuidebannerElement`, found `".concat(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) || child.type, "` instead."));
       }
     });

package/es/components/Guidebanner/GuidebannerElement.d.ts

@@ -1,19 +1,32 @@
-export function GuidebannerElement({ button, className, description, title, ...rest }: {
-    [x: string]: any;
-    button: any;
-    className: any;
-    description: any;
-    title: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace GuidebannerElement {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let button: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let className: PropTypes.Requireable<string>;
-        let description: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        let title: PropTypes.Requireable<string>;
-    }
+/**
+ * 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 GuidebannerElementProps {
+    /**
+     * An optional button can be rendered below the description.
+     * This can be a link, button, Coachmark button, etc.
+     */
+    button?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The description of the element.
+     */
+    description: ReactNode;
+    /**
+     * The title of the element.
+     */
+    title?: string;
 }
-declare const componentName: "GuidebannerElement";
-import PropTypes from 'prop-types';
+/**
+ * The GuidebannerElement is a required child component of the Guidebanner,
+ * and acts as a container for a CarouselItem.
+ */
+export declare let GuidebannerElement: React.ForwardRefExoticComponent<GuidebannerElementProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/Guidebanner/GuidebannerElement.js

@@ -17,19 +17,19 @@ var _excluded = ["button", "className", "description", "title"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--guidebanner__element");
 var componentName = 'GuidebannerElement';
-
 /**
  * The GuidebannerElement is a required child component of the Guidebanner,
  * and acts as a container for a CarouselItem.
  */
-var GuidebannerElement = function GuidebannerElement(_ref) {
+var GuidebannerElement = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var button = _ref.button,
     className = _ref.className,
     description = _ref.description,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className)
+    className: cx(blockClass, className),
+    ref: ref
   }, getDevtoolsProps(componentName)), title && /*#__PURE__*/React__default.createElement("h2", {
     className: "".concat(blockClass, "-title")
   }, title), description && /*#__PURE__*/React__default.createElement("p", {
@@ -37,7 +37,7 @@ var GuidebannerElement = function GuidebannerElement(_ref) {
   }, description), button && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "-buttons")
   }, button));
-};
+});
 
 // Return a placeholder if not released and not enabled by feature flag
 GuidebannerElement = pkg.checkComponentEnabled(GuidebannerElement, componentName);

package/es/components/Guidebanner/GuidebannerElementButton.d.ts

@@ -1,17 +1,31 @@
-export function GuidebannerElementButton({ children, className, type, ...rest }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-    type: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace GuidebannerElementButton {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        let className: PropTypes.Requireable<string>;
-        let type: PropTypes.Requireable<string>;
-    }
+/**
+ * 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 GuidebannerElementButtonProps {
+    /**
+     * Provide the contents of the GuidebannerElementLink.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide a description for the icon.
+     */
+    iconDescription?: string;
+    /**
+     * If type is "primary", then return a tertiary button with the "crossroads" icon,
+     * else return a ghost button.
+     */
+    type?: string;
 }
-declare const componentName: "GuidebannerElementButton";
-import PropTypes from 'prop-types';
+/**
+ * One of two buttons styled specifically for the GuidebannerElement.
+ */
+export declare let GuidebannerElementButton: React.ForwardRefExoticComponent<GuidebannerElementButtonProps & React.RefAttributes<Button>>;
 export {};

package/es/components/Guidebanner/GuidebannerElementButton.js

@@ -15,25 +15,31 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
 var _Crossroads;
-var _excluded = ["children", "className", "type"];
+var _excluded = ["children", "className", "iconDescription", "type"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--guidebanner__element-button");
 var componentName = 'GuidebannerElementButton';
+var defaults = {
+  iconDescription: 'Crossroads'
+};
 
 /**
  * One of two buttons styled specifically for the GuidebannerElement.
  */
-var GuidebannerElementButton = function GuidebannerElementButton(_ref) {
+var GuidebannerElementButton = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
+    _ref$iconDescription = _ref.iconDescription,
+    iconDescription = _ref$iconDescription === void 0 ? defaults.iconDescription : _ref$iconDescription,
     type = _ref.type,
     rest = _objectWithoutProperties(_ref, _excluded);
   if (type === 'primary') {
     return /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
       className: cx(blockClass, className),
-      iconDescription: 'Crossroads',
+      iconDescription: iconDescription,
       kind: "tertiary",
+      ref: ref,
       renderIcon: function renderIcon() {
         return _Crossroads || (_Crossroads = /*#__PURE__*/React__default.createElement(Crossroads, {
           size: 16
@@ -49,7 +55,7 @@ var GuidebannerElementButton = function GuidebannerElementButton(_ref) {
     role: "button",
     size: "md"
   }, getDevtoolsProps(componentName)), children);
-};
+});
 
 // Return a placeholder if not released and not enabled by feature flag
 GuidebannerElementButton = pkg.checkComponentEnabled(GuidebannerElementButton, componentName);

package/es/components/Guidebanner/GuidebannerElementLink.d.ts

@@ -1,15 +1,22 @@
-export function GuidebannerElementLink({ children, className, ...rest }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace GuidebannerElementLink {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        let className: PropTypes.Requireable<string>;
-    }
+/**
+ * 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 GuidebannerElementLinkProps {
+    /**
+     * Provide the contents of the GuidebannerElementLink.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
 }
-declare const componentName: "GuidebannerElementLink";
-import PropTypes from 'prop-types';
+/**
+ * A link styled specifically for the GuidebannerElement.
+ */
+export declare let GuidebannerElementLink: React.ForwardRefExoticComponent<GuidebannerElementLinkProps & React.RefAttributes<Link>>;
 export {};

package/es/components/Guidebanner/GuidebannerElementLink.js

@@ -18,21 +18,21 @@ var _excluded = ["children", "className"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--guidebanner__element-link");
 var componentName = 'GuidebannerElementLink';
-
 /**
  * A link styled specifically for the GuidebannerElement.
  */
-var GuidebannerElementLink = function GuidebannerElementLink(_ref) {
+var GuidebannerElementLink = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
     className: cx(blockClass, className),
     kind: "ghost",
+    ref: ref,
     role: "link",
     size: "md"
   }, getDevtoolsProps(componentName)), children);
-};
+});
 
 // Return a placeholder if not released and not enabled by feature flag
 GuidebannerElementLink = pkg.checkComponentEnabled(GuidebannerElementLink, componentName);

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -214,6 +214,7 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
       className,
       // Apply any supplied class names to the main HTML element.
       variantClass, isVisibleClass),
+      role: "main",
       "aria-label": interstitialAriaLabel,
       ref: ref
     }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
@@ -239,7 +240,8 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
   var renderBody = function renderBody() {
     return /*#__PURE__*/React__default.createElement("div", {
       className: cx("".concat(blockClass, "--body")),
-      ref: bodyScrollRef
+      ref: bodyScrollRef,
+      tabIndex: 0
     }, mediaIsDefined ? /*#__PURE__*/React__default.createElement(FlexGrid, {
       fullWidth: true,
       className: cx("".concat(blockClass, "--body-grid"))

package/es/components/MultiAddSelect/MultiAddSelect.d.ts

@@ -1,5 +1,137 @@
+import React, { ReactNode } from 'react';
+type Filter = {
+    id?: string;
+    label?: string;
+};
+type Modifier = {
+    label?: string;
+    options?: string[];
+};
+interface Entry {
+    avatar?: {
+        alt?: string;
+        icon?: () => void;
+        src?: string;
+        theme?: 'light' | 'dark';
+    };
+    children?: ReactNode;
+    icon?: () => void;
+    id: string;
+    subtitle?: string;
+    title: string;
+    value: string;
+}
+type Theme = 'light' | 'dark';
+type ItemType = {
+    entries?: Entry[];
+    modifiers: Modifier;
+    sortBy: string[];
+    filterBy: string[];
+};
+interface MultiAddSelectProps {
+    /**
+     * optional class name
+     */
+    className?: string;
+    /**
+     * placeholder for column input filter
+     */
+    columnInputPlaceholder?: string;
+    /**
+     * text description that appears under the title
+     */
+    description?: string;
+    /**
+     * options to display in the global filter box. values are generated
+     * from the id which should correlate with a specific property in an
+     * item entry
+     */
+    globalFilters?: Filter[];
+    globalFiltersIconDescription?: string;
+    /**
+     * placeholder text for the global filter dropdown
+     */
+    globalFiltersPlaceholderText?: string;
+    /**
+     * text for the global filter primary button
+     */
+    globalFiltersPrimaryButtonText?: string;
+    /**
+     * text for the global filter secondary button
+     */
+    globalFiltersSecondaryButtonText?: string;
+    /**
+     * label for global search input
+     */
+    globalSearchLabel?: string;
+    /**
+     * placeholder for global search input
+     */
+    globalSearchPlaceholder?: string;
+    /**
+     * the theme for the empty state illustration
+     */
+    illustrationTheme?: Theme;
+    /**
+     * title that displays in the sidebar / influencer
+     */
+    influencerTitle?: string;
+    /**
+     * object that contains the item data. for more information reference the
+     * "Structuring items" section in the docs tab
+     */
+    items?: ItemType;
+    /**
+     * label that display above the list of items
+     */
+    itemsLabel?: string;
+    /**
+     * text to display when no results are found from the global search
+     */
+    noResultsDescription?: string;
+    /**
+     * title to display when no results are found from the global search
+     */
+    noResultsTitle?: string;
+    /**
+     * text body that displays in the sidebar when nothing is selected
+     */
+    noSelectionDescription?: string;
+    /**
+     * title that displays in the sidebar when nothing is selected
+     */
+    noSelectionTitle?: string;
+    /**
+     * function to call when the close button clicked
+     */
+    onClose?: () => void;
+    /**
+     * text for close button
+     */
+    onCloseButtonText?: string;
+    /**
+     * function to call when the submit button is clicked. returns a selection
+     */
+    onSubmit?: () => void;
+    /**
+     * text for the submit button
+     */
+    onSubmitButtonText?: string;
+    /**
+     * specifies if the component is open or not
+     */
+    open?: boolean;
+    /**
+     * text that displays when displaying filtered items
+     */
+    searchResultsTitle?: string;
+    /**
+     * header text
+     */
+    title?: string;
+}
 /**
  * Used to add or select multiple or more items from larger lists or hierarchies.
  */
-export let MultiAddSelect: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let MultiAddSelect: React.ForwardRefExoticComponent<MultiAddSelectProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/MultiAddSelect/MultiAddSelect.js

@@ -13,7 +13,6 @@ import { pkg } from '../../settings.js';
 import { AddSelect } from '../AddSelect/AddSelect.js';
 
 var componentName = 'MultiAddSelect';
-
 /**
  * Used to add or select multiple or more items from larger lists or hierarchies.
  */
@@ -42,6 +41,7 @@ MultiAddSelect.propTypes = {
    * from the id which should correlate with a specific property in an
    * item entry
    */
+  /**@ts-ignore */
   globalFilters: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     label: PropTypes.string
@@ -79,6 +79,7 @@ MultiAddSelect.propTypes = {
    * object that contains the item data. for more information reference the
    * "Structuring items" section in the docs tab
    */
+  /**@ts-ignore */
   items: PropTypes.shape({
     modifiers: PropTypes.shape({
       label: PropTypes.string,

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -243,7 +243,6 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     var notificationClassName = cx(["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
     var notificationHeaderClassName = cx(["".concat(blockClass, "__notification-title"), _defineProperty({}, "".concat(blockClass, "__notification-title-unread"), notification.unread)]);
     return /*#__PURE__*/React__default.createElement("div", {
-      "aria-label": notification.title,
       key: "".concat(notification.timestamp, "-").concat(notification.title, "-").concat(index),
       className: notificationClassName,
       role: "button",