@carbon/ibm-products 1.42.1 → 1.43.0

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getInitialStateFromFilters = void 0;
+var _constants = require("./constants");
 /**
  * Copyright IBM Corp. 2022, 2022
  *
@@ -13,33 +14,63 @@ exports.getInitialStateFromFilters = void 0;
 
 // This functions takes the filters passed in and makes an object to track it's state
 var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
+  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.FLYOUT;
   var initialFilterState = {};
-  filters.forEach(function (_ref) {
+  var setInitialState = function setInitialState(_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
-        };
-      });
+      initialFilterState[column] = {
+        value: props.Checkbox.map(function (_ref2) {
+          var id = _ref2.id,
+            labelText = _ref2.labelText,
+            value = _ref2.value;
+          return {
+            id: id,
+            labelText: labelText,
+            value: value,
+            selected: false
+          };
+        }),
+        type: type
+      };
     } else if (type === 'date') {
-      initialFilterState[column] = [undefined, undefined];
+      initialFilterState[column] = {
+        value: [null, null],
+        type: type
+      };
     } else if (type === 'number') {
-      initialFilterState[column] = '';
+      initialFilterState[column] = {
+        value: '',
+        type: type
+      };
     } else if (type === 'radio') {
-      initialFilterState[column] = '';
+      initialFilterState[column] = {
+        value: '',
+        type: type
+      };
     } else if (type === 'dropdown') {
-      initialFilterState[column] = '';
+      initialFilterState[column] = {
+        value: '',
+        type: type
+      };
     }
-  });
+  };
+  if (variation === _constants.FLYOUT) {
+    filters.forEach(setInitialState);
+  } else if (variation === _constants.PANEL) {
+    filters.forEach(function (_ref3) {
+      var _ref3$filters = _ref3.filters,
+        sections = _ref3$filters === void 0 ? [] : _ref3$filters;
+      sections.forEach(function (_ref4) {
+        var filter = _ref4.filter;
+        return setInitialState(filter);
+      });
+    });
+  } else {
+    console.error('No variation passed into useInitialStateFromFilters');
+  }
   return initialFilterState;
 };
 exports.getInitialStateFromFilters = getInitialStateFromFilters;

package/lib/components/Datagrid/Datagrid.stories/index.js

@@ -10,12 +10,6 @@ Object.defineProperty(exports, "CustomizeColumnStory", {
     return _CustomizeColumnStory.story;
   }
 });
-Object.defineProperty(exports, "LeftPanelStory", {
-  enumerable: true,
-  get: function get() {
-    return _LeftPanelStory.story;
-  }
-});
 Object.defineProperty(exports, "RowSizeDropdownStory", {
   enumerable: true,
   get: function get() {
@@ -37,5 +31,4 @@ Object.defineProperty(exports, "StickyActionsColumn", {
 var _CustomizeColumnStory = require("./CustomizeColumnStory");
 var _StickyActionsColumnStory = _interopRequireDefault(require("./StickyActionsColumnStory"));
 var _RowSizeDropdownStory = require("./RowSizeDropdownStory");
-var _LeftPanelStory = require("./LeftPanelStory");
 var _SelectAllWithToggleStory = require("./SelectAllWithToggleStory");

package/lib/components/Datagrid/useFiltering.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _Filtering = require("./Datagrid/addons/Filtering");
+var _constants = require("./Datagrid/addons/Filtering/constants");
 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) {
@@ -61,14 +62,20 @@ var useFiltering = function useFiltering(hooks) {
   hooks.useInstance.push(function (instance) {
     var filterProps = instance.filterProps,
       setAllFilters = instance.setAllFilters,
-      headers = instance.headers;
+      setFilter = instance.setFilter,
+      headers = instance.headers,
+      data = instance.data;
     var defaultProps = {
-      variation: 'flyout'
+      variation: 'flyout',
+      updateMethod: _constants.BATCH,
+      panelIconDescription: 'Open filter panel'
     };
     var getFilterFlyoutProps = function getFilterFlyoutProps() {
       return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
         setAllFilters: setAllFilters,
-        headers: headers
+        setFilter: setFilter,
+        headers: headers,
+        data: data
       });
     };
     Object.assign(instance, {

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

@@ -13,6 +13,7 @@ var _iconsReact = require("@carbon/icons-react");
 var _addonActions = require("@storybook/addon-actions");
 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; }
 /**
@@ -24,6 +25,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var DatagridActions = function DatagridActions(datagridState) {
+  var _useContext = (0, _react.useContext)(_Filtering.FilterContext),
+    setLeftPanelOpen = _useContext.setLeftPanelOpen;
   var selectedFlatRows = datagridState.selectedFlatRows,
     setGlobalFilter = datagridState.setGlobalFilter,
     CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
@@ -32,6 +35,7 @@ var DatagridActions = function DatagridActions(datagridState) {
     useDenseHeader = datagridState.useDenseHeader,
     filterProps = datagridState.filterProps,
     getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
+    data = datagridState.data,
     FilterFlyout = datagridState.FilterFlyout;
   var downloadCsv = function downloadCsv() {
     alert('Downloading...');
@@ -55,6 +59,23 @@ var DatagridActions = function DatagridActions(datagridState) {
   var renderFilterFlyout = function renderFilterFlyout() {
     return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react.default.createElement(FilterFlyout, getFilterFlyoutProps());
   };
+  var renderFilterPanelButton = function renderFilterPanelButton() {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+      kind: "ghost",
+      hasIconOnly: true,
+      tooltipPosition: "bottom",
+      renderIcon: _iconsReact.Filter16,
+      iconDescription: filterProps.panelIconDescription,
+      className: "".concat(blockClass, "-filter-panel-open-button"),
+      onClick: function onClick() {
+        return setLeftPanelOpen(function (open) {
+          return !open;
+        });
+      },
+      disabled: data.length === 0,
+      tooltipAlignment: "start"
+    });
+  };
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     modalOpen = _useState2[0],
@@ -76,7 +97,7 @@ var DatagridActions = function DatagridActions(datagridState) {
   var items = ['Option 1', 'Option 2', 'Option 3'];
   return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react.default.createElement(TableToolbarContent, {
     size: "sm"
-  }, !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement("div", {
     style: style
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     kind: "ghost",
@@ -121,7 +142,7 @@ var DatagridActions = function DatagridActions(datagridState) {
     itemText: "Create",
     hasDivider: true,
     requireTitle: true
-  }))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
+  }))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -163,7 +184,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, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -171,7 +192,39 @@ var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+  }), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _iconsReact.Restart16,
+    iconDescription: 'Refresh',
+    onClick: refreshColumns
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _iconsReact.Download16,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
+    label: "Primary button",
+    renderIcon: _iconsReact.Add16
+  }, /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+    itemText: "Option 1",
+    onClick: (0, _addonActions.action)("Click on ButtonMenu Option 1")
+  }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+    itemText: "Option 2",
+    onClick: (0, _addonActions.action)("Click on ButtonMenu Option 2")
+  }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+    itemText: "Option 3",
+    onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
+  })), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
     ariaLabel: "Tools",
     size: "lg",
     flipped: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.42.1",
+  "version": "1.43.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -95,5 +95,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "6947835ada46f30aaba0a0ee110e08658ed74793"
+  "gitHead": "5227b2c4f26128f471144febc117c9e8cb607c7a"
 }

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

@@ -368,12 +368,6 @@
   flex-direction: row;
 }
 
-.#{$block-class}__datagridLeftPanel {
-  display: flex;
-  width: 388px; // as per UX specs.
-  background-color: $ui-01;
-}
-
 .#{$block-class}__leftPanel-position {
   display: inherit;
 }
@@ -381,38 +375,44 @@
 .#{$block-class}__datagridWithPanel {
   position: relative;
   display: flex;
-  width: 100%;
   height: 100%;
   flex-direction: column;
 
   .#{$block-class}__grid-container {
     display: flex;
-    overflow: hidden;
+    overflow: visible;
     flex-direction: column;
   }
 
-  .#{$block-class}__table-toolbar {
-    width: 100%;
-  }
-
-  .#{$block-class}__datagridLeftPanel {
-    flex: 0 0 auto;
-  }
-
   .#{$carbon-prefix}--data-table-content {
     flex: 1 1 0%;
   }
+
   .#{$block-class}__table-container {
+    display: flex;
+    overflow: visible;
+    background-color: $ui-01;
+  }
+
+  .#{$block-class}__table-container-inner {
     overflow: hidden;
+    flex: 1;
+  }
+
+  .#{$block-class}__table-container .#{$block-class}__filter-summary {
+    border-bottom: 1px solid $ui-03;
+  }
+
+  .#{$pkg-prefix}--datagrid__table-simple {
+    height: 100%;
   }
 }
 
 .#{$block-class}__table-container {
   position: relative;
-  display: flex;
-  overflow: auto;
   width: 100%;
   max-height: 100%;
+  overflow-y: scroll;
 }
 
 .#{$block-class}__carbon-row-expanded {

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

@@ -19,13 +19,12 @@
 }
 
 .#{$block-class}__draggable-handleStyle.disabled svg {
-  fill: $disabled-02;
+  fill: $disabled-03;
 }
 
 .#{$block-class}__draggable-handleHolder {
   display: flex;
   height: $spacing-09;
-  padding-left: $spacing-05;
   border-bottom: 1px solid $layer-active;
   background-color: $layer;
 }
@@ -37,7 +36,6 @@
 .#{$block-class}__draggable-handleHolder-selected {
   display: flex;
   height: $spacing-09;
-  padding-left: $spacing-05;
   border-bottom: 1px solid $layer-active;
   background-color: $layer-selected;
 }
@@ -48,13 +46,23 @@
 
 .#{$block-class}__draggable-handleHolder-isOver {
   border: 2px dashed $focus;
-  background-color: $hover-selected-ui;
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  background-color: $blue-10;
 }
 
 .#{$block-class}__draggable-handleHolder-droppable {
   display: flex;
   width: 100%;
   align-items: center;
+  padding-left: $spacing-05;
+  /* stylelint-disable-next-line carbon/type-token-use */
+  line-height: 1; // center align text within row
+  transition-property: opacity;
+}
+
+.#{$block-class}__draggable-handleHolder-droppable.#{$block-class}__draggable-handleHolder-droppable--origin {
+  opacity: 0.5;
+  transition: opacity $duration--moderate-01 motion(entrance, productive);
 }
 
 .#{$block-class}__draggable-handleHolder-grabbed {

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

