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

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -1,79 +1,72 @@
 "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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _icons = require("@carbon/react/icons");
-
 var _react2 = require("@carbon/react");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _RowSizeRadioGroup = _interopRequireDefault(require("./RowSizeRadioGroup"));
-
 var _settings = require("../../../../../settings");
-
-var _excluded = ["legendText"];
-
+var _excluded = ["align", "legendText"];
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
 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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-
 var RowSizeDropdown = function RowSizeDropdown(_ref) {
-  var _ref$legendText = _ref.legendText,
-      legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+  var _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'bottom' : _ref$align,
+    _ref$legendText = _ref.legendText,
+    legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
-  return /*#__PURE__*/React.createElement(_react2.Popover, {
-    align: "bottom-right",
-    caret: false,
-    dropShadow: false,
-    open: isOpen,
-    className: "".concat(blockClass, "__row-height-settings-popover")
-  }, /*#__PURE__*/React.createElement(_react2.IconButton, {
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isOpen && /*#__PURE__*/React.createElement(_react2.IconButton, {
     kind: "ghost",
-    align: "left",
+    align: align,
     onClick: function onClick() {
-      return setIsOpen(!isOpen);
+      return setIsOpen(function (prevOpen) {
+        return !prevOpen;
+      });
     },
     label: legendText,
-    className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
+    className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"))
   }, /*#__PURE__*/React.createElement(_icons.Settings, {
     size: 16
-  })), /*#__PURE__*/React.createElement(_react2.PopoverContent, null, /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
+  })), isOpen && /*#__PURE__*/React.createElement(_react2.Toggletip, {
+    defaultOpen: true,
+    className: "".concat(blockClass, "__row-size-toggle-tip")
+  }, /*#__PURE__*/React.createElement(_react2.ToggletipButton, {
+    className: (0, _classnames.default)("".concat(blockClass, "__row-size-toggle-tip-button"), "".concat(blockClass, "__row-size-button--open")),
+    label: legendText
+  }, /*#__PURE__*/React.createElement(_icons.Settings, {
+    size: 16
+  })), /*#__PURE__*/React.createElement(_react2.ToggletipContent, {
+    className: "".concat(blockClass, "__row-size-toggle-tip-content")
+  }, /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
     legendText: legendText,
     hideRadioGroup: function hideRadioGroup() {
       setIsOpen(false);
     }
-  }))));
+  })))));
 };
-
 RowSizeDropdown.propTypes = {
+  align: _react2.IconButton.propTypes.align,
   datagridName: _propTypes.default.string,
   legendText: _propTypes.default.string,
   light: _propTypes.default.bool,

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -1,33 +1,21 @@
 "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 _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react2 = require("@carbon/react");
-
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
-
 var _settings = require("../../../../../settings");
-
 var _hooks = require("../../../../../global/js/hooks");
-
 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; }
-
 /* eslint-disable react/default-props-match-prop-types */
 // @flow
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -35,29 +23,28 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
   var rowSizes = _ref.rowSizes,
-      selectedOption = _ref.selectedOption,
-      datagridName = _ref.datagridName,
-      onChange = _ref.onChange,
-      hideRadioGroup = _ref.hideRadioGroup,
-      legendText = _ref.legendText,
-      _ref$rowSizeLabels = _ref.rowSizeLabels,
-      rowSizeLabels = _ref$rowSizeLabels === void 0 ? {
-    xl: 'Extra large',
-    lg: 'Large (default)',
-    md: 'Medium',
-    sm: 'Small',
-    xs: 'Extra small'
-  } : _ref$rowSizeLabels;
+    selectedOption = _ref.selectedOption,
+    datagridName = _ref.datagridName,
+    onChange = _ref.onChange,
+    hideRadioGroup = _ref.hideRadioGroup,
+    legendText = _ref.legendText,
+    _ref$rowSizeLabels = _ref.rowSizeLabels,
+    rowSizeLabels = _ref$rowSizeLabels === void 0 ? {
+      xl: 'Extra large',
+      lg: 'Large (default)',
+      md: 'Medium',
+      sm: 'Small',
+      xs: 'Extra small'
+    } : _ref$rowSizeLabels;
   var popoverContentRef = (0, _react.useRef)();
   (0, _hooks.useClickOutside)(popoverContentRef, function (target) {
     if (target.closest(".".concat(blockClass, "__row-size-button"))) {
       return;
     }
-
     hideRadioGroup();
   });
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -75,14 +62,13 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
     onChange: onChange
   }, rowSizes && (0, _isArray.default)(rowSizes) && rowSizes.map(function (option) {
     var labelText;
-
     try {
       labelText = option.labelText || rowSizeLabels[option.value];
     } catch (e) {
       labelText = option.value;
     }
-
     return /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
+      className: "".concat(blockClass, "__row-size-radio-button"),
       key: option.value,
       labelText: labelText,
       value: option.value,
@@ -90,36 +76,31 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
     });
   })));
 };
