@carbon/ibm-products 1.27.0 → 1.32.0

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/components/Datagrid/utils/getInlineEditColumns.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inlineEditSelectItems = exports.getInlineEditColumns = void 0;
+
+var _iconsReact = require("@carbon/icons-react");
+
+/**
+ * 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 inlineEditSelectItems = [{
+  id: 'option-0',
+  icon: _iconsReact.ChartColumnFloating16,
+  text: 'Column Chart'
+}, {
+  id: 'option-1',
+  icon: _iconsReact.ChartBubble16,
+  text: 'Bubble Chart'
+}, {
+  id: 'option-2',
+  icon: _iconsReact.ChartVennDiagram16,
+  text: 'Venn Diagram'
+}];
+exports.inlineEditSelectItems = inlineEditSelectItems;
+
+var getInlineEditColumns = function getInlineEditColumns() {
+  return [{
+    Header: 'Row Index',
+    accessor: function accessor(row, i) {
+      return i;
+    },
+    id: 'rowIndex' // id is required when accessor is a function.
+
+  }, {
+    Header: 'First Name',
+    accessor: 'firstName',
+    inlineEdit: {
+      type: 'text',
+      inputProps: {} // These props are passed to the Carbon component used for inline editing
+
+    }
+  }, {
+    Header: 'Last Name',
+    accessor: 'lastName',
+    inlineEdit: {
+      type: 'text',
+      inputProps: {} // These props are passed to the Carbon component used for inline editing
+
+    }
+  }, {
+    Header: 'Age',
+    accessor: 'age',
+    width: 120,
+    inlineEdit: {
+      type: 'number',
+      inputProps: {} // These props are passed to the Carbon component used for inline editing
+
+    }
+  }, {
+    Header: 'Visits',
+    accessor: 'visits',
+    width: 120,
+    inlineEdit: {
+      type: 'number',
+      inputProps: {} // These props are passed to the Carbon component used for inline editing
+
+    }
+  }, {
+    Header: 'Active since',
+    accessor: 'activeSince',
+    inlineEdit: {
+      type: 'date',
+      inputProps: {
+        // optionally pass props here to be passed through to Carbon's DatePicker component
+        onChange: function onChange(newDateObj, cell) {
+          console.log(newDateObj, cell);
+        },
+        labelText: 'Change active since date',
+        // optionally pass props here to be passed through to Carbon's DatePickerInput component
+        datePickerInputProps: {
+          labelText: 'Change active since date'
+        }
+      }
+    }
+  }, {
+    Header: 'Chart type',
+    accessor: 'chartType',
+    inlineEdit: {
+      type: 'selection',
+      inputProps: {
+        // These props are passed to the Carbon component used for inline editing
+        items: inlineEditSelectItems,
+        onChange: function onChange(item) {
+          return console.log(item);
+        }
+      }
+    }
+  }, {
+    Header: 'Someone 2',
+    accessor: 'someone2'
+  }, {
+    Header: 'Someone 3',
+    accessor: 'someone3'
+  }, {
+    Header: 'Someone 4',
+    accessor: 'someone4'
+  }, {
+    Header: 'Someone 5',
+    accessor: 'someone5'
+  }, {
+    Header: 'Someone 6',
+    accessor: 'someone6'
+  }, {
+    Header: 'Someone 7',
+    accessor: 'someone7'
+  }, {
+    Header: 'Someone 8',
+    accessor: 'someone8'
+  }, {
+    Header: 'Someone 9',
+    accessor: 'someone9'
+  }, {
+    Header: 'Someone 10',
+    accessor: 'someone10'
+  }];
+};
+
+exports.getInlineEditColumns = getInlineEditColumns;

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

@@ -13,10 +13,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _namor = _interopRequireDefault(require("namor"));
 
+var _getInlineEditColumns = require("./getInlineEditColumns");
+
 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 getRandomInteger = function getRandomInteger(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
 var makeData = function makeData() {
   for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
     lens[_key] = arguments[_key];
@@ -51,6 +59,12 @@ exports.range = range;
 
 var newPerson = function newPerson() {
   var statusChance = Math.random();
+  var initialChartTypeIndex = getRandomInteger(0, 2);
+  var activeSinceDate = new Date();
+  var yesterdayDate = new Date();
+  yesterdayDate.setDate(yesterdayDate.getDate() - 1);
+  var twoDaysAgoDate = new Date();
+  twoDaysAgoDate.setDate(twoDaysAgoDate.getDate() - 2);
   return {
     firstName: _namor.default.generate({
       words: 1,
@@ -143,7 +157,9 @@ var newPerson = function newPerson() {
       words: 1,
       numbers: 0
     }),
-    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single'
+    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
+    chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
+    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate
   };
 };
 

package/lib/components/ImportModal/ImportModal.js

@@ -99,9 +99,9 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     var acceptSet = new Set(accept);
     var name = file.name;
     var mimeType = file.type;
-    var extension = name.split('.').pop();
+    var extension = ".".concat(name.split('.').pop());
 
-    if (acceptSet.has(mimeType) || acceptSet.has(extension)) {
+    if (acceptSet.has(mimeType) || acceptSet.has(extension) || accept.length === 0) {
       return false;
     }
 

package/lib/components/InlineEdit/InlineEdit.js

@@ -80,7 +80,9 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       size = _ref$size === void 0 ? defaults.size : _ref$size,
       value = _ref.value,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var refInput = (0, _react.useRef)(null);
+  var refInput = (0, _react.useRef)({
+    innerText: value
+  });
   var localRef = (0, _react.useRef)(null);
   var ref = refIn || localRef;
 
@@ -283,7 +285,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       onPaste: handlePaste,
       suppressContentEditableWarning: true,
       ref: refInput,
-      "data-placeholder": placeholder !== null && placeholder !== void 0 ? placeholder : labelText
+      "data-placeholder": placeholder
     }), value), /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__after-input-elements")) // tabindex -1 fixes blur target test when clicking on after-input-elements background
       ,

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -130,6 +130,11 @@ ProductiveCard.propTypes = {
    */
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
+  /**
+   * Determines if the primary button is on the top or bottom of the card
+   */
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+
   /**
    * The text that's displayed in the primary button
    */