@@ -16,6 +16,7 @@
 @import './addons/CustomizeColumnsTearsheet';
 @import './addons/RowSizeDropdown';
 @import './addons/FilterFlyout';
+@import './addons/FilterPanel';
 @import './useSelectAllToggle';
 @import './useExpandedRow';
 @import './draggableElement';

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -129,7 +129,7 @@ $row-heights: (
   background-color: $hover-selected-ui;
   color: $text-01;
   .#{$block-class}__inline-edit-button-icon {
-    fill: $icon-01;
+    color: $icon-01;
   }
 }
 
@@ -137,9 +137,13 @@ $row-heights: (
   .#{$block-class}__inline-edit-button.#{$block-class}__inline-edit-button--active:not(
     [data-disabled='true']
   ) {
-  background-color: $active-ui;
-  color: $text-01;
+  background-color: $field-01;
+  color: $text-02;
   cursor: text;
+
+  .#{$block-class}__inline-edit-button-icon {
+    color: $icon-02;
+  }
 }
 
 .#{$block-class}__inline-edit--outer-cell-button

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

@@ -23,7 +23,11 @@
 .#{$block-class}__customize-columns-checkbox-wrapper {
   display: flex;
   justify-content: center;
-  padding-left: $spacing-03;
+  padding-left: $spacing-02;
+}
+
+.#{$block-class}__customize-columns-column-list
+  .#{$block-class}__customize-columns-checkbox-wrapper.#{$carbon-prefix}--form-item {
   margin-bottom: 0;
 }
 

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

