@carbon/ibm-products 1.59.1 → 1.60.0

package/lib/components/FilterSummary/FilterSummary.js

@@ -5,19 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _carbonComponentsReact = require("carbon-components-react");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _TagSet = require("../TagSet");
 var _settings = require("../../settings");
-/**
- * Copyright IBM Corp. 2022, 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.
- */
-
+var _excluded = ["key", "value"];
+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; }
 var blockClass = "".concat(_settings.pkg.prefix, "--filter-summary");
 var FilterSummary = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
@@ -33,11 +31,12 @@ var FilterSummary = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
-      value = _ref2.value;
-    return {
+      value = _ref2.value,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return _objectSpread(_objectSpread({}, rest), {}, {
       type: 'gray',
       label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
-    };
+    });
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,

package/lib/components/TagSet/TagSet.js

@@ -113,8 +113,7 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         }
       }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, (0, _extends2.default)({}, other, {
         // ensure id is not duplicated
-        "data-original-id": id,
-        filter: false
+        "data-original-id": id
       }), label));
     }) : []);
     setSizingTags(newSizingTags);
@@ -125,7 +124,6 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       var label = _ref3.label,
         other = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, (0, _extends2.default)({}, other, {
-        filter: false,
         key: "displayed-tag-".concat(index)
       }), label);
     }) : [];
@@ -318,12 +316,10 @@ TagSet.propTypes = {
    * with properties: **label**\* (required) to supply the tag content, and
    * other properties will be passed to the Carbon Tag component, such as
    * **type**, **disabled**, **ref**, **className** , and any other Tag props.
-   * NOTE: **filter** is not supported. Any other fields in the object will be passed through to the HTML element
-   * as HTML attributes.
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
-  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_carbonComponentsReact.Tag.propTypes, 'filter')), {}, {
+  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Tag.propTypes), {}, {
     label: _propTypes.default.string.isRequired,
     // we duplicate this prop to improve the DocGen
     type: _propTypes.default.oneOf(tagTypes)

package/lib/global/js/hooks/useWindowScroll.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useNearestScroll = useNearestScroll;
+exports.useScroll = useScroll;
 exports.useWindowScroll = useWindowScroll;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("react");
@@ -76,4 +77,9 @@ function useNearestScroll(ref, effect, deps) {
     scrollableTarget = window;
   }
   return useTargetScroll(scrollableTarget, effect, deps, throttle);
+}
+function useScroll(ref, effect, deps) {
+  var _ref$current;
+  var throttle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  return useTargetScroll((_ref$current = ref === null || ref === void 0 ? void 0 : ref.current) !== null && _ref$current !== void 0 ? _ref$current : null, effect, deps, throttle);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.59.1",
+  "version": "1.60.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,7 +48,7 @@
     "postinstall": "carbon-telemetry collect --install",
     "test": "jest --colors",
     "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
-    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
+    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor)/'"
   },
   "devDependencies": {
     "@babel/cli": "^7.20.7",
@@ -73,12 +73,13 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@carbon/telemetry": "^0.1.0",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
     "framer-motion": "^6.5.1 <7",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.11.0",
-    "react-dnd": "^15.1.2",
-    "react-dnd-html5-backend": "^15.1.3",
     "react-table": "^7.8.0",
     "react-window": "^1.8.8"
   },
@@ -96,5 +97,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "042f216cbff8ac90a8b56c85e273baa3fcfb3c74"
+  "gitHead": "60db5711e16835785348a1fc148a7c346bad5bde"
 }

package/scss/components/Datagrid/_datagrid.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// 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.

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

@@ -11,7 +11,6 @@
   display: flex;
   align-items: center;
   margin-right: $spacing-03;
-  cursor: grab;
 }
 
 .#{$block-class}__draggable-handleStyle.disabled {
@@ -22,32 +21,56 @@
   fill: $disabled-03;
 }
 
+.#{$block-class}__draggable-underlay {
+  position: absolute;
+  width: 100%;
+}
+
+.#{$block-class}__draggable-underlay-item {
+  // must match draggable item size
+  width: 100%;
+  height: $spacing-09;
+  border: 2px dashed $focus;
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  background-color: $blue-10; // not good in dark mode
+}
+
 .#{$block-class}__draggable-handleHolder {
+  position: relative;
   display: flex;
   height: $spacing-09;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer;
+  border-bottom: 1px solid $active-ui;
+  background-color: $ui-01;
+  cursor: grab;
 }
 
 .#{$block-class}__draggable-handleHolder:hover {
-  background-color: $layer-hover;
+  background-color: $hover-ui;
 }
 
-.#{$block-class}__draggable-handleHolder-selected {
-  display: flex;
-  height: $spacing-09;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer-selected;
+.#{$block-class}__draggable-handleHolder:focus {
+  box-shadow: inset 0 0 0 1px $focus;
+  outline: none;
 }
 
-.#{$block-class}__draggable-handleHolder-selected:hover {
-  background-color: $hover-selected-ui;
+.#{$block-class}__draggable-handleHolder--selected {
+  background-color: $selected-ui;
 }
 
-.#{$block-class}__draggable-handleHolder-isOver {
-  border: 2px dashed $focus;
-  /* stylelint-disable-next-line carbon/theme-token-use */
-  background-color: $blue-10;
+.#{$block-class}__draggable-handleHolder--dragging {
+  z-index: 2; // raise above other items in draggable list
+  background-color: $highlight;
+  color: $text-01;
+  outline: none;
+}
+
+.#{$block-class}__draggable-handleHolder:active,
+.#{$block-class}__draggable-handleHolder--dragging {
+  cursor: grabbing;
+}
+
+.#{$block-class}__draggable-handleHolder-selected:hover {
+  background-color: $hover-selected-ui;
 }
 
 .#{$block-class}__draggable-handleHolder-droppable {
@@ -65,11 +88,6 @@
   transition: opacity $duration--moderate-01 motion(entrance, productive);
 }
 
-.#{$block-class}__draggable-handleHolder-grabbed {
-  background-color: $highlight;
-  color: $text-01;
-}
-
 .#{$block-class}__draggable-handleHolder--sticky {
   color: $disabled-03;
 }
@@ -86,3 +104,9 @@
   text-transform: none;
   white-space: nowrap;
 }
+
+.#{$block-class}__draggable-item
+  .#{$carbon-prefix}--form-item.#{$carbon-prefix}--checkbox-wrapper {
+  max-width: $spacing-06;
+  margin-bottom: 0;
+}

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss

@@ -23,7 +23,6 @@
 .#{$block-class}__customize-columns-checkbox-wrapper {
   display: flex;
   justify-content: center;
-  padding-left: $spacing-02;
 }
 
 .#{$block-class}__customize-columns-column-list