@carbon/ibm-products 2.0.0-rc.10 → 2.0.0-rc.11

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _utils = require("../utils");
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2022
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
+  var _useState = (0, _react.useState)((0, _utils.getInitialStateFromFilters)(filters)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  return [state, setState];
+};
+
+var _default = useInitialStateFromFilters;
+exports.default = _default;

package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FilterFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _FilterFlyout.default;
+  }
+});
+
+var _FilterFlyout = _interopRequireDefault(require("./FilterFlyout"));

package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInitialStateFromFilters = void 0;
+
+/**
+ * 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.
+ */
+// This functions takes the filters passed in and makes an object to track it's state
+var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
+  var initialFilterState = {};
+  filters.forEach(function (_ref) {
+    var type = _ref.type,
+        column = _ref.column,
+        props = _ref.props;
+
+    if (type === 'checkbox') {
+      initialFilterState[column] = props.Checkbox.map(function (_ref2) {
+        var id = _ref2.id,
+            labelText = _ref2.labelText,
+            value = _ref2.value;
+        return {
+          id: id,
+          labelText: labelText,
+          value: value,
+          selected: false
+        };
+      });
+    } else if (type === 'date') {
+      initialFilterState[column] = [undefined, undefined];
+    } else if (type === 'number') {
+      initialFilterState[column] = '';
+    } else if (type === 'radio') {
+      initialFilterState[column] = '';
+    } else if (type === 'dropdown') {
+      initialFilterState[column] = '';
+    }
+  });
+  return initialFilterState;
+};
+
+exports.getInitialStateFromFilters = getInitialStateFromFilters;

package/lib/components/Datagrid/index.js

@@ -59,6 +59,12 @@ Object.defineProperty(exports, "useExpandedRow", {
     return _useExpandedRow.default;
   }
 });
