@carbon/ibm-products 2.43.1-canary.3 → 2.43.1-canary.5

package/es/components/Datagrid/types/index.d.ts

@@ -195,6 +195,9 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
     expandedRowIds?: object;
     onRowClick?: (row: any, event: any) => void;
     onSort?: boolean;
+    expandedContentHeight?: number;
+    onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
+    ExpandedRowContentComponent?: JSXElementConstructor<any>;
 }
 export interface ResizeHeaderProps {
     resizerProps?: ResizerProps;

package/es/components/Datagrid/useExpandedRow.d.ts

@@ -1,2 +1,9 @@
+/**
+ * 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 { Hooks } from 'react-table';
+declare const useExpandedRow: (hooks: Hooks) => void;
 export default useExpandedRow;
-declare function useExpandedRow(hooks: any): void;

package/es/components/Datagrid/useExpandedRow.js

@@ -13,10 +13,11 @@ import useRowExpander from './useRowExpander.js';
 var useExpandedRow = function useExpandedRow(hooks) {
   useRowExpander(hooks);
   var useInstance = function useInstance(instance) {
-    var rows = instance.rows,
-      expandedContentHeight = instance.expandedContentHeight,
-      ExpandedRowContentComponent = instance.ExpandedRowContentComponent,
-      onRowExpand = instance.onRowExpand;
+    var _ref = instance,
+      rows = _ref.rows,
+      expandedContentHeight = _ref.expandedContentHeight,
+      ExpandedRowContentComponent = _ref.ExpandedRowContentComponent,
+      onRowExpand = _ref.onRowExpand;
     var _useState = useState({}),
       _useState2 = _slicedToArray(_useState, 2),
       expandedRowsHeight = _useState2[0],
@@ -28,7 +29,7 @@ var useExpandedRow = function useExpandedRow(hooks) {
       return _objectSpread2(_objectSpread2({}, row), {}, {
         canExpand: row.original && !row.original.notExpandable,
         expandedContentHeight: expandedRowsHeight[row.index] || expandedContentHeight,
-        RowExpansionRenderer: DatagridExpandedRow(ExpandedRowContentComponent),
+        RowExpansionRenderer: ExpandedRowContentComponent && DatagridExpandedRow(ExpandedRowContentComponent),
         onClick: function onClick(row, event) {
           return onRowExpand === null || onRowExpand === void 0 ? void 0 : onRowExpand(row, event);
         }

package/es/components/EditTearsheet/EditTearsheet.d.ts

@@ -1,7 +1,82 @@
-export const FormContext: React.Context<null>;
-export const FormNumberContext: React.Context<number>;
+/**
+ * Copyright IBM Corp. 2022, 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, PropsWithChildren } from 'react';
+export declare const FormContext: React.Context<null>;
+export declare const FormNumberContext: React.Context<number>;
+interface EditTearsheetProps extends PropsWithChildren {
+    /**
+     * The cancel button text
+     */
+    cancelButtonText?: string;
+    /**
+     * The main content of the tearsheet
+     */
+    children?: ReactNode;
+    /**
+     * 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;
+    /**
+     * Used to set the size of the influencer
+     */
+    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;
+    /**
+     * 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?: () => boolean | void;
+    /**
+     * An optional handler that is called when a user changes forms via clicking
+     * an influencer nav item.
+     * Returns the index of the selected form.
+     */
+    onFormChange?: (formIndex: number) => number;
+    /**
+     * Specify a handler for submitting the tearsheet.
+     */
+    onRequestSubmit: () => void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * Specifies the aria label for the SideNav from Carbon UIShell
+     */
+    sideNavAriaLabel?: string;
+    /**
+     * The submit button text
+     */
+    submitButtonText?: string;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    /**
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position (the default) 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 provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition?: 'normal' | 'lower';
+}
 /**
  * Use Tearsheet with medium to complex edits. See usage guidance for further information.
  */
-export let EditTearsheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let EditTearsheet: React.ForwardRefExoticComponent<EditTearsheetProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/EditTearsheet/EditTearsheet.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 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, createContext } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
@@ -13,6 +13,7 @@ import { Form, SideNav, SideNavItems, SideNavMenuItem } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { TearsheetShell } from '../Tearsheet/TearsheetShell.js';
+import { prepareProps } from '../../global/js/utils/props-helper.js';
 
 var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onRequestSubmit", "onFormChange", "sideNavAriaLabel"];
 var componentName = 'EditTearsheet';
