@carbon/ibm-products 2.38.0 → 2.40.0

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.d.ts

@@ -1,2 +1,163 @@
-export let NotificationsPanel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
 import React from 'react';
+import { Link } from '@carbon/react';
+interface Link {
+    url: string;
+    text: string;
+}
+interface Data {
+    id?: string | number;
+    type?: 'error' | 'warning' | 'success' | 'informational';
+    timestamp?: Date;
+    title?: string;
+    description?: string;
+    link?: Link;
+    unread?: boolean;
+    onNotificationClick?: () => void;
+}
+interface NotificationsPanelProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Array of data for Notifications component to render
+     */
+    data: Data[];
+    /**
+     * Sets the `days ago` label text
+     */
+    daysAgoText?: (value: number) => string;
+    /**
+     * Label for Dismiss all button
+     */
+    dismissAllLabel?: string;
+    /**
+     * Label for Dismiss single notification icon button
+     */
+    dismissSingleNotificationIconDescription?: string;
+    /**
+     * Optional: Determines if the `Do not disturb` toggle is on or off when the component is rendered
+     */
+    doNotDisturbDefaultToggled?: boolean;
+    /**
+     * Optional: Label for Do not disturb toggle
+     */
+    doNotDisturbLabel?: string;
+    /**
+     * Sets the empty state label text when there are no notifications
+     */
+    emptyStateLabel?: string;
+    /**
+     * Sets the `hour ago` label text
+     */
+    hourAgoText?: (value: number) => string;
+    /**
+     * Sets the `hours ago` label text
+     */
+    hoursAgoText?: (value: number) => string;
+    /**
+     * Sets the `minute ago` label text
+     */
+    minuteAgoText?: (value: number) => string;
+    /**
+     * Sets the `minutes ago` label text
+     */
+    minutesAgoText?: (value: number) => string;
+    /**
+     * Sets the `month ago` label text
+     */
+    monthAgoText?: (value: number) => string;
+    /**
+     * Sets the `months ago` label text
+     */
+    monthsAgoText?: (value: number) => string;
+    /**
+     * Sets the `now` label text
+     */
+    nowText?: string;
+    /**
+     * Sets the notifications panel open state
+     */
+    onClickOutside: () => void;
+    /**
+     * Function that will dismiss all notifications
+     */
+    onDismissAllNotifications?: () => void;
+    /**
+     * Function that will dismiss a single notification
+     */
+    onDismissSingleNotification?: (prop: any) => void;
+    /**
+     * Optional: function that returns the current selected value of the disable notification toggle
+     */
+    onDoNotDisturbChange?: (prop: any) => void;
+    /**
+     * Event handler for the View all button
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Event handler for the View all button
+     */
+    onViewAllClick?: () => void;
+    /**
+     * Determines whether the notifications panel should render or not
+     */
+    open: boolean;
+    /**
+     * Sets the previous label text
+     */
+    previousLabel?: string;
+    /**
+     * Sets the `read less` label text
+     */
+    readLessLabel?: string;
+    /**
+     * Sets the `read more` label text
+     */
+    readMoreLabel?: string;
+    /**
+     * Sets the `seconds ago` label text
+     */
+    secondsAgoText?: (value: number) => string;
+    /**
+     * Sets the settings icon description text
+     */
+    settingsIconDescription?: string;
+    /**
+     * Sets the title for the Notifications panel
+     */
+    title?: string;
+    /**
+     * Sets the today label text
+     */
+    todayLabel?: string;
+    /**
+     * Sets the View all button text
+     */
+    viewAllLabel?: (value: number) => string;
+    /**
+     * Sets the `year ago` label text
+     */
+    yearAgoText?: (value: number) => string;
+    /**
+     * Sets the `years ago` label text
+     */
+    yearsAgoText?: (value: number) => string;
+    /**
+     * Sets the `Yesterday at` label text
+     */
+    yesterdayAtText?: (value: number) => string;
+    /**
+     * Sets the yesterday label text
+     */
+    yesterdayLabel?: string;
+}
+export declare let NotificationsPanel: React.ForwardRefExoticComponent<NotificationsPanelProps & React.RefAttributes<unknown>>;
+export {};

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -209,9 +209,9 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       return item.id === id;
     })[0];
     var trimLength = 88;
-    var description = notification.description;
-    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification.showAll), "".concat(blockClass, "__notification-short-description"), !notification.showAll)]);
-    var showMoreButtonClassName = cx([_defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), "".concat(blockClass, "__notification-read-more-button"), !notification.showAll)]);
+    var description = notification === null || notification === void 0 ? void 0 : notification['description'];
+    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-short-description"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
+    var showMoreButtonClassName = cx([_defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-read-more-button"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
     return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React__default.createElement(Button, {
@@ -222,14 +222,14 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
           size: 16
         }, props));
       },
-      iconDescription: notification.showAll ? readLessLabel : readMoreLabel,
+      iconDescription: notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel,
       onClick: function onClick(event) {
         event.preventDefault();
         event.stopPropagation();
         var newData = allNotifications.map(function (item) {
-          if (item.id === notification.id) {
+          if (item.id === (notification === null || notification === void 0 ? void 0 : notification['id'])) {
             return Object.assign({}, item, {
-              showAll: !item.showAll
+              showAll: !(item !== null && item !== void 0 && item['showAll'])
             });
           }
           return item;
@@ -237,23 +237,21 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
         setAllNotifications(newData);
       },
       className: showMoreButtonClassName
-    }, notification.showAll ? readLessLabel : readMoreLabel));
+    }, notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel));
   };
   var renderNotification = function renderNotification(group, notification, index) {
     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,
-      type: "button",
       role: "button",
       tabIndex: 0,
       onClick: function onClick() {
         return notification.onNotificationClick(notification);
       },
       onKeyDown: function onKeyDown(event) {
-        if (event.target.classList.contains("".concat(blockClass, "__dismiss-single-button"))) {
+        if (event.target instanceof HTMLElement && event.target.classList.contains("".concat(blockClass, "__dismiss-single-button"))) {
           return;
         }
         event.which === 13 && notification.onNotificationClick(notification);
@@ -316,7 +314,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     id: blockClass,
     className: cx(blockClass, className, "".concat(blockClass, "__container")),
     style: {
-      animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
+      animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : undefined
     },
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
@@ -405,6 +403,7 @@ NotificationsPanel.propTypes = {
   /**
    * Array of data for Notifications component to render
    */
+  /**@ts-ignore*/
   data: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     type: PropTypes.oneOf(['error', 'warning', 'success', 'informational']),