@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.21

package/es/components/Datagrid/useSelectRows.js

@@ -18,11 +18,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // @flow
 import React from 'react';
 import cx from 'classnames';
-import { DataTable } from '@carbon/react';
+import { TableSelectRow } from '@carbon/react';
 import { SelectAll } from './Datagrid/DatagridSelectAll';
 import { selectionColumnId } from './common-column-ids';
 import { pkg, carbon } from '../../settings';
-var TableSelectRow = DataTable.TableSelectRow;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var useSelectRows = function useSelectRows(hooks) {
@@ -41,6 +40,11 @@ var useSelectRows = function useSelectRows(hooks) {
   };
 
   hooks.useInstance.push(useInstance);
+  hooks.useInstance.push(function (instance) {
+    Object.assign(instance, {
+      withSelectRows: true
+    });
+  });
   hooks.visibleColumns.push(function (columns) {
     return [{
       id: selectionColumnId,
@@ -66,6 +70,8 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
 };
 
 var SelectRow = function SelectRow(datagridState) {
+  var _columns$;
+
   var _datagridState$isFetc = datagridState.isFetching,
       isFetching = _datagridState$isFetc === void 0 ? false : _datagridState$isFetc,
       tableId = datagridState.tableId,
@@ -73,7 +79,9 @@ var SelectRow = function SelectRow(datagridState) {
       cell = datagridState.cell,
       radio = datagridState.radio,
       toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
-      onRadioSelect = datagridState.onRadioSelect;
+      onRadioSelect = datagridState.onRadioSelect,
+      columns = datagridState.columns,
+      withStickyColumn = datagridState.withStickyColumn;
   var selectDisabled = isFetching || row.getRowProps().selectDisabled;
 
   var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
@@ -81,6 +89,7 @@ var SelectRow = function SelectRow(datagridState) {
       selectProps = _objectWithoutProperties(_row$getToggleRowSele, _excluded);
 
   var cellProps = cell.getCellProps();
+  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/React.createElement(TableSelectRow, _extends({}, cellProps, selectProps, {
     radio: radio,
     onSelect: function onSelect(e) {
@@ -98,7 +107,7 @@ var SelectRow = function SelectRow(datagridState) {
     },
     id: "".concat(tableId, "-").concat(row.index),
     name: "".concat(tableId, "-").concat(row.index, "-name"),
-    className: cx("".concat(blockClass, "__checkbox-cell"), cellProps.className),
+    className: cx("".concat(blockClass, "__checkbox-cell"), cellProps.className, _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft)),
     ariaLabel: "".concat(tableId, "-row-").concat(row.index) // TODO: aria label should be i18n'ed
     ,
     disabled: selectDisabled

package/es/components/Datagrid/useSortableColumns.js

@@ -6,16 +6,18 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { _defineProperty(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; }
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 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.
  */
 import React from 'react';
+import cx from 'classnames';
+import { pkg, carbon } from '../../settings';
 import { Button } from '@carbon/react';
-import { ArrowUp, ArrowDown, ArrowsVertical } from '@carbon/icons-react';
+import { ArrowUp, ArrowDown, ArrowsVertical } from '@carbon/react/icons';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
 var ordering = {
   ASC: 'ASC',
   DESC: 'DESC',
@@ -69,6 +71,8 @@ var useSortableColumns = function useSortableColumns(hooks) {
       };
 
       var Header = function Header(headerProp) {
+        var _cx;
+
         return column.disableSortBy === true ? column.Header : /*#__PURE__*/React.createElement(Button, {
           onClick: function onClick() {
             return onSortClick(headerProp.column);
@@ -76,12 +80,14 @@ var useSortableColumns = function useSortableColumns(hooks) {
           kind: "ghost",
           renderIcon: function renderIcon(props) {
             return icon(headerProp.column, props);
-          }
+          },
+          className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--table-sort--desc"), headerProp.column.isSortedDesc), _defineProperty(_cx, "".concat(blockClass, "--table-sort--asc"), headerProp.column.isSortedDesc === false), _cx))
         }, column.Header);
       };
 
       return _objectSpread(_objectSpread({}, column), {}, {
-        Header: Header
+        Header: Header,
+        minWidth: column.disableSortBy === true ? 0 : 90
       });
     });
     return _toConsumableArray(sortableColumns);

package/es/components/Datagrid/useStickyColumn.js

@@ -17,6 +17,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
+var leftStickyStyleClassPrefix = "".concat(blockClass, "__left-sticky-column");
 var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
 
 var useStickyColumn = function useStickyColumn(hooks) {
@@ -144,6 +145,16 @@ var changeProps = function changeProps(elementName, headerCellRef, props, data)
     })];
   }
 
+  if (column.sticky === 'left') {
+    var _data$instance, _cx2;
+
+    return [props, _objectSpread({
+      className: cx((_cx2 = {}, _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true), _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), data === null || data === void 0 ? void 0 : (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows), _cx2))
+    }, headerCellRef && {
+      ref: headerCellRef
+    })];
+  }
+
   return [props];
 };
 

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

@@ -0,0 +1,249 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+
+/**
+ * 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.
+ */
+import React, { useLayoutEffect, useState, useContext } from 'react';
+import { TableToolbarContent, TableToolbarSearch, Button, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalHeader, ModalFooter, Dropdown } from '@carbon/react';
+import { Download, Add, Restart, ChevronDown, Filter } from '@carbon/react/icons';
+import { action } from '@storybook/addon-actions';
+import { pkg } from '../../../settings';
+import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
+import { FilterContext } from '../Datagrid/addons/Filtering';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export var DatagridActions = function DatagridActions(datagridState) {
+  var _useContext = useContext(FilterContext),
+      setPanelOpen = _useContext.setPanelOpen;
+
+  var selectedFlatRows = datagridState.selectedFlatRows,
+      setGlobalFilter = datagridState.setGlobalFilter,
+      CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
+      RowSizeDropdown = datagridState.RowSizeDropdown,
+      rowSizeDropdownProps = datagridState.rowSizeDropdownProps,
+      useDenseHeader = datagridState.useDenseHeader,
+      filterProps = datagridState.filterProps,
+      getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
+      FilterFlyout = datagridState.FilterFlyout,
+      data = datagridState.data;
+
+  var downloadCsv = function downloadCsv() {
+    alert('Downloading...');
+  };
+
+  var refreshColumns = function refreshColumns() {
+    alert('refreshing...');
+  };
+
+  var searchForAColumn = 'Search';
+  var isNothingSelected = selectedFlatRows.length === 0;
+  var style = {
+    'button:nthChild(1) > span:nthChild(1)': {
+      bottom: '-37px'
+    }
+  };
+
+  var renderFilterFlyout = function renderFilterFlyout() {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/React.createElement(FilterFlyout, getFilterFlyoutProps());
+  };
+
+  var renderFilterPanelButton = function renderFilterPanelButton() {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      hasIconOnly: true,
+      tooltipPosition: "bottom",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(Filter, _extends({
+          size: 16
+        }, props));
+      },
+      iconDescription: filterProps.panelIconDescription,
+      className: "".concat(blockClass, "-filter-panel-open-button"),
+      onClick: function onClick() {
+        return setPanelOpen(function (open) {
+          return !open;
+        });
+      },
+      disabled: data.length === 0,
+      tooltipAlignment: "start"
+    });
+  };
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      modalOpen = _useState2[0],
+      setModalOpen = _useState2[1];
+
+  var _useState3 = useState(window.innerWidth),
+      _useState4 = _slicedToArray(_useState3, 2),
+      size = _useState4[0],
+      setSize = _useState4[1];
+
+  useLayoutEffect(function () {
+    function updateSize() {
+      setSize(window.innerWidth);
+    }
+
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
+  var mobileToolbar = size < 672 ? true : false;
+  var items = ['Option 1', 'Option 2', 'Option 3'];
+  return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/React.createElement(TableToolbarContent, {
+    size: "sm"
+  }, !mobileToolbar ? /*#__PURE__*/React.createElement(React.Fragment, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Download,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), renderFilterFlyout(), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: "".concat(blockClass, "__toolbar-divider")
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    renderIcon: Add,
+    iconDescription: 'Action'
+  }, "Ghost button"))) : /*#__PURE__*/React.createElement(OverflowMenu, {
+    ariaLabel: "Tools",
+    size: "md",
+    flipped: true
+  }, /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Filter",
+    hasDivider: true,
+    requireTitle: true,
+    onClick: function onClick() {
+      return setModalOpen(true);
+    }
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Export",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Settings",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Import items",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Create",
+    hasDivider: true,
+    requireTitle: true
+  }))) : !mobileToolbar ? /*#__PURE__*/React.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement(TableToolbarSearch, {
+    size: "xl",
+    id: "columnSearch",
+    persistent: true,
+    placeHolderText: searchForAColumn,
+    onChange: function onChange(e) {
+      return setGlobalFilter(e.target.value);
+    }
+  }), renderFilterFlyout(), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Restart,
+    iconDescription: 'Refresh',
+    onClick: refreshColumns
+  })), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Download,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement(ButtonMenu, {
+    label: "Primary button",
+    renderIcon: ChevronDown,
+    menuOptionsClass: "".concat(blockClass, "__toolbar-options")
+  }, /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 1",
+    onClick: action("Click on ButtonMenu Option 1")
+  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 2",
+    onClick: action("Click on ButtonMenu Option 2")
+  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 3",
+    onClick: action("Click on ButtonMenu Option 3")
+  }))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement(TableToolbarSearch, {
+    size: "xl",
+    id: "columnSearch",
+    persistent: true,
+    placeHolderText: searchForAColumn,
+    onChange: function onChange(e) {
+      return setGlobalFilter(e.target.value);
+    }
+  }), renderFilterFlyout(), /*#__PURE__*/React.createElement(OverflowMenu, {
+    ariaLabel: "Tools",
+    size: "lg",
+    flipped: true,
+    renderIcon: ChevronDown,
+    className: "".concat(blockClass, "__toolbar-menu__trigger"),
+    menuOptionsClass: "".concat(blockClass, "__toolbar-options")
+  }, /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Filter",
+    hasDivider: true,
+    requireTitle: true,
+    onClick: function onClick() {
+      return setModalOpen(true);
+    }
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Export",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Settings",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Import items",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Create",
+    hasDivider: true,
+    requireTitle: true
+  })), modalOpen && /*#__PURE__*/React.createElement(ComposedModal, {
+    size: "lg",
+    open: modalOpen && modalOpen,
+    onClose: function onClose() {
+      return setModalOpen(false);
+    },
+    className: "".concat(blockClass, "__mobile-toolbar-modal")
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement("h4", null, "Filters")), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter1"
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter2"
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter3"
+  })), /*#__PURE__*/React.createElement(ModalFooter, {
+    primaryButtonText: "Apply",
+    secondaryButtonText: "Cancel"
+  }))));
+};

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

@@ -0,0 +1,33 @@
+/* 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.
+ */
+import React from 'react';
+import { Pagination } from '@carbon/react';
+export 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.createElement(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
+  });
+};

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

@@ -0,0 +1,21 @@
+/* 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.
+ */
+import React from 'react';
+export var Wrapper = function Wrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100vh',
+      width: '100%',
+      padding: '1rem',
+      margin: '0',
+      zIndex: '0'
+    }
+  }, children);
+};

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

@@ -0,0 +1,94 @@
+/**
+ * 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.
+ */
+export 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._'
+  },
+  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'
+  }
+};