@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

package/es/components/ModifiedTabs/ModifiedTabs.js

@@ -1,141 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// 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, { useRef, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
-import { ModifiedTabLabelWithClose } from './ModifiedTabLabelWithClose';
-import { ModifiedTabLabelNew } from './ModifiedTabLabelNew';
-import { pkg } from '../../settings';
-var blockClass = "".concat(pkg.prefix, "--modified-tabs");
-var componentName = 'ModifiedTabs'; // Default values for props
-
-var defaults = {
-  newTabLabel: 'New tab',
-  newTabContent: 'Your new tab will be here soon',
-  onNewTab: undefined,
-  onCloseTab: undefined,
-  tabs: []
-};
-export var ModifiedTabs = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-      _ref$tabs = _ref.tabs,
-      tabs = _ref$tabs === void 0 ? defaults.tabs : _ref$tabs,
-      _ref$newTabLabel = _ref.newTabLabel,
-      newTabLabel = _ref$newTabLabel === void 0 ? defaults.newTabLabel : _ref$newTabLabel,
-      _ref$newTabContent = _ref.newTabContent,
-      newTabContent = _ref$newTabContent === void 0 ? defaults.newTabContent : _ref$newTabContent,
-      _ref$onNewTab = _ref.onNewTab,
-      onNewTab = _ref$onNewTab === void 0 ? defaults.onNewTab : _ref$onNewTab,
-      _ref$onCloseTab = _ref.onCloseTab,
-      onCloseTab = _ref$onCloseTab === void 0 ? defaults.onCloseTab : _ref$onCloseTab,
-      tabListAriaLabel = _ref.tabListAriaLabel;
-  var tabsRef = useRef();
-  var localRef = ref || tabsRef;
-
-  var handleNewTab = function handleNewTab() {
-    if (onNewTab) {
-      onNewTab();
-      setTimeout(function () {
-        // set focus to the new tab
-        var addNewTabButton = localRef.current.querySelector(".".concat(blockClass, "__tab-new"));
-        var tab = addNewTabButton === null || addNewTabButton === void 0 ? void 0 : addNewTabButton.previousSibling;
-        tab === null || tab === void 0 ? void 0 : tab.focus();
-      });
-    }
-  };
-
-  var handleClose = function handleClose(id) {
-    if (onCloseTab) {
-      onCloseTab(id);
-    }
-  };
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, className),
-    ref: localRef
-  }, /*#__PURE__*/React.createElement(Tabs, {
-    className: "modified-tabs"
-  }, /*#__PURE__*/React.createElement(TabList, {
-    "aria-label": tabListAriaLabel
-  }, tabs.map(function (tab) {
-    return /*#__PURE__*/React.createElement(Tab, {
-      key: tab.id
-    }, /*#__PURE__*/React.createElement(ModifiedTabLabelWithClose, {
-      label: tab.label,
-      onClose: function onClose() {
-        return handleClose(tab.id);
-      },
-      unsavedContent: tab.unsavedContent
-    }));
-  }), /*#__PURE__*/React.createElement(Tab, {
-    id: "modified-tabs__tab-new",
-    onClick: handleNewTab,
-    onKeyUp: function onKeyUp(ev) {
-      return ev.keyCode === 32 && handleNewTab();
-    },
-    role: "button",
-    className: "".concat(blockClass, "__tab-new")
-  }, /*#__PURE__*/React.createElement(ModifiedTabLabelNew, {
-    label: newTabLabel
-  }))), /*#__PURE__*/React.createElement(TabPanels, null, tabs.map(function (tab) {
-    var _tab$content;
-
-    return /*#__PURE__*/React.createElement(TabPanel, {
-      key: tab.id,
-      id: tab.id
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__tab-content")
-    }, (_tab$content = tab.content) === null || _tab$content === void 0 ? void 0 : _tab$content.call(tab)));
-  }), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__tab-content")
-  }, newTabContent)))));
-}); // Return a placeholder if not released and not enabled by feature flag
-
-ModifiedTabs = pkg.checkComponentEnabled(ModifiedTabs, componentName);
-ModifiedTabs.propTypes = {
-  /**
-   * Provide an optional class to be applied to the containing node.
-   */
-  className: PropTypes.string,
-
-  /**
-   * New tab content
-   */
-  newTabContent: PropTypes.object,
-
-  /**
-   * New tab label
-   */
-  newTabLabel: PropTypes.string,
-
-  /**
-   * Optional onCloseTab handler
-   */
-  onCloseTab: PropTypes.func,
-
-  /**
-   * New tab content
-   */
-  onNewTab: PropTypes.func,
-
-  /**
-   * Tab list aria label, passed to Carbon TabList
-   */
-  tabListAriaLabel: PropTypes.string.isRequired,
-
-  /**
-   * Tabs array containing tab object { id, label, content }
-   */
-  tabs: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.node,
-    content: PropTypes.func,
-    unsavedContent: PropTypes.bool
-  })).isRequired
-};
-ModifiedTabs.displayName = componentName;