+Object.defineProperty(exports, "useFiltering", {
+  enumerable: true,
+  get: function get() {
+    return _useFiltering.default;
+  }
+});
 Object.defineProperty(exports, "useInfiniteScroll", {
   enumerable: true,
   get: function get() {
@@ -148,4 +154,6 @@ var _useColumnCenterAlign = _interopRequireDefault(require("./useColumnCenterAli
 
 var _useColumnOrder = _interopRequireDefault(require("./useColumnOrder"));
 
-var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
+var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
+
+var _useFiltering = _interopRequireDefault(require("./useFiltering"));

package/lib/components/Datagrid/useFiltering.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+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 useFiltering = function useFiltering(hooks) {
+  var filterTypes = (0, _react.useMemo)(function () {
+    return {
+      date: function date(rows, id, _ref) {
+        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+            startDate = _ref2[0],
+            endDate = _ref2[1];
+
+        return rows.filter(function (row) {
+          var rowValue = row.values[id];
+
+          if (rowValue.getTime() <= endDate.getTime() && rowValue.getTime() >= startDate.getTime()) {
+            // In date range
+            return true;
+          } else {
+            // Not in date range
+            return false;
+          }
+        });
+      },
+      number: function number(rows, id, value) {
+        if (value === '') {
+          return rows;
+        }
+
+        var parsedValue = parseInt(value);
+        return rows.filter(function (row) {
+          var rowValue = row.values[id];
+          return rowValue === parsedValue;
+        });
+      },
+      checkbox: function checkbox(rows, id, value) {
+        // gets all the items that are selected and returns their value
+        var selectedItems = value.filter(function (item) {
+          return item.selected;
+        }).map(function (item) {
+          return item.value;
+        }); // if the user removed all checkboxes then display all rows
+
+        if (selectedItems.length === 0) {
+          return rows;
+        }
+
+        return rows.filter(function (row) {
+          var rowValue = row.values[id];
+          return selectedItems.includes(rowValue);
+        });
+      }
+    };
+  }, []);
+  hooks.useInstance.push(function (instance) {
+    var filterProps = instance.filterProps,
+        setAllFilters = instance.setAllFilters,
+        headers = instance.headers;
+    var defaultProps = {
+      variation: 'flyout'
+    };
+
+    var getFilterFlyoutProps = function getFilterFlyoutProps() {
+      return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
+        setAllFilters: setAllFilters,
+        headers: headers
+      });
+    };
+
+    Object.assign(instance, {
+      filterProps: _objectSpread(_objectSpread({}, defaultProps), instance.filterProps),
+      filterTypes: filterTypes,
+      getFilterFlyoutProps: getFilterFlyoutProps
+    });
+  });
+};
+
+var _default = useFiltering;
+exports.default = _default;

package/lib/components/Datagrid/useParentDimensions.js

@@ -23,6 +23,7 @@ var useParentDimensions = function useParentDimensions(hooks) {
   var headRef = (0, _react.useRef)();
   var innerListRef = (0, _react.useRef)();
   var listRef = (0, _react.useRef)();
+  var gridRef = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -64,7 +65,8 @@ var useParentDimensions = function useParentDimensions(hooks) {
       headRef: headRef,
       innerListRef: innerListRef,
       handleResize: handleResize,
-      listRef: listRef
+      listRef: listRef,
+      gridRef: gridRef
     });
   };
 

package/lib/components/Datagrid/utils/DatagridActions.js

@@ -23,6 +23,8 @@ var _settings = require("../../../settings");
 
 var _ButtonMenu = require("../../ButtonMenu");
 
+var _Filtering = require("../Datagrid/addons/Filtering");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -41,7 +43,9 @@ var DatagridActions = function DatagridActions(datagridState) {
       CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
       RowSizeDropdown = datagridState.RowSizeDropdown,
       rowSizeDropdownProps = datagridState.rowSizeDropdownProps,
-      useDenseHeader = datagridState.useDenseHeader;
+      useDenseHeader = datagridState.useDenseHeader,
+      filterProps = datagridState.filterProps,
+      getFilterFlyoutProps = datagridState.getFilterFlyoutProps;
 
   var downloadCsv = function downloadCsv() {
     alert('Downloading...');
@@ -54,10 +58,6 @@ var DatagridActions = function DatagridActions(datagridState) {
     alert('refreshing...');
   };
 
-  var leftPanelClick = function leftPanelClick() {
-    alert('open/close left panel...');
-  };
-
   var searchForAColumn = 'Search';
   var isNothingSelected = selectedFlatRows.length === 0;
   var style = {
@@ -66,6 +66,10 @@ var DatagridActions = function DatagridActions(datagridState) {
     }
   };
 
+  var renderFilterFlyout = function renderFilterFlyout() {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react.default.createElement(_Filtering.FilterFlyout, getFilterFlyoutProps());
+  };
+
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       modalOpen = _useState2[0],
@@ -99,16 +103,7 @@ var DatagridActions = function DatagridActions(datagridState) {
     renderIcon: _icons.Download,
     iconDescription: 'Download CSV',
     onClick: downloadCsv
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    style: style
-  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    kind: "ghost",
-    hasIconOnly: true,
-    tooltipPosition: "bottom",
-    renderIcon: _icons.Filter,
-    iconDescription: 'Left panel',
-    onClick: leftPanelClick
-  })), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
+  })), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
     style: style,
     className: "".concat(blockClass, "__toolbar-divider")
   }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
@@ -144,14 +139,7 @@ var DatagridActions = function DatagridActions(datagridState) {
     itemText: "Create",
     hasDivider: true,
     requireTitle: true
-  }))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    kind: "ghost",
-    hasIconOnly: true,
-    tooltipPosition: "bottom",
-    renderIcon: _icons.Filter,
-    iconDescription: 'Left panel',
-    onClick: leftPanelClick
-  }), /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
+  }))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -159,7 +147,7 @@ var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
+  }), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
     style: style
   }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
@@ -191,7 +179,7 @@ var DatagridActions = function DatagridActions(datagridState) {
   }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
     itemText: "Option 3",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
-  })))) : /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
+  }))) : /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,

package/lib/components/Datagrid/utils/getArgTypes.js

@@ -92,6 +92,11 @@ var ARG_TYPES = {
   customizeColumnsProps: {
     control: 'object',
     description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
+  },
+  filterProps: {
+    name: 'Filter props',
+    control: 'object',
+    description: 'This is an object for all the props passed into the filter flyout and filter panel'
   }
 };
 exports.ARG_TYPES = ARG_TYPES;