@@ -0,0 +1,123 @@
+/*
+* 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.
+*/
+
+@import '../variables';
+
+.#{$block-class}-filter-panel__container {
+  position: relative;
+  width: rem(320px);
+  height: clamp(var(--filter-panel-min-height), 100%, 100vh);
+  border-top: 1px $ui-03 solid;
+  background-color: $ui-01;
+}
+
+.#{$block-class}-filter-panel--open {
+  border-right: 1px $ui-03 solid;
+}
+
+.#{$block-class}-filter-panel__container::before {
+  position: absolute;
+  top: -1px; // stylelint-disable-line
+  left: 0;
+  display: block;
+  width: rem(47px); // size of filter panel button
+  height: 1px;
+  background-color: $ui-01;
+  content: '';
+}
+
+.#{$block-class}-filter-panel__inner-container {
+  position: relative;
+  z-index: 0;
+  overflow: auto;
+  padding: 0 $spacing-05;
+  overscroll-behavior: contain;
+}
+
+// Adds extra space to the last category so the scroll shows everything visible when you reach the bottom
+.#{$block-class}-filter-panel__inner-container
+  .#{$block-class}-filter-panel__category:last-of-type {
+  padding-bottom: $spacing-11;
+}
+
+.#{$block-class}-filter-panel {
+  position: sticky;
+  top: 0;
+}
+
+.#{$block-class}-filter-panel__heading {
+  display: flex;
+  justify-content: space-between;
+  padding-left: $spacing-05;
+  border-bottom: 1px solid transparent;
+}
+
+.#{$block-class}-filter-panel__heading--with-divider {
+  border-bottom: 1px solid $ui-03;
+}
+
+.#{$block-class}-filter-panel__title {
+  padding: $spacing-05 0;
+  @include carbon--type-style('productive-heading-02');
+}
+
+.#{$block-class}-filter-panel__search {
+  padding: 0 $spacing-05 $spacing-06;
+}
+
+.#{$block-class}-filter-panel__category-title {
+  @include carbon--type-style('heading-01');
+
+  margin-bottom: $spacing-05;
+  color: $text-02;
+}
+
+.#{$block-class}-filter-panel__category {
+  padding-bottom: $spacing-06;
+}
+
+// This selects all filter elements inside of categories and give them 16px margin bottom
+.#{$block-class}-filter-panel__category
+  > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
+  margin-bottom: $spacing-05;
+}
+
+.#{$block-class}-filter-panel__action-set {
+  position: sticky;
+  z-index: 1; // To layer action set on top of content behind when sticky
+  bottom: 0;
+  height: rem(64px);
+  margin-top: auto;
+}
+
+// Overrides
+.#{$block-class}-filter-panel__container .#{$carbon-prefix}--accordion__title {
+  margin: 0;
+}
+
+.#{$block-class}-filter-panel__container .#{$carbon-prefix}--accordion__arrow {
+  margin: $spacing-01 0 0;
+}
+
+.#{$block-class}-filter-panel__container
+  .#{$carbon-prefix}--accordion__content {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+// Makes sure every child (filter) inside the accordion content has space in between
+.#{$block-class}-filter-panel__container
+  .#{$carbon-prefix}--accordion__content
+  > *:not(:last-child) {
+  margin-bottom: $spacing-05;
+}
+
+.#{$carbon-prefix}--btn.c4p--datagrid-filter-panel-open-button {
+  border-right: 1px solid $ui-03;
+  border-bottom: none;
+}