package/es/components/ModifiedTabs/index.js

@@ -1 +0,0 @@
-export { ModifiedTabs } from './ModifiedTabs';

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js

@@ -1,209 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-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 = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react2 = require("@carbon/react");
-
-var _common = require("./common");
-
-var _Columns = _interopRequireDefault(require("./Columns"));
-
-var _Actions = _interopRequireDefault(require("./Actions"));
-
-var _settings = require("../../../../../settings");
-
-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; }
-
-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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-
-var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
-  var isOpen = _ref.isOpen,
-      setIsModalOpen = _ref.setIsModalOpen,
-      onSaveColumnPrefs = _ref.onSaveColumnPrefs,
-      columnDefinitions = _ref.columnDefinitions,
-      originalColumnDefinitions = _ref.originalColumnDefinitions,
-      _ref$customizeModalHe = _ref.customizeModalHeadingLabel,
-      customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize Columns' : _ref$customizeModalHe,
-      _ref$primaryButtonTex = _ref.primaryButtonTextLabel,
-      primaryButtonTextLabel = _ref$primaryButtonTex === void 0 ? 'Save' : _ref$primaryButtonTex,
-      _ref$secondaryButtonT = _ref.secondaryButtonTextLabel,
-      secondaryButtonTextLabel = _ref$secondaryButtonT === void 0 ? 'Cancel' : _ref$secondaryButtonT,
-      _ref$instructionsLabe = _ref.instructionsLabel,
-      instructionsLabel = _ref$instructionsLabe === void 0 ? 'Select columns to display them. Click and drag the box to reorder the columns. These specifications will be saved and persist if you leave and return to the data table.' : _ref$instructionsLabe,
-      _ref$findColumnPlaceh = _ref.findColumnPlaceholderLabel,
-      findColumnPlaceholderLabel = _ref$findColumnPlaceh === void 0 ? 'Find column' : _ref$findColumnPlaceh,
-      _ref$resetToDefaultLa = _ref.resetToDefaultLabel,
-      resetToDefaultLabel = _ref$resetToDefaultLa === void 0 ? 'Reset to default' : _ref$resetToDefaultLa,
-      _ref$assistiveTextIns = _ref.assistiveTextInstructionsLabel,
-      assistiveTextInstructionsLabel = _ref$assistiveTextIns === void 0 ? 'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.' : _ref$assistiveTextIns,
-      _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
-      assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
-      _ref$selectAllLabel = _ref.selectAllLabel,
-      selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      visibleColumnsCount = _useState2[0],
-      setVisibleColumnsCount = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      totalColumns = _useState4[0],
-      setTotalColumns = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      searchText = _useState6[0],
-      setSearchText = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
-  .filter(function (colDef) {
-    return !!colDef.Header.props;
-  }) // only sort the hidden column to the end when modal reopen
-  .sort(function (defA, defB) {
-    var isVisibleA = (0, _common.isColumnVisible)(defA);
-    var isVisibleB = (0, _common.isColumnVisible)(defB);
-
-    if (isVisibleA && !isVisibleB) {
-      return -1;
-    }
-
-    if (!isVisibleA && isVisibleB) {
-      return 1;
-    }
-
-    return 0;
-  })),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      columnObjects = _useState8[0],
-      setColumnObjects = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      isDirty = _useState10[0],
-      setIsDirty = _useState10[1];
-
-  var onRequestClose = function onRequestClose() {
-    setIsModalOpen(false);
-  };
-
-  var onRequestSubmit = function onRequestSubmit() {
-    setIsModalOpen(false);
-    var updatedColumns = columnObjects.map(function (colDef) {
-      return {
-        id: colDef.id,
-        isVisible: colDef.isVisible
-      };
-    });
-    onSaveColumnPrefs(updatedColumns);
-  };
-
-  var onCheckboxCheck = function onCheckboxCheck(col, value) {
-    var changedDefinitions = columnObjects.map(function (definition) {
-      if (Array.isArray(col) && col.indexOf(definition) != null || definition.id === col.id) {
-        return _objectSpread(_objectSpread({}, definition), {}, {
-          isVisible: value
-        });
-      }
-
-      return definition;
-    });
-    setColumnObjects(changedDefinitions);
-    setDirty();
-  };
-
-  var setDirty = function setDirty() {
-    if (!isDirty) {
-      setIsDirty(true);
-    }
-  };
-
-  var getVisibleColumnsCount = (0, _react.useCallback)(function () {
-    return columnObjects.filter(function (col) {
-      return col.isVisible;
-    }).length;
-  }, [columnObjects]);
-  var string = searchText.trim().toLowerCase();
-  (0, _react.useEffect)(function () {
-    setVisibleColumnsCount(getVisibleColumnsCount());
-    setTotalColumns(columnObjects.length);
-  }, [getVisibleColumnsCount, columnObjects.length]);
-  return /*#__PURE__*/_react.default.createElement(_react2.Modal, {
-    className: "".concat(blockClass, "__customize-columns-modal"),
-    open: isOpen,
-    modalHeading: "".concat(customizeModalHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
-    primaryButtonText: primaryButtonTextLabel,
-    secondaryButtonText: secondaryButtonTextLabel,
-    selectorPrimaryFocus: ".".concat(blockClass, "__customize-columns-column-list--focus"),
-    primaryButtonDisabled: !isDirty,
-    onRequestClose: onRequestClose,
-    onRequestSubmit: onRequestSubmit,
-    size: "sm",
-    hasForm: true
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-instructions")
-  }, instructionsLabel), /*#__PURE__*/_react.default.createElement(_Actions.default, {
-    columns: columnObjects,
-    originalColumnDefinitions: originalColumnDefinitions,
-    searchText: searchText,
-    setColumnsObject: function setColumnsObject(cols) {
-      setColumnObjects(cols);
-      setDirty();
-    },
-    setSearchText: setSearchText,
-    findColumnPlaceholderLabel: findColumnPlaceholderLabel,
-    resetToDefaultLabel: resetToDefaultLabel
-  }), isOpen && /*#__PURE__*/_react.default.createElement(_Columns.default, {
-    assistiveTextInstructionsLabel: assistiveTextInstructionsLabel,
-    assistiveTextDisabledInstructionsLabel: assistiveTextDisabledInstructionsLabel,
-    getVisibleColumnsCount: getVisibleColumnsCount,
-    columns: columnObjects,
-    filterString: string,
-    onSelectColumn: onCheckboxCheck,
-    setColumnsObject: function setColumnsObject(cols) {
-      setColumnObjects(cols);
-      setDirty();
-    },
-    selectAllLabel: selectAllLabel
-  }));
-};
-
-CustomizeColumnsModal.propTypes = {
-  assistiveTextDisabledInstructionsLabel: _propTypes.default.string,
-  assistiveTextInstructionsLabel: _propTypes.default.string,
-  columnDefinitions: _propTypes.default.array.isRequired,
-  customizeModalHeadingLabel: _propTypes.default.string,
-  findColumnPlaceholderLabel: _propTypes.default.string,
-  instructionsLabel: _propTypes.default.string,
-  isOpen: _propTypes.default.bool.isRequired,
-  onSaveColumnPrefs: _propTypes.default.func.isRequired,
-  originalColumnDefinitions: _propTypes.default.array.isRequired,
-  primaryButtonTextLabel: _propTypes.default.string,
-  resetToDefaultLabel: _propTypes.default.string,
-  secondaryButtonTextLabel: _propTypes.default.string,
-  selectAllLabel: _propTypes.default.string,
-  setIsModalOpen: _propTypes.default.func.isRequired
-};
-var _default = CustomizeColumnsModal;
-exports.default = _default;

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js