package/lib/components/index.js

@@ -333,6 +333,12 @@ Object.defineProperty(exports, "useActionsColumn", {
     return _Datagrid.useActionsColumn;
   }
 });
+Object.defineProperty(exports, "useColumnOrder", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useColumnOrder;
+  }
+});
 Object.defineProperty(exports, "useColumnRightAlign", {
   enumerable: true,
   get: function get() {
@@ -369,6 +375,12 @@ Object.defineProperty(exports, "useInfiniteScroll", {
     return _Datagrid.useInfiniteScroll;
   }
 });
+Object.defineProperty(exports, "useInlineEdit", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useInlineEdit;
+  }
+});
 Object.defineProperty(exports, "useNestedRows", {
   enumerable: true,
   get: function get() {

package/lib/global/js/hooks/useClickOutside.js

@@ -16,7 +16,7 @@ var _react = require("react");
 var useClickOutside = function useClickOutside(ref, callback) {
   var handleClick = function handleClick(event) {
     if (ref.current && !ref.current.contains(event.target)) {
-      callback();
+      callback(event.target);
     }
   };
 

package/lib/global/js/package-settings.js

@@ -57,6 +57,9 @@ var defaults = {
     TearsheetNarrow: true,
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
+    WebTerminal: true,
+    WebTerminalContentWrapper: true,
+    WebTerminalProvider: true,
     // other public components not yet reviewed and released:
     MultiAddSelect: false,
     SingleAddSelect: false,
@@ -64,9 +67,6 @@ var defaults = {
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
-    WebTerminal: false,
-    WebTerminalContentWrapper: false,
-    WebTerminalProvider: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,

package/lib/global/js/utils/rangeWithCallback.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rangeWithCallback = 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.
+ */
+// Iterates through a numeric range and calls callback
+// function for each iteration
+var rangeWithCallback = function rangeWithCallback(start, end, fn) {
+  for (var i = start; i <= end; i++) {
+    fn(i);
+  }
+};
+
+exports.rangeWithCallback = rangeWithCallback;

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/lib/global/js/utils/uuidv4.spec.js

@@ -9,11 +9,15 @@ describe('uuidv4', function () {
     jest.resetAllMocks();
   });
   it('Uses Math.random when window is not defined', function () {
+    var _window = window,
+        crypto = _window.crypto;
+    delete window.crypto;
     var mockMath = Object.create(global.Math);
     var mockMathRandom = jest.fn().mockReturnValue(0.5);
     mockMath.random = mockMathRandom;
     global.Math = mockMath;
     expect((0, _uuidv.default)()).toEqual('98888888-9888-4888-a888-988888888888');
+    window.crypto = crypto;
   });
   it('Uses crypto from window when window is defined', function () {
     var mGetRandomValues = jest.fn().mockReturnValue(new Uint32Array(10));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.27.0",
+  "version": "1.32.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,22 +51,22 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.10",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.18",
+    "@babel/core": "^7.18.13",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.19",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
-    "jest": "^28.1.3",
-    "jest-config-ibm-cloud-cognitive": "^0.24.4",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest": "^29.0.1",
+    "jest-config-ibm-cloud-cognitive": "^0.24.5",
+    "jest-environment-jsdom": "^29.0.1",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.0.5",
+    "npm-check-updates": "^16.0.6",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.4",
+    "sass": "^1.54.8",
     "yargs": "^17.5.1"
   },
   "dependencies": {
@@ -85,13 +85,13 @@
     "@carbon/import-once": "^10.7.0",
     "@carbon/layout": "^10.37.1",
     "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.54.0",
-    "@carbon/type": "^10.44.0",
-    "carbon-components": "^10.57.2",
-    "carbon-components-react": "^7.57.4",
+    "@carbon/themes": "^10.55.0",
+    "@carbon/type": "^10.45.0",
+    "carbon-components": "^10.58.0",
+    "carbon-components-react": "^7.59.0",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "83988f0190d38209fe2fe64539e9aab021a46f8d"
+  "gitHead": "07980288bb0aeea68a7b884846fb675e9bba82bd"
 }