package/scss/components/FilterSummary/_filter-summary.scss

@@ -11,6 +11,7 @@ $block-class: #{$pkg-prefix}--filter-summary;
 .#{$block-class} {
   display: flex;
   width: 100%;
+  height: rem(48px);
   align-items: center;
   padding: $spacing-03;
   border-top: 1px solid $ui-03;

package/es/components/Datagrid/Datagrid.stories/LeftPanelStory.js

@@ -1,6 +0,0 @@
-var notes = "\n# Access left side panel in data grid\nAllow users to access left panel in datagrid.\n\n## Documentation:\n\n- (required) Implement `options.leftPanel` which has the following props\n  - `options.leftPanel.isOpen` value is toggled by the Button onClick from DatagridActions\n  - render `options.leftPanel.panelContent` inside the panel container of data grid when isOpen is true\n\ncode snippet:\n\n```js\nconst columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(10));\n  const [isPanelOpen, setIsPanelOpen] = useState(false);\n  const DatagridActions = (datagridState) => (\n    <TableToolbarContent>\n      <Button onClick={() => { setIsPanelOpen(!isPanelOpen); }}>Click to toggle left panel</Button>\n      <TableToolbarSearch ... />\n      <Button ... />\n      <datagridState.CustomizeColumnsButton />\n    </TableToolbarContent>\n  )\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      leftPanel: {\n        isOpen: isPanelOpen,\n        panelContent: <div>Panel content will go here along with any button interactions</div>,\n      },\n      initialState: {\n        hiddenColumns: ['age'],\n        columnOrder: [],\n      },\n      customizeColumnsProps: {\n        onSaveColumnPrefs: (newColDefs) => {\n          console.log(newColDefs);\n        },\n      },\n      DatagridActions,\n    },\n  );\n\nreturn (\n  <Wrapper>\n    <IntlProvider locale=\"en\">\n      <Datagrid {...datagridState} />\n    </IntlProvider>\n  </Wrapper>\n);\n```\n";
-export var story = {
-  parameters: {
-    notes: notes
-  }
-};

