@carbon/ibm-products 2.36.0 → 2.37.0

package/es/components/Tearsheet/TearsheetShell.d.ts

@@ -1,6 +1,107 @@
-export const tearsheetShellWideProps: string[];
-export function tearsheetIsPassive(actions: any): boolean;
-export function tearsheetHasCloseIcon(actions: any, hasCloseIcon: any): any;
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { PropsWithChildren, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { type ButtonProps } from '@carbon/react';
+interface TearsheetShellProps extends PropsWithChildren {
+    actions?: ButtonProps[];
+    ariaLabel?: string;
+    /**
+     * An optional class or classes to be added to the outermost element.
+     */
+    className?: string;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * Enable a close icon ('x') in the header area of the tearsheet. By default,
+     * (when this prop is omitted, or undefined or null) a tearsheet does not
+     * display a close icon if there are navigation actions ("transactional
+     * tearsheet") and displays one if there are no navigation actions ("passive
+     * tearsheet"), and that behavior can be overridden if required by setting
+     * this prop to either true or false.
+     */
+    hasCloseIcon?: boolean;
+    /**
+     * The content for the header actions area, displayed alongside the title in
+     * the header area of the tearsheet. This is typically a drop-down, or a set
+     * of small buttons, or similar. NB the headerActions is only applicable for
+     * wide tearsheets.
+     */
+    headerActions?: ReactNode;
+    /**
+     * The content for the influencer section of the tearsheet, displayed
+     * alongside the main content. This is typically a menu, or filter, or
+     * progress indicator, or similar. NB the influencer is only applicable for
+     * wide tearsheets.
+     */
+    influencer?: ReactNode;
+    /**
+     * The position of the influencer section, 'left' or 'right'.
+     */
+    influencerPosition?: 'left' | 'right';
+    /**
+     * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
+     * is 320px.
+     */
+    influencerWidth?: 'narrow' | 'wide';
+    /**
+     * A label for the tearsheet, displayed in the header area of the tearsheet
+     * to maintain context for the tearsheet (e.g. as the title changes from page
+     * to page of a multi-page task).
+     */
+    label?: ReactNode;
+    /**
+     * Navigation content, such as a set of tabs, to be displayed at the bottom
+     * of the header area of the tearsheet. NB the navigation is only applicable
+     * for wide tearsheets.
+     */
+    navigation?: ReactNode;
+    /**
+     * An optional handler that is called when the user closes the tearsheet (by
+     * clicking the close button, if enabled, or clicking outside, if enabled).
+     * Returning `false` here prevents the modal from closing.
+     */
+    onClose?: () => void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    selectorPrimaryFocus?: string;
+    /**
+     * Specifies the width of the tearsheet, 'narrow' or 'wide'.
+     */
+    size: 'narrow' | 'wide';
+    /**
+     *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
+     */
+    slug?: ReactNode;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    verticalPosition?: 'normal' | 'lower';
+}
+export type CloseIconDescriptionTypes = {
+    hasCloseIcon?: false;
+    closeIconDescription?: string;
+} | {
+    hasCloseIcon: true;
+    closeIconDescription: string;
+};
+export declare const tearsheetShellWideProps: string[];
+export declare const tearsheetIsPassive: (actions: any) => boolean;
+export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) => any;
 /**
  *  TearSheetShell is used internally by TearSheet and TearSheetNarrow
  *
@@ -8,10 +109,18 @@ export function tearsheetHasCloseIcon(actions: any, hasCloseIcon: any): any;
  *
  * See the canvas tab for the component API details.
  * */
-export const TearsheetShell: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export const portalType: PropTypes.Requireable<object>;
-export namespace deprecatedProps {
-    let verticalPosition: PropTypes.Requireable<string>;
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+export declare const TearsheetShell: React.ForwardRefExoticComponent<(TearsheetShellProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
+export declare const portalType: PropTypes.Requireable<object>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     *
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition: PropTypes.Requireable<string>;
+};
+export {};

package/es/components/Tearsheet/TearsheetShell.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import PropTypes from '../../node_modules/prop-types/index.js';
@@ -13,7 +13,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
-import { usePrefix, ComposedModal, ModalHeader, Layer, Button } from '@carbon/react';
+import { Button, usePrefix, ComposedModal, ModalHeader, Layer } from '@carbon/react';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { useFocus } from '../../global/js/hooks/useFocus.js';
@@ -37,6 +37,7 @@ var maxDepth = 3;
 // The 'sizes' array contains an array of the sizes for every stacked tearsheet.
 // This is so we can opt-out of including the stacking scale effect when there
 // are stacked tearsheets with mixed sizes (ie, using wide and narrow together)
+
 var stack = {
   open: [],
   all: [],
@@ -94,6 +95,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var _useFocus = useFocus(modalRef),
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
+  var modalRefValue = modalRef.current;
   var wide = size === 'wide';
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
@@ -124,7 +126,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   }
   handleStackChange.checkFocus = function () {
     // if we are now the topmost tearsheet, ensure we have focus
-    if (open && position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
+    if (open && position === depth && modalRefValue && !modalRefValue.contains(document.activeElement)) {
       handleStackChange.claimFocus();
     }
   };
@@ -152,8 +154,9 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
+        var _handler$checkFocus;
         handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
-        handler.checkFocus();
+        (_handler$checkFocus = handler.checkFocus) === null || _handler$checkFocus === void 0 || _handler$checkFocus.call(handler);
       });
     };
 
