@carbon/ibm-products 1.31.0 → 1.32.0

package/lib/components/Datagrid/useSelectAllToggle.js

@@ -7,8 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _commonColumnIds = require("./common-column-ids");
 
 var _DatagridSelectAllWithToggle = _interopRequireDefault(require("./Datagrid/DatagridSelectAllWithToggle"));
@@ -53,12 +57,18 @@ var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(h
 
 var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
   hooks.getCellProps.push(function (props, data) {
+    var _columns$;
+
     var column = data.cell.column;
-    var DatagridPagination = data.instance.DatagridPagination;
+    var _data$instance = data.instance,
+        DatagridPagination = _data$instance.DatagridPagination,
+        columns = _data$instance.columns,
+        withStickyColumn = _data$instance.withStickyColumn;
+    var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
 
     if (column.id === _commonColumnIds.selectionColumnId && DatagridPagination) {
       return [props, {
-        className: "".concat(blockClass, "__select-all-toggle-on")
+        className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
       }];
     }
 
@@ -72,14 +82,18 @@ var Header = function Header(gridState) {
       selectAllToggle = gridState.selectAllToggle,
       getToggleAllPageRowsSelectedProps = gridState.getToggleAllPageRowsSelectedProps,
       getToggleAllRowsSelectedProps = gridState.getToggleAllRowsSelectedProps,
-      isAllRowsSelected = gridState.isAllRowsSelected;
+      isAllRowsSelected = gridState.isAllRowsSelected,
+      withStickyColumn = gridState.withStickyColumn,
+      columns = gridState.columns;
   var props = {
     tableId: tableId,
     isFetching: isFetching,
     selectAllToggle: selectAllToggle,
     getToggleAllPageRowsSelectedProps: getToggleAllPageRowsSelectedProps,
     getToggleAllRowsSelectedProps: getToggleAllRowsSelectedProps,
-    isAllRowsSelected: isAllRowsSelected
+    isAllRowsSelected: isAllRowsSelected,
+    withStickyColumn: withStickyColumn,
+    columns: columns
   };
   return /*#__PURE__*/_react.default.createElement(_DatagridSelectAllWithToggle.default, props);
 };

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

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatagridActions = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _settings = require("../../../settings");
+
+var _ButtonMenu = require("../../ButtonMenu");
+
+/**
+ * Copyright IBM Corp. 2020, 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, "--datagrid");
+
+var DatagridActions = function DatagridActions(datagridState) {
+  var selectedFlatRows = datagridState.selectedFlatRows,
+      setGlobalFilter = datagridState.setGlobalFilter,
+      CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
+      RowSizeDropdown = datagridState.RowSizeDropdown,
+      rowSizeDropdownProps = datagridState.rowSizeDropdownProps,
+      useDenseHeader = datagridState.useDenseHeader;
+
+  var downloadCsv = function downloadCsv() {
+    alert('Downloading...');
+  };
+
+  var TableToolbarContent = _carbonComponentsReact.DataTable.TableToolbarContent,
+      TableToolbarSearch = _carbonComponentsReact.DataTable.TableToolbarSearch;
+
+  var refreshColumns = function refreshColumns() {
+    alert('refreshing...');
+  };
+
+  var leftPanelClick = function leftPanelClick() {
+    alert('open/close left panel...');
+  };
+
+  var searchForAColumn = 'Search';
+  var isNothingSelected = selectedFlatRows.length === 0;
+  var style = {
+    'button:nth-child(1) > span:nth-child(1)': {
+      bottom: '-37px'
+    }
+  };
+  return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react.default.createElement(TableToolbarContent, {
+    size: "sm"
+  }, /*#__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
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _iconsReact.Filter16,
+    iconDescription: 'Left panel',
+    onClick: leftPanelClick
+  })), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
+    style: style,
+    className: "".concat(blockClass, "__toolbar-divider")
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    renderIcon: _iconsReact.Add16,
+    iconDescription: 'Action'
+  }, "Ghost button")), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _iconsReact.Filter16,
+    iconDescription: 'Left panel',
+    onClick: leftPanelClick
+  }), /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
+    size: "xl",
+    id: "columnSearch",
+    persistent: true,
+    placeHolderText: searchForAColumn,
+    onChange: function onChange(e) {
+      return setGlobalFilter(e.target.value);
+    }
+  }), /*#__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")
+  })))));
+};
+
+exports.DatagridActions = DatagridActions;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatagridPagination = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+/* eslint-disable react/prop-types */
+
+/**
+ * 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 DatagridPagination = function DatagridPagination(_ref) {
+  var state = _ref.state,
+      setPageSize = _ref.setPageSize,
+      gotoPage = _ref.gotoPage,
+      rows = _ref.rows;
+
+  var updatePagination = function updatePagination(_ref2) {
+    var page = _ref2.page,
+        pageSize = _ref2.pageSize;
+    console.log(state);
+    setPageSize(pageSize);
+    gotoPage(page - 1); // Carbon is non-zero-based
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Pagination, {
+    page: state.pageIndex + 1 // react-table is zero-based
+    ,
+    pageSize: state.pageSize,
+    pageSizes: state.pageSizes || [10, 20, 30, 40, 50],
+    totalItems: rows.length,
+    onChange: updatePagination
+  });
+};
+
+exports.DatagridPagination = DatagridPagination;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+/* eslint-disable react/prop-types */
+
+/**
+ * Copyright IBM Corp. 2020, 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 Wrapper = function Wrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100vh',
+      width: '100%',
+      padding: '1rem',
+      margin: '0',
+      zIndex: '0'
+    }
+  }, children);
+};
+
+exports.Wrapper = Wrapper;

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

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ARG_TYPES = 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.
+ */
+var ARG_TYPES = {
+  gridTitle: {
+    name: 'gridTitle',
+    control: 'text',
+    description: 'This sets the title text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  gridDescription: {
+    name: 'gridDescription',
+    control: 'text',
+    description: 'This sets the description text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateTitle: {
+    name: 'emptyStateTitle',
+    control: 'text',
+    description: 'This sets the empty state title text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateDescription: {
+    name: 'emptyStateDescription',
+    control: 'text',
+    description: 'This sets the empty state description text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateSize: {
+    control: 'select',
+    options: ['sm', 'lg']
+  },
+  useDenseHeader: {
+    control: {
+      type: 'radio'
+    },
+    options: [true, false],
+    description: 'This sets the dense header option for the Datagrid component. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowSize: {
+    control: 'select',
+    options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    description: 'This sets the height for each row of the Datagrid component. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowSizes: {
+    control: 'object',
+    description: 'This array of objects specifies the different row size options that will render from the settings icon in the table actions. _This value is set/passed inside of the `datagridState` object._'
+  },
+  onRowSizeChange: {
+    description: 'Callback function that is called on row size changes. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowActions: {
+    control: 'object',
+    description: 'This array of objects renders the action buttons for each row in the Datagrid. _This value is set/passed inside of the `datagridState` object._',
+    action: 'Row action onClick'
+  },
+  batchActions: {
+    control: {
+      type: 'radio'
+    },
+    options: [true, false],
+    description: 'This will allow the Datagrid component to use batch actions. _This value is set/passed inside of the `datagridState` object._'
+  },
+  expandedContentHeight: {
+    control: {
+      type: 'number'
+    },
+    description: 'This value controls the height of the expanded content area. _This value is set/passed inside of the `datagridState` object._'
+  }
+};
+exports.ARG_TYPES = ARG_TYPES;

package/lib/global/js/utils/story-helper.js

@@ -46,7 +46,11 @@ var getStoryTitle = function getStoryTitle(componentName) {
 
 exports.getStoryTitle = getStoryTitle;
 
-var getStoryId = function getStoryId(componentName, scenario) {
+var getStoryId = function getStoryId(componentName, scenario, subdirectory) {
+  if (subdirectory) {
+    return "".concat((0, _csf.sanitize)(getStoryTitle(componentName)), "-").concat((0, _csf.sanitize)(subdirectory), "--").concat(scenario);
+  }
+
   return "".concat((0, _csf.sanitize)(getStoryTitle(componentName)), "--").concat(scenario);
 };
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,5 +93,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "4694f431eeac26bb0787857b39aaa347edddc212"
+  "gitHead": "07980288bb0aeea68a7b884846fb675e9bba82bd"
 }

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

@@ -275,10 +275,6 @@
   flex: 1 1 auto;
 }
 
-.#{$block-class}__with-pagination table tr:last-of-type > td {
-  border-bottom: none;
-}
-
 .#{$block-class}__resizer {
   position: absolute;
   z-index: 1;

package/scss/components/Datagrid/styles/_useActionsColumn.scss

@@ -22,3 +22,15 @@
 .#{$block-class}__actions-column-loading {
   margin-bottom: $spacing-03;
 }
+
+.#{$block-class} .#{$block-class}__disabled-row-action-button {
+  cursor: not-allowed;
+}
+
+.#{$block-class} .#{$block-class}__disabled-row-action {
+  pointer-events: none;
+}
+
+.#{$block-class} .#{$block-class}__disabled-row-action svg {
+  fill: $disabled-03;
+}

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -5,3 +5,33 @@
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
+
+@import './variables';
+
+@mixin shared-pseudo-styles() {
+  height: 1px;
+  background-color: $ui-03;
+  content: '';
+}
+
+.#{$block-class} .#{$block-class}__expanded-row-content {
+  position: relative;
+  padding: $spacing-05 $spacing-05 $spacing-06 $spacing-09;
+}
+
+.#{$block-class} .#{$block-class}__expanded-row-content::before {
+  position: absolute;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  top: -1px;
+  right: 0;
+  width: calc(100% - #{$spacing-09});
+  @include shared-pseudo-styles();
+}
+
+.#{$block-class} .#{$block-class}__expanded-row-content::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  @include shared-pseudo-styles();
+}

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -1,7 +1,7 @@
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
-* (c) Copyright IBM Corp. 2020 - 2021
+* (c) Copyright IBM Corp. 2020 - 2022
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
@@ -15,3 +15,17 @@
     border-bottom: 1px solid $ui-03;
   }
 }
+
+.#{$block-class} .#{$block-class}__expander-icon {
+  transition: transform $duration--fast-01 motion(entrance, productive);
+}
+
+.#{$block-class} .#{$block-class}__expander-icon--open {
+  transform: rotate(90deg);
+}
+
+.#{$block-class}__expanded-row
+  .#{$block-class}__carbon-row-expanded
+  td:first-child {
+  border-bottom: none;
+}

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -58,3 +58,9 @@
   /* stylelint-disable-next-line */
   right: 6px !important; // offset the vertical scroll bar in the table body
 }
+
+.#{$block-class}__select-all-toggle-on.#{$block-class}__select-all-sticky-left {
+  position: sticky;
+  z-index: 1;
+  left: 0;
+}