package/lib/components/Datagrid/utils/getInlineEditColumns.js

@@ -102,8 +102,13 @@ var getInlineEditColumns = function getInlineEditColumns() {
     accessor: 'visits',
     width: 120,
     inlineEdit: {
+      validator: function validator(n) {
+        return n && n < 10;
+      },
       type: 'number',
-      inputProps: {} // These props are passed to the Carbon component used for inline editing
+      inputProps: {
+        invalidText: 'Invalid number, must be 10 or greater'
+      } // These props are passed to the Carbon component used for inline editing
 
     }
   }, {

package/lib/components/Datagrid/utils/makeData.js

@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _namor = _interopRequireDefault(require("namor"));
 
-var _StatusIcon = require("../../StatusIcon");
-
 var _getInlineEditColumns = require("./getInlineEditColumns");
 
 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; }
@@ -63,29 +61,33 @@ var range = function range(len) {
 
   return arr;
 };
+/** This function is only to create a random data point when the person joined */
+
 
 exports.range = range;
 
-var renderStatusIcon = function renderStatusIcon(statusChance) {
-  var iconProps = {
-    size: 'sm',
-    theme: 'light',
-    kind: statusChance > 0.66 ? 'critical' : statusChance > 0.33 ? 'minor-warning' : 'normal',
-    iconDescription: statusChance > 0.66 ? 'Critical' : statusChance > 0.33 ? 'Minor warning' : 'Normal'
-  };
-  return /*#__PURE__*/_react.default.createElement(_StatusIcon.StatusIcon, iconProps);
+var getRandomDateJoined = function getRandomDateJoined() {
+  return randomDate(new Date(2022, 0, 1), new Date());
+};
+
+var getPasswordStrength = function getPasswordStrength() {
+  var chance = Math.random();
+  return chance > 0.66 ? 'critical' : chance > 0.33 ? 'minor-warning' : 'normal';
 };
 
-var renderDocLink = function renderDocLink(statusChance) {
+var renderDocLink = function renderDocLink() {
+  var chance = Math.random();
   var docLinkObj = {
-    href: statusChance > 0.66 ? 'http://carbondesignsystem.com/' : statusChance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'http://carbon-for-ibm-products.netlify.app/',
-    text: statusChance > 0.66 ? 'Carbon Design System' : statusChance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
+    href: chance > 0.66 ? 'http://carbondesignsystem.com/' : chance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'http://carbon-for-ibm-products.netlify.app/',
+    text: chance > 0.66 ? 'Carbon Design System' : chance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
   };
   return docLinkObj;
 };
 
 var newPerson = function newPerson() {
   var statusChance = Math.random();
+  var roleChance = Math.random();
+  var activeChance = Math.random();
   var initialChartTypeIndex = getRandomInteger(0, 2);
   var activeSinceDate = new Date();
   var yesterdayDate = new Date();
@@ -104,6 +106,9 @@ var newPerson = function newPerson() {
     age: Math.floor(Math.random() * 30),
     visits: Math.floor(Math.random() * 100),
     progress: Math.floor(Math.random() * 100),
+    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
+    role: roleChance > 0.66 ? 'developer' : roleChance > 0.33 ? 'designer' : 'researcher',
+    joined: getRandomDateJoined(),
     someone1: _namor.default.generate({
       words: 1,
       numbers: 0
@@ -184,12 +189,11 @@ var newPerson = function newPerson() {
       words: 1,
       numbers: 0
     }),
-    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
     chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
-    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
+    activeSince: activeChance > 0.66 ? activeSinceDate : activeChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
     bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
-    status_icon: renderStatusIcon(statusChance),
-    doc_link: renderDocLink(statusChance)
+    passwordStrength: getPasswordStrength(),
+    doc_link: renderDocLink()
   };
 };
 
@@ -210,4 +214,8 @@ var newPersonWithTwoLines = function newPersonWithTwoLines() {
   };
 };
 
-exports.newPersonWithTwoLines = newPersonWithTwoLines;
+exports.newPersonWithTwoLines = newPersonWithTwoLines;
+
+var randomDate = function randomDate(start, end) {
+  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+};

package/lib/components/FilterSummary/FilterSummary.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("@carbon/react");
+
+var _react2 = _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 blockClass = "".concat(_settings.pkg.prefix, "--filter-summary");
+
+var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$clearFiltersText = _ref.clearFiltersText,
+      clearFiltersText = _ref$clearFiltersText === void 0 ? 'Clear filters' : _ref$clearFiltersText,
+      _ref$clearFilters = _ref.clearFilters,
+      clearFilters = _ref$clearFilters === void 0 ? function () {} : _ref$clearFilters,
+      _ref$filters = _ref.filters,
+      filters = _ref$filters === void 0 ? [] : _ref$filters;
+  var tagFilters = filters.map(function (_ref2) {
+    var key = _ref2.key,
+        value = _ref2.value;
+    return {
+      type: 'gray',
+      label: "".concat(key, ": ").concat(value)
+    };
+  });
+  return /*#__PURE__*/_react2.default.createElement("div", {
+    ref: ref,
+    className: (0, _classnames.default)([blockClass, className])
+  }, /*#__PURE__*/_react2.default.createElement(_TagSet.TagSet, {
+    allTagsModalSearchLabel: "Search all tags",
+    allTagsModalSearchPlaceholderText: "Search all tags",
+    allTagsModalTitle: "All tags",
+    showAllTagsLabel: "View all tags",
+    tags: tagFilters
+  }), /*#__PURE__*/_react2.default.createElement(_react.Button, {
+    kind: "ghost",
+    size: "sm",
+    onClick: clearFilters
+  }, clearFiltersText));
+});
+
+var componentName = 'FilterSummary';
+FilterSummary.displayName = componentName;
+FilterSummary.propTypes = {
+  className: _propTypes.default.string,
+  clearFilters: _propTypes.default.func.isRequired,
+  clearFiltersText: _propTypes.default.string,
+  filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
+};
+var _default = FilterSummary;
+exports.default = _default;

