@carbon/ibm-products 2.0.0-rc.8 → 2.0.0

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -1,88 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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) { _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 - 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
-import React, { useEffect } from 'react';
-import { VariableSizeList } from 'react-window';
-import { DataTable } from '@carbon/react';
-import { pkg } from '../../../settings';
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var TableBody = DataTable.TableBody;
-var rowSizeMap = {
-  xs: 24,
-  sm: 32,
-  md: 40,
-  lg: 48,
-  xl: 64,
-  // TODO: deprecate the below values in next major release (v8) on carbon-components-react
-  short: 32,
-  compact: 24,
-  normal: 48,
-  tall: 64
-};
-var defaultRowHeight = rowSizeMap.lg;
-
-var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
-  var getTableBodyProps = datagridState.getTableBodyProps,
-      rows = datagridState.rows,
-      prepareRow = datagridState.prepareRow,
-      onScroll = datagridState.onScroll,
-      innerListRef = datagridState.innerListRef,
-      _datagridState$tableH = datagridState.tableHeight,
-      tableHeight = _datagridState$tableH === void 0 ? 400 : _datagridState$tableH,
-      virtualHeight = datagridState.virtualHeight,
-      listRef = datagridState.listRef,
-      rowSize = datagridState.rowSize,
-      DatagridPagination = datagridState.DatagridPagination,
-      page = datagridState.page,
-      handleResize = datagridState.handleResize,
-      withOverflowRow = datagridState.withOverflowRow;
-  useEffect(function () {
-    handleResize();
-  }, [handleResize]);
-  var rowHeight = rowSize && rowSizeMap[rowSize] || defaultRowHeight;
-
-  if (listRef && listRef.current) {
-    listRef.current.resetAfterIndex(0);
-  }
-
-  var visibleRows = DatagridPagination && page || rows;
-  return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
-    onScroll: onScroll
-  }), /*#__PURE__*/React.createElement(VariableSizeList, {
-    height: virtualHeight || tableHeight,
-    itemCount: visibleRows.length,
-    itemSize: function itemSize(index) {
-      return visibleRows[index].isExpanded ? (visibleRows[index].expandedContentHeight || 0) + rowHeight : rowHeight;
-    },
-    estimatedItemSize: rowHeight,
-    onScroll: onScroll,
-    innerRef: innerListRef,
-    ref: listRef,
-    className: "".concat(blockClass, "__virtual-scrollbar")
-  }, function (_ref) {
-    var index = _ref.index,
-        style = _ref.style;
-    var row = visibleRows[index];
-    prepareRow(row);
-    return /*#__PURE__*/React.createElement("div", {
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        overflow: withOverflowRow ? 'visible' : 'hidden'
-      })
-    }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
-      row: row
-    })));
-  }));
-};
-
-export default DatagridVirtualBody;

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -1,184 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-// @flow
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Draggable } from '@carbon/react/icons';
-import { useDrag, useDrop } from 'react-dnd';
-import cx from 'classnames';
-import { pkg } from '../../../settings';
-var useEffect = React.useEffect,
-    useRef = React.useRef,
-    useState = React.useState;
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
-
-var DraggableElement = function DraggableElement(_ref) {
-  var _cx;
-
-  var id = _ref.id,
-      index = _ref.index,
-      listData = _ref.listData,
-      children = _ref.children,
-      type = _ref.type,
-      disabled = _ref.disabled,
-      ariaLabel = _ref.ariaLabel,
-      onGrab = _ref.onGrab,
-      onArrowKeyDown = _ref.onArrowKeyDown,
-      isFocused = _ref.isFocused,
-      moveElement = _ref.moveElement,
-      selected = _ref.selected,
-      _ref$positionLabel = _ref.positionLabel,
-      positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
-      _ref$grabbedLabel = _ref.grabbedLabel,
-      grabbedLabel = _ref$grabbedLabel === void 0 ? '{itemName} grabbed.' : _ref$grabbedLabel,
-      _ref$droppedLabel = _ref.droppedLabel,
-      droppedLabel = _ref$droppedLabel === void 0 ? '{itemName} dropped.' : _ref$droppedLabel;
-  var ref = useRef();
-
-  var _useDrop = useDrop({
-    accept: DRAG_TYPE + type,
-    collect: function collect(monitor) {
-      return {
-        isOver: !!monitor.isOver()
-      };
-    },
-    drop: function drop(item) {
-      moveElement(item.index, index);
-    },
-    canDrop: function canDrop() {
-      return !disabled;
-    },
-    hover: function hover(item) {
-      var dragIndex = item.index;
-      var hoverIndex = index; // Don't replace items with themselves
-
-      if (dragIndex === hoverIndex || disabled) {
-        return;
-      }
-
-      moveElement(dragIndex, hoverIndex); // Time to actually perform the action
-      // Note: we're mutating the monitor item here!
-      // Generally it's better to avoid mutations,
-      // but it's good here for the sake of performance
-      // to avoid expensive index searches.
-      // eslint-disable-next-line no-param-reassign
-
-      item.index = hoverIndex;
-    }
-  }),
-      _useDrop2 = _slicedToArray(_useDrop, 2),
-      isOver = _useDrop2[0].isOver,
-      drop = _useDrop2[1];
-
-  var _useDrag = useDrag({
-    type: DRAG_TYPE + type,
-    item: {
-      id: id,
-      index: index
-    },
-    canDrag: function canDrag() {
-      return !disabled;
-    },
-    collect: function collect(monitor) {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    }
-  }),
-      _useDrag2 = _slicedToArray(_useDrag, 3),
-      isDragging = _useDrag2[0].isDragging,
-      drag = _useDrag2[1],
-      preview = _useDrag2[2];
-
-  useEffect(function () {
-    if (isFocused && ref && ref.current) {
-      ref.current.focus();
-    }
-  }, [isFocused]);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isGrabbed = _useState2[0],
-      setIsGrabbed = _useState2[1];
-
-  var _useState3 = useState(isFocused),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFocusedOnItem = _useState4[0],
-      setIsFocusedOnItem = _useState4[1];
-
-  drop(ref);
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: cx({
-      disabled: disabled
-    }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(Draggable, {
-    size: 16
-  })), children);
-  return /*#__PURE__*/React.createElement("li", {
-    className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
-    ref: ref,
-    "aria-selected": isFocused,
-    role: "option",
-    tabIndex: isFocused ? 0 : -1,
-    onKeyPress: function onKeyPress(e) {
-      if (e.key === ' ' && e.target === e.currentTarget && !disabled) {
-        var positionText = positionLabel.replace('{index}', index + 1).replace('{total}', listData.length);
-        var grabAriaText = (isGrabbed ? droppedLabel : grabbedLabel).replace('{itemName}', ariaLabel);
-        onGrab(grabAriaText + positionText);
-        setIsGrabbed(!isGrabbed);
-        e.preventDefault();
-      }
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        onArrowKeyDown(e, isGrabbed, index);
-      }
-    },
-    onBlur: function onBlur(e) {
-      // handle when focus move to inner elements
-      setIsFocusedOnItem(e.currentTarget === e.target);
-    },
-    onFocus: function onFocus(e) {
-      // handle when focus move to li element
-      setIsFocusedOnItem(e.currentTarget === e.target);
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(blockClass, "__shared-ui--assistive-text")
-  }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
-    ref: preview,
-    className: "${blockClass}__draggable-handleHolder-droppable"
-  }, content) : /*#__PURE__*/React.createElement("div", {
-    ref: drag,
-    "aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
-    ,
-    className: cx(_defineProperty({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
-  }, (!isOver || disabled) && content));
-};
-
-DraggableElement.propTypes = {
-  ariaLabel: PropTypes.string.isRequired,
-  children: PropTypes.element.isRequired,
-  disabled: PropTypes.bool,
-  droppedLabel: PropTypes.string,
-  grabbedLabel: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  index: PropTypes.number.isRequired,
-  isFocused: PropTypes.bool.isRequired,
-  listData: PropTypes.array.isRequired,
-  moveElement: PropTypes.func.isRequired,
-  onArrowKeyDown: PropTypes.func.isRequired,
-  onGrab: PropTypes.func.isRequired,
-  positionLabel: PropTypes.string,
-  selected: PropTypes.bool,
-  type: PropTypes.string.isRequired
-};
-export default DraggableElement;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js

@@ -1,43 +0,0 @@
-// @flow
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
-import PropTypes from 'prop-types';
-import { Search } from '@carbon/react';
-import * as React from 'react';
-import { pkg } from '../../../../../settings';
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-
-var Actions = function Actions(_ref) {
-  var searchText = _ref.searchText,
-      setSearchText = _ref.setSearchText,
-      findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-modal--actions")
-  }, /*#__PURE__*/React.createElement(Search, {
-    placeholder: findColumnPlaceholderLabel,
-    value: searchText,
-    size: "sm",
-    labelText: findColumnPlaceholderLabel,
-    onChange: function onChange(e) {
-      // TODO: is it performant?
-      setSearchText(e.target.value);
-    }
-  }));
-};
-
-Actions.propTypes = {
-  columns: PropTypes.array.isRequired,
-  findColumnPlaceholderLabel: PropTypes.string,
-  originalColumnDefinitions: PropTypes.array.isRequired,
-  resetToDefaultLabel: PropTypes.string,
-  searchText: PropTypes.string.isRequired,
-  setColumnsObject: PropTypes.func.isRequired,
-  setSearchText: PropTypes.func.isRequired
-};
-export default Actions;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -1,58 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"];
-// @flow
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Column } from '@carbon/react/icons';
-import { Button } from '@carbon/react';
-import { pkg } from '../../../../../settings';
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-
-var ButtonWrapper = function ButtonWrapper(_ref) {
-  var _onClick = _ref.onClick,
-      setIsModalOpen = _ref.setIsModalOpen,
-      isModalOpen = _ref.isModalOpen,
-      _ref$iconTooltipLabel = _ref.iconTooltipLabel,
-      iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Column, _extends({
-        size: 16
-      }, props));
-    },
-    iconDescription: iconTooltipLabel,
-    tooltipPosition: "left",
-    kind: "ghost",
-    hasIconOnly: true,
-    "test-id": "".concat(blockClass, "__customize-columns-trigger"),
-    onClick: function onClick() {
-      setIsModalOpen(!isModalOpen);
-
-      if (typeof _onClick === 'function') {
-        _onClick();
-      }
-    }
-  }));
-};
-
-ButtonWrapper.defaultProps = {
-  onClick: function onClick() {}
-};
-ButtonWrapper.propTypes = {
-  iconTooltipLabel: PropTypes.string,
-  isModalOpen: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-  setIsModalOpen: PropTypes.func.isRequired
-};
-export default ButtonWrapper;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -1,166 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-// @flow
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Checkbox } from '@carbon/react';
-import update from 'immutability-helper';
-import { pkg } from '../../../../../settings';
-import DraggableElement from '../../DraggableElement';
-import { isColumnVisible } from './common';
-import cx from 'classnames';
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-
-var getNextIndex = function getNextIndex(array, currentIndex, key) {
-  var newIndex = -1;
-
-  if (key === 'ArrowUp') {
-    newIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : array.length - 1;
-  }
-
-  if (key === 'ArrowDown') {
-    newIndex = currentIndex + 1 < array.length ? currentIndex + 1 : 0;
-  }
-
-  return newIndex;
-};
-
-var Columns = function Columns(_ref) {
-  var _cx;
-
-  var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
-      filterString = _ref.filterString,
-      columns = _ref.columns,
-      setColumnsObject = _ref.setColumnsObject,
-      onSelectColumn = _ref.onSelectColumn,
-      assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
-      assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-      selectAllLabel = _ref.selectAllLabel;
-
-  var _React$useState = React.useState(''),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      ariaRegionText = _React$useState2[0],
-      setAriaRegionText = _React$useState2[1];
-
-  var _React$useState3 = React.useState(-1),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      focusIndex = _React$useState4[0],
-      setFocusIndex = _React$useState4[1];
-
-  var moveElement = React.useCallback(function (dragIndex, hoverIndex) {
-    var dragCard = columns[dragIndex];
-    setColumnsObject(update(columns, {
-      $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
-    }));
-  }, [columns, setColumnsObject]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-column-list")
-  }, /*#__PURE__*/React.createElement(DndProvider, {
-    backend: HTML5Backend
-  }, /*#__PURE__*/React.createElement("ol", {
-    className: "".concat(blockClass, "__customize-columns-column-list--focus"),
-    role: "listbox",
-    "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
-    onKeyDown: function onKeyDown(e) {
-      var nextIndex = getNextIndex(columns, focusIndex, e.key);
-
-      if (nextIndex >= 0) {
-        setFocusIndex(nextIndex);
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
-    tabIndex: 0,
-    onFocus: function onFocus(e) {
-      if (e.target === e.currentTarget) {
-        setFocusIndex(0);
-      }
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    "aria-live": "assertive",
-    className: "".concat(blockClass, "__shared-ui--assistive-text")
-  }, ariaRegionText), /*#__PURE__*/React.createElement("span", {
-    id: "".concat(blockClass, "__customize-columns--instructions"),
-    className: "".concat(blockClass, "__shared-ui--assistive-text")
-  }, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/React.createElement("div", {
-    id: "".concat(blockClass, "__customize-columns-select-all"),
-    className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__customize-columns-select-all"), getVisibleColumnsCount() === 0), _defineProperty(_cx, "".concat(blockClass, "__customize-columns-select-all-selected"), getVisibleColumnsCount() > 0), _cx)),
-    selected: getVisibleColumnsCount() > 0
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    className: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
-    checked: getVisibleColumnsCount() === columns.length,
-    indeterminate: getVisibleColumnsCount() < columns.length && getVisibleColumnsCount() > 0,
-    onChange: function onChange() {
-      onSelectColumn(columns, getVisibleColumnsCount() !== columns.length);
-    },
-    id: "".concat(blockClass, "__customization-column-select-all"),
-    labelText: selectAllLabel
-  })), columns.filter(function (colDef) {
-    return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
-  }).map(function (colDef, i) {
-    return /*#__PURE__*/React.createElement(DraggableElement, {
-      key: colDef.id,
-      index: i,
-      listData: columns,
-      setListData: setColumnsObject,
-      id: "dnd-datagrid-columns-".concat(colDef.id),
-      type: "column-customization",
-      disabled: filterString.length > 0,
-      ariaLabel: colDef.Header.props.title,
-      onGrab: setAriaRegionText,
-      isFocused: focusIndex === i,
-      moveElement: moveElement,
-      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
-        if (isGrabbed) {
-          var nextIndex = getNextIndex(columns, currentIndex, e.key);
-          e.preventDefault();
-          e.stopPropagation();
-
-          if (nextIndex >= 0) {
-            setFocusIndex(nextIndex);
-            moveElement(currentIndex, nextIndex);
-            e.target.scrollIntoView({
-              block: 'center'
-            });
-          }
-        }
-      },
-      selected: isColumnVisible(colDef)
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      className: cx("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
-      checked: isColumnVisible(colDef),
-      onChange: function onChange(_, _ref2) {
-        var checked = _ref2.checked;
-        return onSelectColumn(colDef, checked);
-      },
-      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: colDef.Header.props.title,
-      title: colDef.Header.props.title
-    }));
-  }))));
-};
-
-Columns.propTypes = {
-  assistiveTextDisabledInstructionsLabel: PropTypes.string,
-  assistiveTextInstructionsLabel: PropTypes.string,
-  columns: PropTypes.array.isRequired,
-  disabledInstructionsLabel: PropTypes.string,
-  filterString: PropTypes.string.isRequired,
-  getVisibleColumnsCount: PropTypes.func.isRequired,
-  instructionsLabel: PropTypes.string,
-  onSelectColumn: PropTypes.func.isRequired,
-  selectAllLabel: PropTypes.string,
-  setColumnStatus: PropTypes.func,
-  setColumnsObject: PropTypes.func.isRequired
-};
-export default Columns;