@carbon/ibm-products 2.31.0-alpha.5 → 2.31.0

package/es/components/CreateModal/CreateModal.d.ts

@@ -1,8 +1,72 @@
+/**
+ * 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import { ComposedModal } from '@carbon/react';
+interface CreateModalProps extends React.ComponentProps<typeof ComposedModal> {
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specifies an optional handler which is called when the CreateModal
+     * is closed.
+     */
+    onRequestClose?(): void;
+    /**
+     * Specifies an optional handler which is called when the CreateModal
+     * primary button is pressed.
+     */
+    onRequestSubmit?(): void;
+    /**
+     * Specifies whether the CreateModal is open or not.
+     */
+    open?: boolean;
+    /**
+     * The title of the CreateModal is usually the product or service name.
+     */
+    title: ReactNode;
+    /**
+     * The subtitle of the CreateModal is optional and serves to provide more information about the modal.
+     */
+    subtitle?: ReactNode;
+    /**
+     * The description of the CreateModal serves to provide more information about the modal.
+     */
+    description: ReactNode;
+    /**
+     * Specifies the secondary button's text in the modal.
+     */
+    secondaryButtonText: string;
+    /**
+     * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    /**
+     * Specifies the primary button's text in the modal.
+     */
+    primaryButtonText: string;
+    /**
+     * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+     * Returning `true` prevents the primary button from being clicked until required fields are completed.
+     */
+    disableSubmit?: boolean;
+    /**
+     * Specifies which DOM element in the form should be focused.
+     */
+    selectorPrimaryFocus: ReactNode;
+}
 /**
  * The `CreateModal` component provides a way for a user to quickly generate a new
 resource. It is triggered by a user’s action, appears on top of the main page
 content, and is persistent until dismissed. The purpose of this modal should be
 immediately apparent to the user, with a clear and obvious path to completion.
  */
-export let CreateModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CreateModal: React.ForwardRefExoticComponent<CreateModalProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+export {};

package/es/components/CreateModal/CreateModal.js

@@ -28,7 +28,6 @@ var isValidChildren = function isValidChildren() {
     return;
   };
 };
-
 /**
  * The `CreateModal` component provides a way for a user to quickly generate a new
 resource. It is triggered by a user’s action, appears on top of the main page
@@ -93,6 +92,7 @@ CreateModal.propTypes = {
   /**
    * Children refers to all form items within a form inside of the modal's body.
    */
+  /**@ts-ignore*/
   children: isValidChildren(),
   /**
    * Specify an optional className to be applied to the modal root node

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -87,7 +87,7 @@ var DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Table, _extends({}, getTableProps(), {
-      className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: /* istanbul ignore next */

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts

@@ -1,5 +1,5 @@
 export default Columns;