@@ -34,6 +35,9 @@ var defaults = {
   sideNavAriaLabel: 'Side navigation'
 };
 
+// Note that the descriptions here should be kept in sync with those for the
+// corresponding props for TearsheetNarrow and TearsheetShell components.
+
 /**
  * Use Tearsheet with medium to complex edits. See usage guidance for further information.
  */
@@ -56,6 +60,17 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
     sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var actions = [{
+    key: 'edit-action-button-submit',
+    label: submitButtonText,
+    onClick: onRequestSubmit,
+    kind: 'primary'
+  }, {
+    key: 'edit-action-button-cancel',
+    label: cancelButtonText,
+    onClick: onClose,
+    kind: 'ghost'
+  }];
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentForm = _useState2[0],
@@ -64,7 +79,7 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     formTitles = _useState4[0],
     setFormTitles = _useState4[1];
-  var contentRef = useRef();
+  var contentRef = useRef(null);
   var handleCurrentForm = function handleCurrentForm(formIndex) {
     setCurrentForm(formIndex);
     if (onFormChange) {
@@ -89,30 +104,22 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }, title);
     }))));
   }
-  return /*#__PURE__*/React__default.createElement(TearsheetShell, _extends({}, rest, getDevtoolsProps(componentName), {
-    actions: [{
-      key: 'edit-action-button-submit',
-      label: submitButtonText,
-      onClick: onRequestSubmit,
-      kind: 'primary'
-    }, {
-      key: 'edit-action-button-cancel',
-      label: cancelButtonText,
-      onClick: onClose,
-      kind: 'ghost'
-    }],
+  return /*#__PURE__*/React__default.createElement(TearsheetShell, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, getDevtoolsProps(componentName)), prepareProps(rest)), {}, {
+    actions: actions,
+    children: children,
     className: cx(blockClass, className),
     description: description,
-    hasCloseIcon: false,
-    influencer: defaultInfluencer(),
-    influencerPosition: "left",
+    influencerPosition: 'left',
     influencerWidth: influencerWidth,
     label: label,
     onClose: onClose,
     open: open,
-    size: "wide",
+    size: 'wide',
     title: title,
-    verticalPosition: verticalPosition,
+    verticalPosition: verticalPosition
+  }, rest), {}, {
+    hasCloseIcon: false,
+    influencer: defaultInfluencer(),
     ref: ref
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content"),

package/lib/components/Datagrid/types/index.d.ts

@@ -195,6 +195,9 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
     expandedRowIds?: object;
     onRowClick?: (row: any, event: any) => void;
     onSort?: boolean;
+    expandedContentHeight?: number;
+    onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
+    ExpandedRowContentComponent?: JSXElementConstructor<any>;
 }
 export interface ResizeHeaderProps {
     resizerProps?: ResizerProps;

package/lib/components/Datagrid/useExpandedRow.d.ts

@@ -1,2 +1,9 @@
+/**
+ * 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 { Hooks } from 'react-table';
+declare const useExpandedRow: (hooks: Hooks) => void;
 export default useExpandedRow;
-declare function useExpandedRow(hooks: any): void;

package/lib/components/Datagrid/useExpandedRow.js

@@ -17,10 +17,11 @@ var useRowExpander = require('./useRowExpander.js');
 var useExpandedRow = function useExpandedRow(hooks) {
   useRowExpander["default"](hooks);
   var useInstance = function useInstance(instance) {
-    var rows = instance.rows,
-      expandedContentHeight = instance.expandedContentHeight,
-      ExpandedRowContentComponent = instance.ExpandedRowContentComponent,
-      onRowExpand = instance.onRowExpand;
+    var _ref = instance,
+      rows = _ref.rows,
+      expandedContentHeight = _ref.expandedContentHeight,
+      ExpandedRowContentComponent = _ref.ExpandedRowContentComponent,
+      onRowExpand = _ref.onRowExpand;
     var _useState = React.useState({}),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       expandedRowsHeight = _useState2[0],
@@ -32,7 +33,7 @@ var useExpandedRow = function useExpandedRow(hooks) {
       return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, row), {}, {
         canExpand: row.original && !row.original.notExpandable,
         expandedContentHeight: expandedRowsHeight[row.index] || expandedContentHeight,
-        RowExpansionRenderer: DatagridExpandedRow["default"](ExpandedRowContentComponent),
+        RowExpansionRenderer: ExpandedRowContentComponent && DatagridExpandedRow["default"](ExpandedRowContentComponent),
         onClick: function onClick(row, event) {
           return onRowExpand === null || onRowExpand === void 0 ? void 0 : onRowExpand(row, event);
         }

package/lib/components/EditTearsheet/EditTearsheet.d.ts

@@ -1,7 +1,82 @@
-export const FormContext: React.Context<null>;
-export const FormNumberContext: React.Context<number>;
+/**
+ * Copyright IBM Corp. 2022, 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, PropsWithChildren } from 'react';
+export declare const FormContext: React.Context<null>;
+export declare const FormNumberContext: React.Context<number>;
+interface EditTearsheetProps extends PropsWithChildren {
+    /**
+     * The cancel button text
+     */
+    cancelButtonText?: string;
+    /**
+     * The main content of the tearsheet
+     */
+    children?: ReactNode;
+    /**
+     * 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;
+    /**
+     * Used to set the size of the influencer
+     */
+    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;
+    /**
+     * 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?: () => boolean | void;
+    /**
+     * An optional handler that is called when a user changes forms via clicking
+     * an influencer nav item.
+     * Returns the index of the selected form.
+     */
+    onFormChange?: (formIndex: number) => number;
+    /**
+     * Specify a handler for submitting the tearsheet.
+     */
+    onRequestSubmit: () => void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * Specifies the aria label for the SideNav from Carbon UIShell
+     */
+    sideNavAriaLabel?: string;
+    /**
+     * The submit button text
+     */
+    submitButtonText?: string;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    /**
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position (the default) 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 provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition?: 'normal' | 'lower';
+}
 /**
  * Use Tearsheet with medium to complex edits. See usage guidance for further information.
  */
-export let EditTearsheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let EditTearsheet: React.ForwardRefExoticComponent<EditTearsheetProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/EditTearsheet/EditTearsheet.js

@@ -17,6 +17,7 @@ var react = require('@carbon/react');
 var settings = require('../../settings.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var TearsheetShell = require('../Tearsheet/TearsheetShell.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -43,6 +44,9 @@ var defaults = {
   sideNavAriaLabel: 'Side navigation'
 };
 
+// Note that the descriptions here should be kept in sync with those for the
+// corresponding props for TearsheetNarrow and TearsheetShell components.
+
 /**
  * Use Tearsheet with medium to complex edits. See usage guidance for further information.
  */
@@ -65,6 +69,17 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
     sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var actions = [{
+    key: 'edit-action-button-submit',
+    label: submitButtonText,
+    onClick: onRequestSubmit,
+    kind: 'primary'
+  }, {
+    key: 'edit-action-button-cancel',
+    label: cancelButtonText,
+    onClick: onClose,
+    kind: 'ghost'
+  }];
   var _useState = React.useState(0),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     currentForm = _useState2[0],
@@ -73,7 +88,7 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     formTitles = _useState4[0],
     setFormTitles = _useState4[1];
-  var contentRef = React.useRef();
+  var contentRef = React.useRef(null);
   var handleCurrentForm = function handleCurrentForm(formIndex) {
     setCurrentForm(formIndex);
     if (onFormChange) {
@@ -98,30 +113,22 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }, title);
     }))));
   }