@@ -192,10 +195,12 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     // If something within us is receiving focus but we are not the topmost
     // stacked tearsheet, transfer focus to the topmost tearsheet instead
     if (position < depth) {
-      stack.open[stack.open.length - 1].claimFocus();
+      var _stack$open$claimFocu, _stack$open;
+      (_stack$open$claimFocu = (_stack$open = stack.open[stack.open.length - 1]).claimFocus) === null || _stack$open$claimFocu === void 0 || _stack$open$claimFocu.call(_stack$open);
     }
   }
   if (position <= depth) {
+    var _prevDepth$current;
     // Include a modal header if and only if one or more of these is given.
     // We can't use a Wrap for the ModalHeader because ComposedModal requires
     // the direct child to be the ModalHeader instance.
@@ -216,7 +221,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       "aria-label": ariaLabel || getNodeTextContent(title),
       className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
       slug: slug,
       style: setScaleValues(),
       containerClassName: cx("".concat(bc, "__container"), _defineProperty(_defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
@@ -264,7 +269,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       alwaysRender: includeActions
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: "".concat(bc, "__content"),
-      alwaysRender: influencer && influencerPosition === 'right'
+      alwaysRender: !!(influencer && influencerPosition === 'right')
     }, children), /*#__PURE__*/React__default.createElement(Wrap, {
       className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition !== 'right'
@@ -272,7 +277,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       className: "".concat(bc, "__button-container")
     }, /*#__PURE__*/React__default.createElement(ActionSet, {
       actions: actions,
-      buttonSize: wide ? '2xl' : null,
+      buttonSize: wide ? '2xl' : undefined,
       className: "".concat(bc, "__buttons"),
       size: wide ? '2xl' : 'lg',
       "aria-hidden": !open
@@ -323,6 +328,7 @@ TearsheetShell.propTypes = _objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
+  /**@ts-ignore*/
   actions: PropTypes.arrayOf(
   // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
@@ -347,6 +353,7 @@ TearsheetShell.propTypes = _objectSpread2({
    * **Note:** This prop is only required if a close icon is shown, i.e. if
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
+  /**@ts-ignore*/
   closeIconDescription: PropTypes.string.isRequired.if(function (_ref4) {
     var actions = _ref4.actions,
       hasCloseIcon = _ref4.hasCloseIcon;
@@ -364,6 +371,7 @@ TearsheetShell.propTypes = _objectSpread2({
    * tearsheet"), and that behavior can be overridden if required by setting
    * this prop to either true or false.
    */
+  /**@ts-ignore*/
   hasCloseIcon: PropTypes.bool,
   /**
    * The content for the header actions area, displayed alongside the title in
@@ -413,10 +421,12 @@ TearsheetShell.propTypes = _objectSpread2({
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
+  /**@ts-ignore*/
   portalTarget: portalType,
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */
+  /**@ts-ignore*/
   size: PropTypes.oneOf(['narrow', 'wide']).isRequired,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component

package/es/components/WebTerminal/WebTerminal.d.ts

@@ -1,5 +1,49 @@
+/**
+ * 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, { PropsWithChildren, ReactNode } from 'react';
+import { OverflowMenuItem } from '@carbon/react';
+interface Action {
+    renderIcon: () => void;
+    onClick: () => void;
+    iconDescription: string;
+}
+interface WebTerminalProps extends PropsWithChildren {
+    /**
+     * Provide your own terminal component as children to show up in the web terminal
+     */
+    children: ReactNode | ReactNode[];
+    /**
+     * An array of actions to be displayed in the web terminal header bar
+     */
+    actions?: readonly Action[];
+    /**
+     * Custom classname for additional styling of the web terminal
+     */
+    className?: string;
+    /**
+     * Icon description for the close button
+     */
+    closeIconDescription: string;
+    /**
+     * Array of objects for each documentation link. Each documentation link uses the prop types of OverflowMenuItems. See more: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default
+     */
+    documentationLinks?: readonly OverflowMenuItem[];
+    /**
+     * Description for the documentation link overflow menu tooltip
+     */
+    documentationLinksIconDescription?: string;
+    /**
+     * Optionally pass if the web terminal should be open by default
+     */
+    isInitiallyOpen?: boolean;
+}
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
-export let WebTerminal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let WebTerminal: React.ForwardRefExoticComponent<WebTerminalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/WebTerminal/WebTerminal.js

@@ -29,7 +29,6 @@ var defaults = {
   documentationLinksIconDescription: 'Show documentation links',
   isInitiallyOpen: false
 };
-
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
@@ -99,7 +98,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     ref: ref,
     className: cx([blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
     style: {
-      animation: !prefersReducedMotion && webTerminalAnimationName
+      animation: !prefersReducedMotion ? webTerminalAnimationName : ''
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default.createElement("header", {
@@ -168,6 +167,7 @@ WebTerminal.propTypes = {
   /**
    * An array of actions to be displayed in the web terminal header bar
    */
+  /**@ts-ignore */
   actions: PropTypes.arrayOf(PropTypes.shape({
     renderIcon: PropTypes.func.isRequired,
     onClick: PropTypes.func.isRequired,

package/es/global/js/hooks/usePrefersReducedMotion.d.ts

@@ -0,0 +1,2 @@
+export default usePrefersReducedMotion;
+declare function usePrefersReducedMotion(): boolean;

package/es/global/js/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useEffect } from 'react';
+import { hasDocument } from '../utils/window.js';
+
+var usePrefersReducedMotion = function usePrefersReducedMotion() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    prefersReducedMotion = _useState2[0],
+    setPrefersReducedMotion = _useState2[1];
+  useEffect(function () {
+    if (hasDocument()) {
+      var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)'),
+        matches = _window$matchMedia.matches;
+      setPrefersReducedMotion(matches);
+    }
+  }, []);
+  return prefersReducedMotion;
+};
+var usePrefersReducedMotion$1 = usePrefersReducedMotion;
+
+export { usePrefersReducedMotion$1 as default };

package/es/global/js/utils/Wrap.d.ts

@@ -1,3 +1,32 @@
+/**
+ * Copyright IBM Corp. 2021, 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, { ElementType, PropsWithChildren, ReactNode } from 'react';
+interface WrapProps extends PropsWithChildren {
+    /**
+     * Specify whether the wrapper element should render even if there are no
+     * children or the children are themselves empty wrappers. Useful if there
+     * are some conditions in which the wrapper element is still required. Note
+     * that this prop takes precedence over neverRender if both are set to true.
+     */
+    alwaysRender?: boolean | null;
+    /**
+     * The element name or component to use as a wrapper for the content.
+     */
+    element?: (() => ReactNode) | string | ElementType;
+    /**
+     * Specify whether nothing should be rendered even if there are children
+     * in the content. Useful if there are some circumstances in which the
+     * component should not render at all. Note that if alwaysRender is also
+     * set to true then it will take precedence and the wrapper element and
+     * content will be rendered.
+     */
+    neverRender?: boolean;
+    className?: string;
+}
 /**
  * A simple conditional wrapper that encloses its children in a <div> (or other
  * element if specified), passing any supplied attributes to the <div> (or other
@@ -8,5 +37,5 @@
  * the ref.current will be set to the wrapper element if it renders, and will
  * remain undefined if it does not render.
  */
-export const Wrap: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare const Wrap: React.ForwardRefExoticComponent<WrapProps & React.RefAttributes<HTMLElement>>;
+export {};

package/es/global/js/utils/Wrap.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import React__default from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 
-var _excluded = ["alwaysRender", "children", "element", "neverRender"];
+var _excluded = ["alwaysRender", "children", "element", "neverRender", "className"];
 
 // Examine a flat array of children to decide whether it is effectively empty.
 // If there are no children, or all the children are falsy, or all the non-falsy
@@ -24,12 +24,6 @@ var isEmpty = function isEmpty(children) {
   });
   return result;
 };
-
-// Default values for props
-var defaults = {
-  element: 'div'
-};
-
 /**
  * A simple conditional wrapper that encloses its children in a <div> (or other
  * element if specified), passing any supplied attributes to the <div> (or other
@@ -44,10 +38,13 @@ var Wrap = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var alwaysRender = _ref.alwaysRender,
     children = _ref.children,
     _ref$element = _ref.element,
-    Wrapper = _ref$element === void 0 ? defaults.element : _ref$element,
+    Wrapper = _ref$element === void 0 ? 'div' : _ref$element,
     neverRender = _ref.neverRender,
+    className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return (neverRender || isEmpty(children)) && !alwaysRender ? null : /*#__PURE__*/React__default.createElement(Wrapper, _extends({}, rest, {
+  return (neverRender || isEmpty(children)) && !alwaysRender ? null : /*#__PURE__*/React__default.createElement(Wrapper, _extends({
+    className: className
+  }, rest, {
     ref: ref
   }), children);
 });
@@ -66,6 +63,7 @@ Wrap.propTypes = {
    * components that decide not to render, nothing will be rendered in the DOM.
    */
   children: PropTypes.node,
+  className: PropTypes.string,
   /**
    * The element name or component to use as a wrapper for the content.
    */

package/es/global/js/utils/getNodeTextContent.d.ts

@@ -1 +1 @@
-export function getNodeTextContent(node: Node): string;
+export function getNodeTextContent(node: ReactNode): string;

package/es/global/js/utils/getNodeTextContent.js

@@ -25,7 +25,7 @@ import { typeof as _typeof } from '../../../_virtual/_rollupPluginBabelHelpers.j
  *          <li>Item 3</li>
  *        </ul>
  *        --> "Item 1Item 2Item 3"
- * @param {Node} node A React node
+ * @param {ReactNode} node A React node
  * @returns {string}
  */
 var getNodeTextContent = function getNodeTextContent(node) {

package/es/global/js/utils/window.d.ts

@@ -0,0 +1,2 @@
+export function hasDocument(): boolean;
+export function hasWindow(): boolean;

package/es/global/js/utils/window.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+var hasDocument = function hasDocument() {
+  return typeof document !== 'undefined';
+};
+
+export { hasDocument };