@@ -1,74 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _CustomizeColumnsModal = _interopRequireDefault(require("./CustomizeColumnsModal"));
-
-var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen", "labels"];
-
-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; }
-
-var ModalWrapper = function ModalWrapper(_ref) {
-  var instance = _ref.instance;
-  var _instance$customizeCo = instance.customizeColumnsProps,
-      _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
-      isModalOpen = _instance$customizeCo.isModalOpen,
-      setIsModalOpen = _instance$customizeCo.setIsModalOpen,
-      labels = _instance$customizeCo.labels,
-      rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
-
-  if (isModalOpen) {
-    return /*#__PURE__*/React.createElement(_CustomizeColumnsModal.default, (0, _extends2.default)({}, rest, labels, {
-      isOpen: isModalOpen,
-      setIsModalOpen: setIsModalOpen,
-      columnDefinitions: instance.allColumns,
-      originalColumnDefinitions: instance.columns,
-      onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
-        var hiddenIds = updatedColDefs.filter(function (colDef) {
-          return !colDef.isVisible;
-        }).map(function (colDef) {
-          return colDef.id;
-        });
-        instance.setHiddenColumns(hiddenIds);
-
-        if (typeof instance.setColumnOrder === 'function') {
-          instance.setColumnOrder(updatedColDefs.map(function (colDef) {
-            return colDef.id;
-          }));
-        } else {
-          // eslint-disable-next-line no-console
-          console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
-        }
-
-        if (typeof _onSaveColumnPrefs === 'function') {
-          _onSaveColumnPrefs(updatedColDefs);
-        }
-      }
-    }));
-  }
-
-  return null;
-};
-
-ModalWrapper.propTypes = {
-  instance: _propTypes.default.object.isRequired
-};
-var _default = ModalWrapper;
-exports.default = _default;

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;