-  return /*#__PURE__*/React__default["default"].createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
-    actions: [{
-      key: 'edit-action-button-submit',
-      label: submitButtonText,
-      onClick: onRequestSubmit,
-      kind: 'primary'
-    }, {
-      key: 'edit-action-button-cancel',
-      label: cancelButtonText,
-      onClick: onClose,
-      kind: 'ghost'
-    }],
+  return /*#__PURE__*/React__default["default"].createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, devtools.getDevtoolsProps(componentName)), propsHelper.prepareProps(rest)), {}, {
+    actions: actions,
+    children: children,
     className: cx__default["default"](blockClass, className),
     description: description,
-    hasCloseIcon: false,
-    influencer: defaultInfluencer(),
-    influencerPosition: "left",
+    influencerPosition: 'left',
     influencerWidth: influencerWidth,
     label: label,
     onClose: onClose,
     open: open,
-    size: "wide",
+    size: 'wide',
     title: title,
-    verticalPosition: verticalPosition,
+    verticalPosition: verticalPosition
+  }, rest), {}, {
+    hasCloseIcon: false,
+    influencer: defaultInfluencer(),
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__content"),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.1-canary.3+8929392ba",
+  "version": "2.43.1-canary.5+2e7a930f9",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -121,5 +121,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "8929392ba3157e6621cadf2add03b78913a55318"
+  "gitHead": "2e7a930f99fd6dcadd47a328793ce6a259dc144e"
 }