-
 var getBackwardCompatibleRowSize = function getBackwardCompatibleRowSize(rowSize) {
   // TODO: deprecate this function in next major release (v8) on carbon-components-react
   var rowSizeMap = {
     tall: 'xl',
     normal: 'lg',
     short: 'sm',
-    compact: 'xs' // md is a new value
-
+    compact: 'xs'
+    // md is a new value
   };
+
   return rowSizeMap[rowSize] || rowSize;
 };
-
 RowSizeRadioGroup.defaultProps = {
   rowSizes: [{
     value: 'xl' // 64
-
   }, {
     value: 'lg' // 48
-
   }, {
     value: 'md' // 40
-
   }, {
     value: 'sm' // 32
-
   }, {
     value: 'xs' // 24
-
   }],
+
   selectedOption: 'lg'
 };
 RowSizeRadioGroup.propTypes = {

package/lib/components/Datagrid/Datagrid/addons/RowSize/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "RowSizeDropdown", {
     return _RowSizeDropdown.default;
   }
 });
-
 var _RowSizeDropdown = _interopRequireDefault(require("./RowSizeDropdown"));

package/lib/components/Datagrid/Datagrid/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Datagrid", {
     return _Datagrid.Datagrid;
   }
 });
-
 var _Datagrid = require("./Datagrid");

package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js

@@ -1,17 +1,23 @@
 // import React, { useState, useEffect } from 'react';
 // import { Datagrid, useActionsColumn, useDatagrid, useStickyColumn } from '..';
 // import { defaultHeader, makeData, Wrapper } from './common';
+
 // StickyActionsColumn.story = {
 //   parameters: {
 //     notes: `
 //     Sticky column and actions column can be used at the same time like the demo above. Following is the doc for each of them.
+
 //     # Sticky column
 //     This will make the column mark with \`sticky: "right"\` to be sticky on the right.
+
 //     ## Incompatible with following plugins:
 //     - \`useInfiniteScroll\`
+
 //     ## Sample usage:
+
 //     1. include the \`useStickyColumn\` hook
 //     2. add \`sticky="right"\` to the column object
+
 //     \`\`\`js
 //     const columns = [
 //       ... // other columns
@@ -33,8 +39,10 @@
 //     \`\`\`html
 //     <Datagrid {...datagridState} />
 //     \`\`\`
+
 //     # Actions column
 //     This will add OverflowMenu component to the cells on the column mark with \`isAction: true\`. Each action button callback will include the actionId and row object
+
 //     ## Sample usage:
 //     1. include \`useActionsColumn\` hook
 //     2. add \`isAction = true\` to the column object in which you which to add the overflow menu actions
@@ -45,6 +53,7 @@
 //       - \`rowActions[].shouldDisableMenuItem(row: Row)\` callback to disable this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)
 //         - This will override \`rowActions[].disabled\` (from Carbon) because \`shouldDisableMenuItem\` is more specific to the row.
 //       - each action object can take all the props from \`OverflowMenuItem\` props, see [carbon docs](https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default#overflowmenu)
+
 //     \`\`\`js
 //     const columns = [
 //       ... // other columns
@@ -89,5 +98,6 @@
 //     `,
 //   },
 // };
+
 // export default StickyActionsColumn;
 "use strict";

package/lib/components/Datagrid/Datagrid.stories/common.js

@@ -1,32 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.makeData = exports.defaultHeader = exports.Wrapper = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _namor = _interopRequireDefault(require("namor"));
-
 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 range = function range(len) {
   var arr = [];
-
   for (var i = 0; i < len; i++) {
     arr.push(i);
   }
-
   return arr;
 };
-
 var newPerson = function newPerson() {
   var statusChance = Math.random();
   return {
@@ -123,9 +113,9 @@ var newPerson = function newPerson() {
     }),
     status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single'
   };
-}; // eslint-disable-next-line react/prop-types
-
+};
 
+// eslint-disable-next-line react/prop-types
 var Wrapper = function Wrapper(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -138,14 +128,11 @@ var Wrapper = function Wrapper(_ref) {
     }
   }, children);
 };
-
 exports.Wrapper = Wrapper;
-
 var makeData = function makeData() {
   for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
     lens[_key] = arguments[_key];
   }
-
   var makeDataLevel = function makeDataLevel() {
     var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     var len = lens[depth];
@@ -155,10 +142,8 @@ var makeData = function makeData() {
       });
     });
   };
-
   return makeDataLevel();
 };