package/lib/components/Datagrid/Datagrid.stories/LeftPanelStory.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.story = void 0;
-var notes = "\n# Access left side panel in data grid\nAllow users to access left panel in datagrid.\n\n## Documentation:\n\n- (required) Implement `options.leftPanel` which has the following props\n  - `options.leftPanel.isOpen` value is toggled by the Button onClick from DatagridActions\n  - render `options.leftPanel.panelContent` inside the panel container of data grid when isOpen is true\n\ncode snippet:\n\n```js\nconst columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(10));\n  const [isPanelOpen, setIsPanelOpen] = useState(false);\n  const DatagridActions = (datagridState) => (\n    <TableToolbarContent>\n      <Button onClick={() => { setIsPanelOpen(!isPanelOpen); }}>Click to toggle left panel</Button>\n      <TableToolbarSearch ... />\n      <Button ... />\n      <datagridState.CustomizeColumnsButton />\n    </TableToolbarContent>\n  )\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      leftPanel: {\n        isOpen: isPanelOpen,\n        panelContent: <div>Panel content will go here along with any button interactions</div>,\n      },\n      initialState: {\n        hiddenColumns: ['age'],\n        columnOrder: [],\n      },\n      customizeColumnsProps: {\n        onSaveColumnPrefs: (newColDefs) => {\n          console.log(newColDefs);\n        },\n      },\n      DatagridActions,\n    },\n  );\n\nreturn (\n  <Wrapper>\n    <IntlProvider locale=\"en\">\n      <Datagrid {...datagridState} />\n    </IntlProvider>\n  </Wrapper>\n);\n```\n";
-var story = {
-  parameters: {
-    notes: notes
-  }
-};
-exports.story = story;