@carbon/ibm-products 2.31.0 → 2.32.0

package/lib/components/DecoratorDualButton/DecoratorDualButton.js

@@ -0,0 +1,141 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+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 devtools = require('../../global/js/utils/devtools.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
+var settings = require('../../settings.js');
+var DecoratorBase = require('../DecoratorBase/DecoratorBase.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var componentName = 'DecoratorDualButton';
+
+/**
+ * The DecoratorDualButton groups a key/value pair where the key and value each behave like a button.
+ */
+exports.DecoratorDualButton = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  var validProps = propsHelper.prepareProps(props, ['href', 'kind', 'onClick', 'onContextMenu']);
+  return /*#__PURE__*/React__default["default"].createElement(DecoratorBase.DecoratorBase, _rollupPluginBabelHelpers["extends"]({
+    ref: ref
+  }, validProps, {
+    kind: "dual-button"
+  }, devtools.getDevtoolsProps(componentName)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.DecoratorDualButton = settings.pkg.checkComponentEnabled(exports.DecoratorDualButton, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.DecoratorDualButton.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.DecoratorDualButton.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * `disabled` only applies if `kind` is "single-button" or "dual-button".
+   */
+  disabled: index["default"].bool,
+  /**
+   * Do not show the icon, regardless of score.
+   */
+  hideIcon: index["default"].bool,
+  /**
+   * The label for the data.
+   */
+  label: index["default"].string,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onClickLabel: index["default"].func,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onClickValue: index["default"].func,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onContextMenuLabel: index["default"].func,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onContextMenuValue: index["default"].func,
+  /**
+   * Used in conjunction with `scoreThresholds`, determines the color, shape, and type of magnitude of the icon.
+   *
+   * If you don't want to show the icon at all, set `hideIcon={true}`.
+   */
+  score: index["default"].number,
+  /**
+   * Used in conjunction with `score`, determines the color, shape, and type of magnitude of the icon.
+   *
+   * An array of 4 numbers determines the range of thresholds.
+   *
+   * Example using `[0, 4, 7, 10]`:
+   * <br/>- `<= 0` "Benign"
+   * <br/>- `1-3` "Low"
+   * <br/>- `4-6` "Medium"
+   * <br/>- `7-9` "High"
+   * <br/>- `>= 10` "Critical"
+   * <br/>- `NaN` "Unknown"
+   */
+  scoreThresholds: index["default"].arrayOf(index["default"].number),
+  /**
+   * Optional callback function for building a more detailed descriptive text.
+   * Returns `score`, `scoreThresholds`, `magnitude`.
+   *
+   * Typical description is in the form of
+   * '"(magnitude)" magnitude: score (score) out of (last element of scoreThresholds array)'.
+   *
+   * E.g. `"Medium" magnitude: score 5 out of 10`.
+   *
+   * If not defined, the title will default to the `label` prop.
+   */
+  setLabelTitle: index["default"].func,
+  /**
+   * Styled smaller to better fit inline with text.
+   */
+  small: index["default"].bool,
+  /**
+   * Determines the theme of the component.
+   */
+  theme: index["default"].oneOf(['light', 'dark']),
+  /**
+   * If not defined, it will behave as `display:inline-block`.
+   */
+  truncateValue: index["default"].oneOfType([index["default"].oneOf(['end', 'start']), index["default"].shape({
+    maxLength: index["default"].number,
+    front: index["default"].number,
+    back: index["default"].number
+  })]),
+  /**
+   * The value of the data.
+   */
+  value: index["default"].string.isRequired,
+  /**
+   * Overrides the default title for the Decorator's value.
+   */
+  valueTitle: index["default"].string
+};

package/lib/components/DecoratorDualButton/index.d.ts

@@ -0,0 +1 @@
+export { DecoratorDualButton } from "./DecoratorDualButton";

package/lib/components/DecoratorLink/DecoratorLink.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The DecoratorLink groups a key/value pair to behave like a link.
+ */
+export let DecoratorLink: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/DecoratorLink/DecoratorLink.js

@@ -0,0 +1,131 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+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 devtools = require('../../global/js/utils/devtools.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
+var settings = require('../../settings.js');
+var DecoratorBase = require('../DecoratorBase/DecoratorBase.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var componentName = 'DecoratorLink';
+
+/**
+ * The DecoratorLink groups a key/value pair to behave like a link.
+ */
+exports.DecoratorLink = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  var validProps = propsHelper.prepareProps(props, ['disabled', 'kind', 'onClickLabel', 'onClickValue', 'onContextMenuLabel', 'onContextMenuValue']);
+  return /*#__PURE__*/React__default["default"].createElement(DecoratorBase.DecoratorBase, _rollupPluginBabelHelpers["extends"]({
+    ref: ref
+  }, validProps, {
+    kind: "link"
+  }, devtools.getDevtoolsProps(componentName)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.DecoratorLink = settings.pkg.checkComponentEnabled(exports.DecoratorLink, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.DecoratorLink.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.DecoratorLink.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * Do not show the icon, regardless of score.
+   */
+  hideIcon: index["default"].bool,
+  /**
+   * The component's URL.
+   */
+  href: index["default"].string.isRequired,
+  /**
+   * The label for the data.
+   */
+  label: index["default"].string,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onClick: index["default"].func,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onContextMenu: index["default"].func,
+  /**
+   * Used in conjunction with `scoreThresholds`, determines the color, shape, and type of magnitude of the icon.
+   *
+   * If you don't want to show the icon at all, set `hideIcon={true}`.
+   */
+  score: index["default"].number,
+  /**
+   * Used in conjunction with `score`, determines the color, shape, and type of magnitude of the icon.
+   *
+   * An array of 4 numbers determines the range of thresholds.
+   *
+   * Example using `[0, 4, 7, 10]`:
+   * <br/>- `<= 0` "Benign"
+   * <br/>- `1-3` "Low"
+   * <br/>- `4-6` "Medium"
+   * <br/>- `7-9` "High"
+   * <br/>- `>= 10` "Critical"
+   * <br/>- `NaN` "Unknown"
+   */
+  scoreThresholds: index["default"].arrayOf(index["default"].number),
+  /**
+   * Optional callback function for building a more detailed descriptive text.
+   * Returns `score`, `scoreThresholds`, `magnitude`.
+   *
+   * Typical description is in the form of
+   * '"(magnitude)" magnitude: score (score) out of (last element of scoreThresholds array)'.
+   *
+   * E.g. `"Medium" magnitude: score 5 out of 10`.
+   *
+   * If not defined, the title will default to the `label` prop.
+   */
+  setLabelTitle: index["default"].func,
+  /**
+   * Styled smaller to better fit inline with text.
+   */
+  small: index["default"].bool,
+  /**
+   * Determines the theme of the component.
+   */
+  theme: index["default"].oneOf(['light', 'dark']),
+  /**
+   * If not defined, it will behave as `display:inline-block`.
+   */
+  truncateValue: index["default"].oneOfType([index["default"].oneOf(['end', 'start']), index["default"].shape({
+    maxLength: index["default"].number,
+    front: index["default"].number,
+    back: index["default"].number
+  })]),
+  /**
+   * The value of the data.
+   */
+  value: index["default"].string.isRequired,
+  /**
+   * Overrides the default title for the Decorator's value.
+   */
+  valueTitle: index["default"].string
+};

package/lib/components/DecoratorLink/index.d.ts

@@ -0,0 +1 @@
+export { DecoratorLink } from "./DecoratorLink";

package/lib/components/DecoratorSingleButton/DecoratorSingleButton.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The DecoratorSingleButton groups a key/value pair to behave like a button.
+ */
+export let DecoratorSingleButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js

@@ -0,0 +1,131 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+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 devtools = require('../../global/js/utils/devtools.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
+var settings = require('../../settings.js');
+var DecoratorBase = require('../DecoratorBase/DecoratorBase.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var componentName = 'DecoratorSingleButton';
+
+/**
+ * The DecoratorSingleButton groups a key/value pair to behave like a button.
+ */
+exports.DecoratorSingleButton = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  var validProps = propsHelper.prepareProps(props, ['href', 'kind', 'onClickLabel', 'onClickValue', 'onContextMenuLabel', 'onContextMenuValue']);
+  return /*#__PURE__*/React__default["default"].createElement(DecoratorBase.DecoratorBase, _rollupPluginBabelHelpers["extends"]({
+    ref: ref
+  }, validProps, {
+    kind: "single-button"
+  }, devtools.getDevtoolsProps(componentName)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.DecoratorSingleButton = settings.pkg.checkComponentEnabled(exports.DecoratorSingleButton, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.DecoratorSingleButton.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.DecoratorSingleButton.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * `disabled` only applies if `kind` is "single-button" or "dual-button".
+   */
+  disabled: index["default"].bool,
+  /**
+   * Do not show the icon, regardless of score.
+   */
+  hideIcon: index["default"].bool,
+  /**
+   * The label for the data.
+   */
+  label: index["default"].string,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onClick: index["default"].func,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onContextMenu: index["default"].func,
+  /**
+   * Used in conjunction with `scoreThresholds`, determines the color, shape, and type of magnitude of the icon.
+   *
+   * If you don't want to show the icon at all, set `hideIcon={true}`.
+   */
+  score: index["default"].number,
+  /**
+   * Used in conjunction with `score`, determines the color, shape, and type of magnitude of the icon.
+   *
+   * An array of 4 numbers determines the range of thresholds.
+   *
+   * Example using `[0, 4, 7, 10]`:
+   * <br/>- `<= 0` "Benign"
+   * <br/>- `1-3` "Low"
+   * <br/>- `4-6` "Medium"
+   * <br/>- `7-9` "High"
+   * <br/>- `>= 10` "Critical"
+   * <br/>- `NaN` "Unknown"
+   */
+  scoreThresholds: index["default"].arrayOf(index["default"].number),
+  /**
+   * Optional callback function for building a more detailed descriptive text.
+   * Returns `score`, `scoreThresholds`, `magnitude`.
+   *
+   * Typical description is in the form of
+   * '"(magnitude)" magnitude: score (score) out of (last element of scoreThresholds array)'.
+   *
+   * E.g. `"Medium" magnitude: score 5 out of 10`.
+   *
+   * If not defined, the title will default to the `label` prop.
+   */
+  setLabelTitle: index["default"].func,
+  /**
+   * Styled smaller to better fit inline with text.
+   */
+  small: index["default"].bool,
+  /**
+   * Determines the theme of the component.
+   */
+  theme: index["default"].oneOf(['light', 'dark']),
+  /**
+   * If not defined, it will behave as `display:inline-block`.
+   */
+  truncateValue: index["default"].oneOfType([index["default"].oneOf(['end', 'start']), index["default"].shape({
+    maxLength: index["default"].number,
+    front: index["default"].number,
+    back: index["default"].number
+  })]),
+  /**
+   * The value of the data.
+   */
+  value: index["default"].string.isRequired,
+  /**
+   * Overrides the default title for the Decorator's value.
+   */
+  valueTitle: index["default"].string
+};

package/lib/components/DecoratorSingleButton/index.d.ts

@@ -0,0 +1 @@
+export { DecoratorSingleButton } from "./DecoratorSingleButton";

package/lib/components/index.d.ts

@@ -41,6 +41,9 @@ export { InterstitialScreenView } from "./InterstitialScreenView";
 export { InterstitialScreenViewModule } from "./InterstitialScreenViewModule";
 export { DelimitedList } from "./DelimitedList";
 export { Decorator } from "./Decorator";
+export { DecoratorLink } from "./DecoratorLink";
+export { DecoratorSingleButton } from "./DecoratorSingleButton";
+export { DecoratorDualButton } from "./DecoratorDualButton";
 export { DescriptionList } from "./DescriptionList";
 export { FullPageError } from "./FullPageError";
 export { SearchBar } from "./SearchBar";

package/lib/global/js/hooks/useFocus.js

@@ -26,8 +26,9 @@ var useFocus = function useFocus(modalRef) {
   var querySelect = "select".concat(notQuery);
   var queryTextarea = "textarea".concat(notQuery);
   var queryLink = "[href]".concat(notQuery);
+  var queryTabIndex = "[tabindex=\"0\"]".concat(notQuery);
   // Final query
-  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea);
+  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ", ").concat(queryTabIndex);
   var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
   var getFocusable = React.useCallback(function () {
     // Selecting all focusable elements based on the above conditions

package/lib/global/js/package-settings.d.ts

@@ -91,6 +91,9 @@ declare namespace defaults {
         let CoachmarkOverlayElements: boolean;
         let CoachmarkStack: boolean;
         let Decorator: boolean;
+        let DecoratorLink: boolean;
+        let DecoratorSingleButton: boolean;
+        let DecoratorDualButton: boolean;
         let DescriptionList: boolean;
         let SearchBar: boolean;
         let UserAvatar: boolean;

package/lib/global/js/package-settings.js

@@ -97,6 +97,9 @@ var defaults = {
     CoachmarkOverlayElements: false,
     CoachmarkStack: false,
     Decorator: false,
+    DecoratorLink: false,
+    DecoratorSingleButton: false,
+    DecoratorDualButton: false,
     DescriptionList: false,
     SearchBar: false,
     UserAvatar: false,

package/lib/index.js

@@ -110,6 +110,9 @@ var InterstitialScreenView = require('./components/InterstitialScreenView/Inters
 var InterstitialScreenViewModule = require('./components/InterstitialScreenViewModule/InterstitialScreenViewModule.js');
 var DelimitedList = require('./components/DelimitedList/DelimitedList.js');
 var Decorator = require('./components/Decorator/Decorator.js');
+var DecoratorLink = require('./components/DecoratorLink/DecoratorLink.js');
+var DecoratorSingleButton = require('./components/DecoratorSingleButton/DecoratorSingleButton.js');
+var DecoratorDualButton = require('./components/DecoratorDualButton/DecoratorDualButton.js');
 var DescriptionList = require('./components/DescriptionList/DescriptionList.js');
 var FullPageError = require('./components/FullPageError/FullPageError.js');
 var SearchBar = require('./components/SearchBar/SearchBar.js');
@@ -456,6 +459,18 @@ Object.defineProperty(exports, 'Decorator', {
 	enumerable: true,
 	get: function () { return Decorator.Decorator; }
 });
+Object.defineProperty(exports, 'DecoratorLink', {
+	enumerable: true,
+	get: function () { return DecoratorLink.DecoratorLink; }
+});
+Object.defineProperty(exports, 'DecoratorSingleButton', {
+	enumerable: true,
+	get: function () { return DecoratorSingleButton.DecoratorSingleButton; }
+});
+Object.defineProperty(exports, 'DecoratorDualButton', {
+	enumerable: true,
+	get: function () { return DecoratorDualButton.DecoratorDualButton; }
+});
 Object.defineProperty(exports, 'DescriptionList', {
 	enumerable: true,
 	get: function () { return DescriptionList.DescriptionList; }

package/lib/settings.d.ts

@@ -77,6 +77,9 @@ export const pkg: {
         CoachmarkOverlayElements: boolean;
         CoachmarkStack: boolean;
         Decorator: boolean;
+        DecoratorLink: boolean;
+        DecoratorSingleButton: boolean;
+        DecoratorDualButton: boolean;
         DescriptionList: boolean;
         SearchBar: boolean;
         UserAvatar: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.31.0",
+  "version": "2.32.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",
+    "@carbon/ibm-products-styles": "^2.30.1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -105,14 +105,14 @@
     "react-window": "^1.8.10"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.21.1",
-    "@carbon/layout": "^11.20.1",
-    "@carbon/motion": "^11.16.1",
-    "@carbon/react": "^1.52.0",
-    "@carbon/themes": "^11.32.0",
-    "@carbon/type": "^11.25.1",
+    "@carbon/grid": "^11.22.0",
+    "@carbon/layout": "^11.21.0",
+    "@carbon/motion": "^11.17.0",
+    "@carbon/react": "^1.53.0",
+    "@carbon/themes": "^11.33.0",
+    "@carbon/type": "^11.26.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "b87b80ea5e0b054b85e633c9c44ce265ace42e28"
+  "gitHead": "1785ad497681a5f69574c808db00e251625c4be9"
 }

package/scss/components/Card/_card.scss

@@ -171,7 +171,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 }
 
 .#{$block-class}--has-slug {
-  @include utilities.callout-gradient('default', 0, 'layer');
+  @include utilities.ai-popover-gradient('default', 0, 'layer');
 
   border: 1px solid transparent;
   box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
@@ -179,7 +179,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 }
 
 .#{$block-class}__clickable.#{$block-class}--has-slug::before {
-  @include utilities.callout-gradient('hover', 0, 'layer');
+  @include utilities.ai-popover-gradient('hover', 0, 'layer');
 
   position: absolute;
   display: block;