package/lib/components/FilterSummary/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FilterSummary", {
+  enumerable: true,
+  get: function get() {
+    return _FilterSummary.default;
+  }
+});
+
+var _FilterSummary = _interopRequireDefault(require("./FilterSummary"));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.10",
+  "version": "2.0.0-rc.11",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "f366a6fd9163f004b89aec79e0486f31a4b9a8d2"
+  "gitHead": "0ff8c3f5292f0c60f1944adfe0b428354e9d5af4"
 }

package/scss/components/Datagrid/_datagrid.scss

@@ -48,7 +48,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
 
 .#{$block-class}__datagridWrap-simple {
   display: flex;
-  overflow: hidden;
   width: 100%;
   height: 100%;
   flex-direction: column;

package/scss/components/Datagrid/_storybook-styles.scss

@@ -102,3 +102,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   .#{c4p-settings.$carbon-prefix}--dropdown__wrapper {
   margin-bottom: $spacing-07;
 }
+
+.storybook-#{$block-class}__validation-code-snippet {
+  @include type.font-family($name: mono);
+  @include type.type-style('code-01');
+
+  display: inline-block;
+  padding: 0 $spacing-03;
+  border: 2px solid transparent;
+  margin-right: $spacing-03;
+  background-color: $field-01;
+  border-radius: $spacing-02;
+}

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -485,6 +485,7 @@
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
   position: absolute;
+  top: 0;
   left: 0;
   width: $spacing-02;
   height: 100%;
@@ -541,6 +542,23 @@
   justify-content: center;
 }
 
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
+  width: 10px;
+  height: 7px;
+}
+
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-track {
+  background: $layer;
+}
+
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+}
+
+.#{$block-class}__virtualScrollContainer {
+  width: 100%;
+}
+
 .#{c4p-settings.$carbon-prefix}--body--with-modal-open
   .#{$block-class}__grid-container {
   overflow: hidden;

package/scss/components/Datagrid/styles/_index.scss

@@ -15,6 +15,7 @@
 @use './useActionsColumn';
 @use './addons/CustomizeColumnsModal';
 @use './addons/RowSizeDropdown';
+@use './addons/FilterFlyout';
 @use './useSelectAllToggle';
 @use './useExpandedRow';
 @use './draggableElement';