@carbon/ibm-products 2.31.0 → 2.32.0

package/es/components/DecoratorDualButton/DecoratorDualButton.js

@@ -0,0 +1,135 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { prepareProps } from '../../global/js/utils/props-helper.js';
+import { pkg } from '../../settings.js';
+import { DecoratorBase } from '../DecoratorBase/DecoratorBase.js';
+
+var componentName = 'DecoratorDualButton';
+
+/**
+ * The DecoratorDualButton groups a key/value pair where the key and value each behave like a button.
+ */
+var DecoratorDualButton = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var validProps = prepareProps(props, ['href', 'kind', 'onClick', 'onContextMenu']);
+  return /*#__PURE__*/React__default.createElement(DecoratorBase, _extends({
+    ref: ref
+  }, validProps, {
+    kind: "dual-button"
+  }, getDevtoolsProps(componentName)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+DecoratorDualButton = pkg.checkComponentEnabled(DecoratorDualButton, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+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.
+DecoratorDualButton.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * `disabled` only applies if `kind` is "single-button" or "dual-button".
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Do not show the icon, regardless of score.
+   */
+  hideIcon: PropTypes.bool,
+  /**
+   * The label for the data.
+   */
+  label: PropTypes.string,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onClickLabel: PropTypes.func,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onClickValue: PropTypes.func,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onContextMenuLabel: PropTypes.func,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onContextMenuValue: PropTypes.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: PropTypes.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: PropTypes.arrayOf(PropTypes.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: PropTypes.func,
+  /**
+   * Styled smaller to better fit inline with text.
+   */
+  small: PropTypes.bool,
+  /**
+   * Determines the theme of the component.
+   */
+  theme: PropTypes.oneOf(['light', 'dark']),
+  /**
+   * If not defined, it will behave as `display:inline-block`.
+   */
+  truncateValue: PropTypes.oneOfType([PropTypes.oneOf(['end', 'start']), PropTypes.shape({
+    maxLength: PropTypes.number,
+    front: PropTypes.number,
+    back: PropTypes.number
+  })]),
+  /**
+   * The value of the data.
+   */
+  value: PropTypes.string.isRequired,
+  /**
+   * Overrides the default title for the Decorator's value.
+   */
+  valueTitle: PropTypes.string
+};
+
+export { DecoratorDualButton };

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

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

package/es/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/es/components/DecoratorLink/DecoratorLink.js

@@ -0,0 +1,125 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { prepareProps } from '../../global/js/utils/props-helper.js';
+import { pkg } from '../../settings.js';
+import { DecoratorBase } from '../DecoratorBase/DecoratorBase.js';
+
+var componentName = 'DecoratorLink';
+
+/**
+ * The DecoratorLink groups a key/value pair to behave like a link.
+ */
+var DecoratorLink = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var validProps = prepareProps(props, ['disabled', 'kind', 'onClickLabel', 'onClickValue', 'onContextMenuLabel', 'onContextMenuValue']);
+  return /*#__PURE__*/React__default.createElement(DecoratorBase, _extends({
+    ref: ref
+  }, validProps, {
+    kind: "link"
+  }, getDevtoolsProps(componentName)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+DecoratorLink = pkg.checkComponentEnabled(DecoratorLink, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+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.
+DecoratorLink.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Do not show the icon, regardless of score.
+   */
+  hideIcon: PropTypes.bool,
+  /**
+   * The component's URL.
+   */
+  href: PropTypes.string.isRequired,
+  /**
+   * The label for the data.
+   */
+  label: PropTypes.string,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onClick: PropTypes.func,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onContextMenu: PropTypes.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: PropTypes.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: PropTypes.arrayOf(PropTypes.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: PropTypes.func,
+  /**
+   * Styled smaller to better fit inline with text.
+   */
+  small: PropTypes.bool,
+  /**
+   * Determines the theme of the component.
+   */
+  theme: PropTypes.oneOf(['light', 'dark']),
+  /**
+   * If not defined, it will behave as `display:inline-block`.
+   */
+  truncateValue: PropTypes.oneOfType([PropTypes.oneOf(['end', 'start']), PropTypes.shape({
+    maxLength: PropTypes.number,
+    front: PropTypes.number,
+    back: PropTypes.number
+  })]),
+  /**
+   * The value of the data.
+   */
+  value: PropTypes.string.isRequired,
+  /**
+   * Overrides the default title for the Decorator's value.
+   */
+  valueTitle: PropTypes.string
+};
+
+export { DecoratorLink };

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

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

package/es/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/es/components/DecoratorSingleButton/DecoratorSingleButton.js

@@ -0,0 +1,125 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { prepareProps } from '../../global/js/utils/props-helper.js';
+import { pkg } from '../../settings.js';
+import { DecoratorBase } from '../DecoratorBase/DecoratorBase.js';
+
+var componentName = 'DecoratorSingleButton';
+
+/**
+ * The DecoratorSingleButton groups a key/value pair to behave like a button.
+ */
+var DecoratorSingleButton = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var validProps = prepareProps(props, ['href', 'kind', 'onClickLabel', 'onClickValue', 'onContextMenuLabel', 'onContextMenuValue']);
+  return /*#__PURE__*/React__default.createElement(DecoratorBase, _extends({
+    ref: ref
+  }, validProps, {
+    kind: "single-button"
+  }, getDevtoolsProps(componentName)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+DecoratorSingleButton = pkg.checkComponentEnabled(DecoratorSingleButton, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+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.
+DecoratorSingleButton.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * `disabled` only applies if `kind` is "single-button" or "dual-button".
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Do not show the icon, regardless of score.
+   */
+  hideIcon: PropTypes.bool,
+  /**
+   * The label for the data.
+   */
+  label: PropTypes.string,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onClick: PropTypes.func,
+  /**
+   * Optional callback function.
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onContextMenu: PropTypes.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: PropTypes.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: PropTypes.arrayOf(PropTypes.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: PropTypes.func,
+  /**
+   * Styled smaller to better fit inline with text.
+   */
+  small: PropTypes.bool,
+  /**
+   * Determines the theme of the component.
+   */
+  theme: PropTypes.oneOf(['light', 'dark']),
+  /**
+   * If not defined, it will behave as `display:inline-block`.
+   */
+  truncateValue: PropTypes.oneOfType([PropTypes.oneOf(['end', 'start']), PropTypes.shape({
+    maxLength: PropTypes.number,
+    front: PropTypes.number,
+    back: PropTypes.number
+  })]),
+  /**
+   * The value of the data.
+   */
+  value: PropTypes.string.isRequired,
+  /**
+   * Overrides the default title for the Decorator's value.
+   */
+  valueTitle: PropTypes.string
+};
+
+export { DecoratorSingleButton };

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

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

package/es/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/es/global/js/hooks/useFocus.js

@@ -22,8 +22,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 = useCallback(function () {
     // Selecting all focusable elements based on the above conditions

package/es/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/es/global/js/package-settings.js

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

package/es/index.js

@@ -106,6 +106,9 @@ export { InterstitialScreenView } from './components/InterstitialScreenView/Inte
 export { InterstitialScreenViewModule } from './components/InterstitialScreenViewModule/InterstitialScreenViewModule.js';
 export { DelimitedList } from './components/DelimitedList/DelimitedList.js';
 export { Decorator } from './components/Decorator/Decorator.js';
+export { DecoratorLink } from './components/DecoratorLink/DecoratorLink.js';
+export { DecoratorSingleButton } from './components/DecoratorSingleButton/DecoratorSingleButton.js';
+export { DecoratorDualButton } from './components/DecoratorDualButton/DecoratorDualButton.js';
 export { DescriptionList } from './components/DescriptionList/DescriptionList.js';
 export { FullPageError } from './components/FullPageError/FullPageError.js';
 export { SearchBar } from './components/SearchBar/SearchBar.js';

package/es/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/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -104,9 +104,12 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   }, [columnObjects]);
   var string = searchText.trim().toLowerCase();
   React.useEffect(function () {
-    setVisibleColumnsCount(getVisibleColumnsCount());
-    setTotalColumns(columnObjects.length);
-  }, [getVisibleColumnsCount, columnObjects.length]);
+    var notFilterableCount = columnObjects.filter(function (col) {
+      return !col.canFilter;
+    });
+    setVisibleColumnsCount(getVisibleColumnsCount() - notFilterableCount.length);
+    setTotalColumns(columnObjects.length - notFilterableCount.length);
+  }, [getVisibleColumnsCount, columnObjects]);
   return /*#__PURE__*/React__default["default"].createElement(TearsheetNarrow.TearsheetNarrow, {
     className: "".concat(blockClass, "__customize-columns-tearsheet"),
     open: isOpen,

package/lib/components/Decorator/Decorator.d.ts

@@ -1,5 +1,5 @@
 /**
- * The Decorator groups a key/value pair to look and behave like a single UI element.
+ * The Decorator groups a key/value pair as a single element. This component is not interactive.
  */
 export let Decorator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';