@carbon/ibm-products 1.35.1 → 1.36.0

package/es/global/js/hooks/useControllableState.js

@@ -0,0 +1,74 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import pconsole from '../utils/pconsole';
+
+/**
+ * This custom hook simplifies the behavior of a component if it has state that
+ * can be both controlled and uncontrolled. It functions identical to a
+ * useState() hook and provides [state, setState] for you to use. You can use
+ * the `onChange` argument to allow updates to the `state` to be communicated to
+ * owners of controlled components.
+ *
+ * Note: this hook will warn if a component is switching from controlled to
+ * uncontrolled, or vice-versa.
+ *
+ * @param {object} config
+ * @param {string} config.name - the name of the custom component
+ * @param {any} config.defaultValue - the default value used for the state. This will be
+ * the fallback value used if `value` is not defined.
+ * @param {Function} config.onChange - an optional function that is called when
+ * the value of the state changes. This is useful for communicating to parents of
+ * controlled components that the value is requesting to be changed.
+ * @param {any} config.value - a controlled value. Omitting this means that the state is
+ * uncontrolled
+ * @returns {[any, Function]}
+ */
+export function useControllableState(_ref) {
+  var defaultValue = _ref.defaultValue,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? 'custom' : _ref$name,
+    onChange = _ref.onChange,
+    value = _ref.value;
+  var _useState = useState(value !== null && value !== void 0 ? value : defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    internalSetState = _useState2[1];
+  var controlled = useRef(null);
+  if (controlled.current === null) {
+    controlled.current = value !== undefined;
+  }
+  function setState(stateOrUpdater) {
+    var value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
+    if (controlled.current === false) {
+      internalSetState(value);
+    }
+    if (onChange) {
+      onChange(value);
+    }
+  }
+  useEffect(function () {
+    var controlledValue = value !== undefined;
+    // Uncontrolled -> Controlled
+    // If the component prop is uncontrolled, the prop value should be undefined
+    if (controlled.current === false && controlledValue) {
+      pconsole.warn("A component is changing an uncontrolled %s component to be controlled.\n          This is likely caused by the value changing to a defined value\n          from undefined. Decide between using a controlled or uncontrolled\n          value for the lifetime of the component.\n          More info: https://reactjs.org/link/controlled-components");
+    }
+
+    // Controlled -> Uncontrolled
+    // If the component prop is controlled, the prop value should be defined
+    if (controlled.current === true && !controlledValue) {
+      pconsole.warn("A component is changing a controlled %s component to be uncontrolled.\n        'This is likely caused by the value changing to an undefined value\n        'from a defined one. Decide between using a controlled or\n        'uncontrolled value for the lifetime of the component.\n        'More info: https://reactjs.org/link/controlled-components");
+    }
+  }, [name, value]);
+  if (controlled.current === true) {
+    return [value, setState];
+  }
+  return [state, setState];
+}

package/es/global/js/package-settings.js

@@ -34,6 +34,7 @@ var defaults = {
     HTTPErrorOther: true,
     ImportModal: true,
     InlineEdit: true,
+    InlineEditV1: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
     NoTagsEmptyState: true,

package/lib/components/ActionSet/ActionSet.js

@@ -14,7 +14,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../settings");
 var _propsHelper = require("../../global/js/utils/props-helper");
 var _carbonComponentsReact = require("carbon-components-react");
-var _excluded = ["className", "disabled", "kind", "label", "loading"],
+var _excluded = ["className", "disabled", "kind", "label", "loading", "isExpressive"],
   _excluded2 = ["actions", "buttonSize", "className", "size"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -24,15 +24,18 @@ var componentName = 'ActionSet';
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 var ActionSetButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _ref2;
   var className = _ref.className,
     disabled = _ref.disabled,
     kind = _ref.kind,
     label = _ref.label,
     loading = _ref.loading,
+    _ref$isExpressive = _ref.isExpressive,
+    isExpressive = _ref$isExpressive === void 0 ? true : _ref$isExpressive,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
-    isExpressive: true,
-    className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost' || kind === 'danger--ghost')]),
+    isExpressive: isExpressive,
+    className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost' || kind === 'danger--ghost'), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__action-button--expressive"), isExpressive), _ref2)]),
     disabled: disabled || loading || false,
     kind: kind,
     ref: ref

package/lib/components/AddSelect/add-select-utils.js

@@ -83,7 +83,7 @@ var getFilteredItems = function getFilteredItems(useNormalizedItems, normalizedI
     var itemIds = Object.keys(normalizedItems);
     if (searchTerm || globalFiltersApplied) {
       var results = itemIds.reduce(function (prev, cur) {
-        if (normalizedItems[cur].title.toLowerCase().includes(searchTerm)) {
+        if (normalizedItems[cur].title.toLowerCase().includes(searchTerm.toLowerCase())) {
           prev.push(normalizedItems[cur]);
         }
         return prev;
@@ -122,7 +122,7 @@ var getFilteredItems = function getFilteredItems(useNormalizedItems, normalizedI
   } else {
     if (searchTerm) {
       return items.entries.filter(function (item) {
-        return item.title.toLowerCase().includes(searchTerm);
+        return item.title.toLowerCase().includes(searchTerm.toLowerCase());
       });
     }
     return items.entries;

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

@@ -109,7 +109,7 @@ var DatagridContent = function DatagridContent(_ref) {
       return;
     }
     var gridElement = document.querySelector("#".concat(tableId));
-    var tableHeader = document.querySelector(".".concat(_settings.carbon.prefix, "--data-table-header"));
+    var tableHeader = gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector(".".concat(_settings.carbon.prefix, "--data-table-header"));
     gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), (0, _layout.px)(totalColumnsWidth + 32));
     if (gridActive) {
       gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), (0, _layout.px)((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -32,7 +32,7 @@ var DatagridRow = function DatagridRow(datagridState) {
   var activeCellId = state.activeCellId;
   var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
   return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
-    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
+    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
   }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {
@@ -43,7 +43,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
       hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
     }
-  }), row.cells.map(function (cell) {
+  }), row.cells.map(function (cell, index) {
     var cellProps = cell.getCellProps();
     var children = cellProps.children,
       restProps = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
@@ -55,7 +55,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       });
     }
     return /*#__PURE__*/_react.default.createElement(TableCell, (0, _extends2.default)({
-      className: "".concat(blockClass, "__cell")
+      className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
     }, restProps, {
       key: cell.column.id
     }), content);

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -41,7 +41,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     setReceivedInitialWidth = _useState6[1];
   var selectedFlatRows = datagridState.selectedFlatRows,
     toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
-    toolbarBatchActions = datagridState.toolbarBatchActions;
+    toolbarBatchActions = datagridState.toolbarBatchActions,
+    setGlobalFilter = datagridState.setGlobalFilter;
   var totalSelected = selectedFlatRows && selectedFlatRows.length;
 
   // Get initial width of batch actions container,
@@ -113,7 +114,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     shouldShowBatchActions: totalSelected > 0,
     totalSelected: totalSelected,
     onCancel: function onCancel() {
-      return toggleAllRowsSelected(false);
+      toggleAllRowsSelected(false);
+      setGlobalFilter(null);
     }
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
     if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length === 3) {

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -34,7 +34,7 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     hasIconOnly: true,
     ref: buttonRef,
     kind: "ghost",
-    tooltipPosition: "left",
+    tooltipPosition: "bottom",
     renderIcon: _iconsReact.Settings16,
     onClick: function onClick() {
       return setIsOpen(!isOpen);

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _layout = require("@carbon/layout");
 var _carbonComponentsReact = require("carbon-components-react");
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
 var _settings = require("../../../../../settings");
@@ -52,8 +53,8 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__row-size-dropdown"),
     style: {
-      top: top,
-      right: right
+      top: (0, _layout.rem)(top),
+      right: (0, _layout.rem)(right)
     },
     role: "presentation",
     onClick: function onClick(e) {
@@ -96,7 +97,7 @@ var getDropdownPosition = function getDropdownPosition(buttonEle) {
   var parent = buttonEle.parentElement;
   if (parent instanceof HTMLElement) {
     var top = buttonEle.offsetTop + buttonEle.offsetHeight;
-    var right = parent.offsetWidth - parent.offsetLeft - buttonEle.offsetLeft;
+    var right = parent.offsetWidth - (buttonEle.offsetLeft + buttonEle.offsetWidth);
     return {
       top: top,
       right: right

package/lib/components/Datagrid/useColumnOrder.js

@@ -10,5 +10,6 @@ var _reactTable = require("react-table");
  *
  * 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 _default = _reactTable.useColumnOrder;
+ */
+var _default = _reactTable.useColumnOrder;
 exports.default = _default;

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _iconsReact = require("@carbon/icons-react");
@@ -28,8 +29,12 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
       Cell: function Cell(_ref) {
         var _cx;
         var row = _ref.row;
-        return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronRight16, {
-          className: (0, _classnames.default)("".concat(blockClass, "__expander-icon"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--open"), row.isExpanded), _cx))
+        return row.canExpand && /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
+          type: "button",
+          "aria-label": "Expand current row",
+          className: (0, _classnames.default)("".concat(blockClass, "__row-expander"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--ghost"))
+        }, row.getToggleRowExpandedProps()), /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronRight16, {
+          className: (0, _classnames.default)("".concat(blockClass, "__expander-icon"), "".concat(blockClass, "__row-expander--icon"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--open"), row.isExpanded), _cx))
         }));
       },
       width: 48,

package/lib/components/Datagrid/useRowExpander.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _iconsReact = require("@carbon/icons-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _settings = require("../../settings");
 /* eslint-disable react/prop-types */
 /*
  * Licensed Materials - Property of IBM
@@ -17,13 +20,22 @@ var _iconsReact = require("@carbon/icons-react");
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var useRowExpander = function useRowExpander(hooks) {
   var visibleColumns = function visibleColumns(columns) {
     var expanderColumn = {
       id: 'expander',
       Cell: function Cell(_ref) {
         var row = _ref.row;
-        return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown16, null));
+        return row.canExpand && /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
+          type: "button",
+          "aria-label": "Expand current row",
+          className: (0, _classnames.default)("".concat(blockClass, "__row-expander"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--ghost"))
+        }, row.getToggleRowExpandedProps()), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp16, {
+          className: "".concat(blockClass, "__row-expander--icon")
+        }) : /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown16, {
+          className: "".concat(blockClass, "__row-expander--icon")
+        }));
       },
       width: 48,
       disableResizing: true,