-
 exports.makeData = makeData;
 var defaultHeader = [{
   Header: 'Row Index',

package/lib/components/Datagrid/Datagrid.stories/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,12 +10,6 @@ Object.defineProperty(exports, "CustomizeColumnStoryNotes", {
     return _CustomizeColumnStory.story;
   }
 });
-Object.defineProperty(exports, "LeftPanelStory", {
-  enumerable: true,
-  get: function get() {
-    return _LeftPanelStory.story;
-  }
-});
 Object.defineProperty(exports, "RowSizeDropdownStory", {
   enumerable: true,
   get: function get() {
@@ -35,13 +28,7 @@ Object.defineProperty(exports, "StickyActionsColumn", {
     return _StickyActionsColumnStory.default;
   }
 });
-
 var _CustomizeColumnStory = require("./CustomizeColumnStory");
-
 var _StickyActionsColumnStory = _interopRequireDefault(require("./StickyActionsColumnStory"));
-
 var _RowSizeDropdownStory = require("./RowSizeDropdownStory");
-
-var _LeftPanelStory = require("./LeftPanelStory");
-
 var _SelectAllWithToggleStory = require("./SelectAllWithToggleStory");

package/lib/components/Datagrid/common-column-ids.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectionColumnId = void 0;
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -12,5 +11,6 @@ exports.selectionColumnId = void 0;
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
+
 var selectionColumnId = 'datagridSelection';
 exports.selectionColumnId = selectionColumnId;

package/lib/components/Datagrid/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,6 +10,12 @@ Object.defineProperty(exports, "Datagrid", {
     return _Datagrid.Datagrid;
   }
 });
+Object.defineProperty(exports, "getAutoSizedColumnWidth", {
+  enumerable: true,
+  get: function get() {
+    return _getAutoSizedColumnWidth.getAutoSizedColumnWidth;
+  }
+});
 Object.defineProperty(exports, "useActionsColumn", {
   enumerable: true,
   get: function get() {
@@ -53,12 +58,24 @@ Object.defineProperty(exports, "useDisableSelectRows", {
     return _useDisableSelectRows.default;
   }
 });
+Object.defineProperty(exports, "useEditableCell", {
+  enumerable: true,
+  get: function get() {
+    return _useEditableCell.default;
+  }
+});
 Object.defineProperty(exports, "useExpandedRow", {
   enumerable: true,
   get: function get() {
     return _useExpandedRow.default;
   }
 });
+Object.defineProperty(exports, "useFiltering", {
+  enumerable: true,
+  get: function get() {
+    return _useFiltering.default;
+  }
+});
 Object.defineProperty(exports, "useInfiniteScroll", {
   enumerable: true,
   get: function get() {
@@ -113,39 +130,24 @@ Object.defineProperty(exports, "useStickyColumn", {
     return _useStickyColumn.default;
   }
 });
-
 var _Datagrid = require("./Datagrid");
-
 var _useDatagrid = _interopRequireDefault(require("./useDatagrid"));
-
 var _useInfiniteScroll = _interopRequireDefault(require("./useInfiniteScroll"));
-
 var _useNestedRows = _interopRequireDefault(require("./useNestedRows"));
-
 var _useSelectRows = _interopRequireDefault(require("./useSelectRows"));
-
 var _useExpandedRow = _interopRequireDefault(require("./useExpandedRow"));
-
 var _useOnRowClick = _interopRequireDefault(require("./useOnRowClick"));
-
 var _useSortableColumns = _interopRequireDefault(require("./useSortableColumns"));
-
 var _useRowIsMouseOver = _interopRequireDefault(require("./useRowIsMouseOver"));
-
 var _useColumnRightAlign = _interopRequireDefault(require("./useColumnRightAlign"));
-
 var _useDisableSelectRows = _interopRequireDefault(require("./useDisableSelectRows"));
-
 var _useStickyColumn = _interopRequireDefault(require("./useStickyColumn"));
-
 var _useActionsColumn = _interopRequireDefault(require("./useActionsColumn"));
-
 var _useCustomizeColumns = _interopRequireDefault(require("./useCustomizeColumns"));
-
 var _useSelectAllToggle = _interopRequireDefault(require("./useSelectAllToggle"));
-
 var _useColumnCenterAlign = _interopRequireDefault(require("./useColumnCenterAlign"));
-
 var _useColumnOrder = _interopRequireDefault(require("./useColumnOrder"));
-
-var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
+var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
+var _useEditableCell = _interopRequireDefault(require("./useEditableCell"));
+var _useFiltering = _interopRequireDefault(require("./useFiltering"));
+var _getAutoSizedColumnWidth = require("./utils/getAutoSizedColumnWidth");