-declare function Columns({ getVisibleColumnsCount, filterString, columns, setColumnsObject, onSelectColumn, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, }: {
+declare function Columns({ getVisibleColumnsCount, filterString, columns, setColumnsObject, onSelectColumn, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, customizeTearsheetHeadingLabel }: {
     getVisibleColumnsCount: any;
     filterString: any;
     columns: any;
@@ -8,12 +8,14 @@ declare function Columns({ getVisibleColumnsCount, filterString, columns, setCol
     assistiveTextInstructionsLabel: any;
     assistiveTextDisabledInstructionsLabel: any;
     selectAllLabel: any;
+    customizeTearsheetHeadingLabel: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace Columns {
     namespace propTypes {
         let assistiveTextDisabledInstructionsLabel: PropTypes.Requireable<string>;
         let assistiveTextInstructionsLabel: PropTypes.Requireable<string>;
         let columns: PropTypes.Validator<any[]>;
+        let customizeTearsheetHeadingLabel: PropTypes.Requireable<string>;
         let disabledInstructionsLabel: PropTypes.Requireable<string>;
         let filterString: PropTypes.Validator<string>;
         let getVisibleColumnsCount: PropTypes.Validator<(...args: any[]) => any>;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -24,7 +24,8 @@ var Columns = function Columns(_ref) {
     onSelectColumn = _ref.onSelectColumn,
     assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-    selectAllLabel = _ref.selectAllLabel;
+    selectAllLabel = _ref.selectAllLabel,
+    customizeTearsheetHeadingLabel = _ref.customizeTearsheetHeadingLabel;
   var listId = useRef(uuidv4()); // keep id between renders
   var listRef = useRef(null);
   var _React$useState = React__default.useState(''),
@@ -47,6 +48,7 @@ var Columns = function Columns(_ref) {
   }, /*#__PURE__*/React__default.createElement("ol", {
     className: "".concat(blockClass, "__customize-columns-column-list--focus"),
     role: "listbox",
+    "aria-label": customizeTearsheetHeadingLabel,
     "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -81,6 +83,7 @@ Columns.propTypes = {
   assistiveTextDisabledInstructionsLabel: PropTypes.string,
   assistiveTextInstructionsLabel: PropTypes.string,
   columns: PropTypes.array.isRequired,
+  customizeTearsheetHeadingLabel: PropTypes.string,
   disabledInstructionsLabel: PropTypes.string,
   filterString: PropTypes.string.isRequired,
   getVisibleColumnsCount: PropTypes.func.isRequired,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -8,7 +8,6 @@
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useCallback, useEffect } from 'react';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
-import { isColumnVisible } from './common.js';
 import Columns from './Columns.js';
 import Actions from './Actions.js';
 import { pkg } from '../../../../../settings.js';
@@ -51,19 +50,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     searchText = _useState6[0],
     setSearchText = _useState6[1];
-  var _useState7 = useState(columnDefinitions
-    // only sort the hidden column to the end when modal reopen
-    .sort(function (defA, defB) {
-      var isVisibleA = isColumnVisible(defA);
-      var isVisibleB = isColumnVisible(defB);
-      if (isVisibleA && !isVisibleB) {
-        return -1;
-      }
-      if (!isVisibleA && isVisibleB) {
-        return 1;
-      }
-      return 0;
-    })),
+  var _useState7 = useState(columnDefinitions),
     _useState8 = _slicedToArray(_useState7, 2),
     columnObjects = _useState8[0],
     setColumnObjects = _useState8[1];
@@ -149,7 +136,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel
+    selectAllLabel: selectAllLabel,
+    customizeTearsheetHeadingLabel: customizeTearsheetHeadingLabel
   }));
 };
 CustomizeColumnsTearsheet.propTypes = {

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js

@@ -7,13 +7,6 @@
 
 import isBoolean from 'lodash/isBoolean';
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
 var isColumnVisible = function isColumnVisible(colDef) {
   return isBoolean(colDef.isVisible) ? colDef.isVisible : true;
 };

package/lib/components/CreateModal/CreateModal.d.ts

@@ -1,8 +1,72 @@
+/**
+ * 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import { ComposedModal } from '@carbon/react';
+interface CreateModalProps extends React.ComponentProps<typeof ComposedModal> {
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specifies an optional handler which is called when the CreateModal
+     * is closed.
+     */
+    onRequestClose?(): void;
+    /**
+     * Specifies an optional handler which is called when the CreateModal
+     * primary button is pressed.
+     */
+    onRequestSubmit?(): void;
+    /**
+     * Specifies whether the CreateModal is open or not.
+     */
+    open?: boolean;
+    /**
+     * The title of the CreateModal is usually the product or service name.
+     */
+    title: ReactNode;
+    /**
+     * The subtitle of the CreateModal is optional and serves to provide more information about the modal.
+     */
+    subtitle?: ReactNode;
+    /**
+     * The description of the CreateModal serves to provide more information about the modal.
+     */
+    description: ReactNode;
+    /**
+     * Specifies the secondary button's text in the modal.
+     */
+    secondaryButtonText: string;
+    /**
+     * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    /**
+     * Specifies the primary button's text in the modal.
+     */
+    primaryButtonText: string;
+    /**
+     * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+     * Returning `true` prevents the primary button from being clicked until required fields are completed.
+     */
+    disableSubmit?: boolean;
+    /**
+     * Specifies which DOM element in the form should be focused.
+     */
+    selectorPrimaryFocus: ReactNode;
+}
 /**
  * The `CreateModal` component provides a way for a user to quickly generate a new
 resource. It is triggered by a user’s action, appears on top of the main page
 content, and is persistent until dismissed. The purpose of this modal should be
 immediately apparent to the user, with a clear and obvious path to completion.
  */
-export let CreateModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CreateModal: React.ForwardRefExoticComponent<CreateModalProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+export {};

package/lib/components/CreateModal/CreateModal.js

@@ -37,7 +37,6 @@ var isValidChildren = function isValidChildren() {
     return;
   };
 };
-
 /**
  * The `CreateModal` component provides a way for a user to quickly generate a new
 resource. It is triggered by a user’s action, appears on top of the main page
@@ -102,6 +101,7 @@ exports.CreateModal.propTypes = {
   /**
    * Children refers to all form items within a form inside of the modal's body.
    */
+  /**@ts-ignore*/
   children: isValidChildren(),
   /**
    * Specify an optional className to be applied to the modal root node

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -96,7 +96,7 @@ var DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Table, _rollupPluginBabelHelpers["extends"]({}, getTableProps(), {
-      className: cx__default["default"](withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: cx__default["default"](withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: /* istanbul ignore next */

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts

@@ -1,5 +1,5 @@
 export default Columns;
-declare function Columns({ getVisibleColumnsCount, filterString, columns, setColumnsObject, onSelectColumn, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, }: {
+declare function Columns({ getVisibleColumnsCount, filterString, columns, setColumnsObject, onSelectColumn, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, customizeTearsheetHeadingLabel }: {
     getVisibleColumnsCount: any;
     filterString: any;
     columns: any;
@@ -8,12 +8,14 @@ declare function Columns({ getVisibleColumnsCount, filterString, columns, setCol
     assistiveTextInstructionsLabel: any;
     assistiveTextDisabledInstructionsLabel: any;
     selectAllLabel: any;
+    customizeTearsheetHeadingLabel: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace Columns {
     namespace propTypes {
         let assistiveTextDisabledInstructionsLabel: PropTypes.Requireable<string>;
         let assistiveTextInstructionsLabel: PropTypes.Requireable<string>;
         let columns: PropTypes.Validator<any[]>;
+        let customizeTearsheetHeadingLabel: PropTypes.Requireable<string>;
         let disabledInstructionsLabel: PropTypes.Requireable<string>;
         let filterString: PropTypes.Validator<string>;
         let getVisibleColumnsCount: PropTypes.Validator<(...args: any[]) => any>;

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -34,7 +34,8 @@ var Columns = function Columns(_ref) {
     onSelectColumn = _ref.onSelectColumn,
     assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-    selectAllLabel = _ref.selectAllLabel;
+    selectAllLabel = _ref.selectAllLabel,
+    customizeTearsheetHeadingLabel = _ref.customizeTearsheetHeadingLabel;
   var listId = React.useRef(uuidv4["default"]()); // keep id between renders
   var listRef = React.useRef(null);
   var _React$useState = React__default["default"].useState(''),
@@ -57,6 +58,7 @@ var Columns = function Columns(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("ol", {
     className: "".concat(blockClass, "__customize-columns-column-list--focus"),
     role: "listbox",
+    "aria-label": customizeTearsheetHeadingLabel,
     "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
     tabIndex: 0
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -91,6 +93,7 @@ Columns.propTypes = {
   assistiveTextDisabledInstructionsLabel: index["default"].string,
   assistiveTextInstructionsLabel: index["default"].string,
   columns: index["default"].array.isRequired,
+  customizeTearsheetHeadingLabel: index["default"].string,
   disabledInstructionsLabel: index["default"].string,
   filterString: index["default"].string.isRequired,
   getVisibleColumnsCount: index["default"].func.isRequired,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -12,7 +12,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../../../../node_modules/prop-types/index.js');
-var common = require('./common.js');
 var Columns = require('./Columns.js');
 var Actions = require('./Actions.js');
 var settings = require('../../../../../settings.js');
@@ -59,19 +58,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
     searchText = _useState6[0],
     setSearchText = _useState6[1];
-  var _useState7 = React.useState(columnDefinitions
-    // only sort the hidden column to the end when modal reopen
-    .sort(function (defA, defB) {
-      var isVisibleA = common.isColumnVisible(defA);
-      var isVisibleB = common.isColumnVisible(defB);
-      if (isVisibleA && !isVisibleB) {
-        return -1;
-      }
-      if (!isVisibleA && isVisibleB) {
-        return 1;
-      }
-      return 0;
-    })),
+  var _useState7 = React.useState(columnDefinitions),
     _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
     columnObjects = _useState8[0],
     setColumnObjects = _useState8[1];
@@ -157,7 +144,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel
+    selectAllLabel: selectAllLabel,
+    customizeTearsheetHeadingLabel: customizeTearsheetHeadingLabel
   }));
 };
 CustomizeColumnsTearsheet.propTypes = {

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js

@@ -15,13 +15,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var isBoolean__default = /*#__PURE__*/_interopDefaultLegacy(isBoolean);
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
 var isColumnVisible = function isColumnVisible(colDef) {
   return isBoolean__default["default"](colDef.isVisible) ? colDef.isVisible : true;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.31.0-alpha.5+ce1358ad0",
+  "version": "2.31.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.30.0-alpha.5+ce1358ad0",
+    "@carbon/ibm-products-styles": "^2.30.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -114,5 +114,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "ce1358ad0493a21f742e455f5b11c3540592c78f"
+  "gitHead": "b87b80ea5e0b054b85e633c9c44ce265ace42e28"
 }

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// Copyright IBM Corp. 2022, 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.
@@ -90,6 +90,10 @@
 .#{variables.$block-class}__draggable-handleHolder-droppable.#{variables.$block-class}__draggable-handleHolder-droppable--origin {
   opacity: 0.5;
   transition: opacity $duration-moderate-01 motion(entrance, productive);
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 .#{variables.$block-class}__draggable-handleHolder--sticky {