@carbon/ibm-products 2.3.1 → 2.4.0

package/es/global/js/hooks/useResizeObserver.js

@@ -52,7 +52,7 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref]);
+  }, [ref.current]);
   return {
     width: width,
     height: height

package/es/global/js/utils/StoryDocsPage.js

@@ -25,7 +25,7 @@ export var CustomBlocks = function CustomBlocks(_ref) {
       key: "block-index--".concat(index)
     }, block.title && /*#__PURE__*/React.createElement("h3", {
       id: paramCase(block.title)
-    }, block.title), block.subTitle && /*#__PURE__*/React.createElement("h4", null, block.subTitle), block.description && typeof block.description === 'string' ? /*#__PURE__*/React.createElement(Description, null, block.description) : block.description, block.story && /*#__PURE__*/React.createElement(Canvas, {
+    }, block.title), block.subTitle && /*#__PURE__*/React.createElement("h4", null, block.subTitle), block.image, block.description && typeof block.description === 'string' ? /*#__PURE__*/React.createElement(Description, null, block.description) : block.description, block.story && /*#__PURE__*/React.createElement(Canvas, {
       of: block.story
     }), block.source && /*#__PURE__*/React.createElement(Source, source));
   });
@@ -194,6 +194,10 @@ StoryDocsPage.propTypes = {
      * Optional description, strings treated as markdown.
      */
     description: PropTypes.node,
+    /**
+     * Optional block image
+     */
+    image: PropTypes.node,
     /**
      * Story imported from story file
      */
@@ -203,7 +207,7 @@ StoryDocsPage.propTypes = {
      * default language `jsx`
      */
     source: PropTypes.shape({
-      language: PropTypes.oneOf('javascript', 'css', 'jsx'),
+      language: PropTypes.oneOf('javascript', 'css', 'jsx', 'json'),
       code: PropTypes.string
     })
   })),

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -85,18 +85,22 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     previousStepButtonText = _ref.previousStepButtonText,
     showAPIKeyLabel = _ref.showAPIKeyLabel,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    copyError = _useState2[0],
-    setCopyError = _useState2[1];
-  var _useState3 = (0, _react.useState)(apiKeyName),
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    name = _useState4[0],
-    setName = _useState4[1];
-  var _useState5 = (0, _react.useState)(0),
+    copyError = _useState4[0],
+    setCopyError = _useState4[1];
+  var _useState5 = (0, _react.useState)(apiKeyName),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    currentStep = _useState6[0],
-    setCurrentStep = _useState6[1];
+    name = _useState6[0],
+    setName = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    currentStep = _useState8[0],
+    setCurrentStep = _useState8[1];
   var copyRef = (0, _react.useRef)();
   var apiKeyInputId = (0, _react.useRef)((0, _uuidv.default)());
   var nameInputId = (0, _react.useRef)((0, _uuidv.default)());
@@ -149,18 +153,17 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
     return closeButtonText;
   };
-  var getTitle = function getTitle() {
+  (0, _react.useEffect)(function () {
     if (editing && editSuccess) {
-      return editSuccessTitle;
-    }
-    if (apiKeyLoaded) {
-      return generateSuccessTitle;
-    }
-    if (hasSteps) {
-      return customSteps[currentStep].title;
+      setTitle(editSuccessTitle);
+    } else if (apiKeyLoaded) {
+      setTitle(generateSuccessTitle);
+    } else if (hasSteps) {
+      setTitle(customSteps[currentStep].title);
+    } else {
+      setTitle(generateTitle);
     }
-    return generateTitle;
-  };
+  }, [apiKeyLoaded, editing, editSuccess, editSuccessTitle, hasSteps, generateSuccessTitle, generateTitle, currentStep, customSteps]);
   var setNameHandler = function setNameHandler(evt) {
     setName(evt.target.value);
   };
@@ -243,7 +246,7 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     preventCloseOnClickOutside: true
   }), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     className: "".concat(blockClass, "__header"),
-    title: getTitle(),
+    title: title,
     label: modalLabel
   }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, {
     className: "".concat(blockClass, "__body-container")
@@ -261,7 +264,8 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     labelText: apiKeyLabel,
     id: apiKeyInputId.current
   }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/_react.default.createElement(_react2.Form, {
-    onSubmit: submitHandler
+    onSubmit: submitHandler,
+    "aria-label": title
   }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     helperText: nameHelperText,
     placeholder: namePlaceholder,

package/lib/components/ActionBar/ActionBar.js

@@ -79,13 +79,12 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__hidden-sizing-items"),
       "aria-hidden": true,
       ref: sizingRef
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      "aria-hidden": false
-    }, /*#__PURE__*/_react.default.createElement(_ActionBarOverflowItems.ActionBarOverflowItems, {
+    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_ActionBarOverflowItems.ActionBarOverflowItems, {
       className: "".concat(blockClass, "__hidden-sizing-item"),
       overflowAriaLabel: "hidden sizing overflow items",
       overflowItems: [],
-      key: "hidden-overflow-menu"
+      key: "hidden-overflow-menu",
+      tabIndex: -1
     }), actions.map(function (_ref2) {
       var key = _ref2.key,
         id = _ref2.id,
@@ -94,7 +93,8 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         // ensure id is not duplicated
         "data-original-id": id,
         key: "hidden-item-".concat(key),
-        className: "".concat(blockClass, "__hidden-sizing-item")
+        className: "".concat(blockClass, "__hidden-sizing-item"),
+        tabIndex: -1
       }));
     }))));
   }, [actions]);

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -19,7 +19,7 @@ var _CreateInfluencer = require("../CreateInfluencer");
 var _ActionSet = require("../ActionSet");
 var _hooks = require("../../global/js/hooks");
 var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "title"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -71,6 +71,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     onRequestSubmit = _ref.onRequestSubmit,
     firstFocusElement = _ref.firstFocusElement,
     submitButtonText = _ref.submitButtonText,
+    title = _ref.title,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -181,7 +182,8 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/_react.default.createElement(_react2.Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-label": title
   }, /*#__PURE__*/_react.default.createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,

package/lib/components/CreateModal/CreateModal.docs-page.js

@@ -18,7 +18,7 @@ var DocsPage = function DocsPage() {
       story: stories.Default
     }, {
       title: 'Form validation',
-      description: "All forms, including that within the `CreateModal` should follow C&CS guidelines\nfor form validation.\n\nThis includes the following:\n\n- The `Submit` button in the modal should be disabled, until all required inputs\n  are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
+      description: "All forms, including that within the `CreateModal` should follow @carbon/ibm-products guidelines\nfor form validation.\n\nThis includes the following:\n\n- The `Submit` button in the modal should be disabled, until all required inputs\n  are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
     }, {
       title: 'Overriding Carbon theme',
       description: "The design recommendation is to use a dark theme for the CreateModal if the\napplication is currently using a light theme, and vice versa. The theme applied\nto the CreateModal can easily be customized as follows:\n\nIn SCSS:",

package/lib/components/CreateModal/CreateModal.js

@@ -78,7 +78,8 @@ var CreateModal = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
   }, description && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__description")
   }, description), /*#__PURE__*/_react.default.createElement(_react2.Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-label": title
   }, children)), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     kind: "secondary",

package/lib/components/CreateSidePanel/CreateSidePanel.docs-page.js

@@ -21,7 +21,7 @@ var DocsPage = function DocsPage() {
       story: stories.Default
     }, {
       title: 'Form validation',
-      description: "All forms, including that within the `CreateSidePanel` should follow C&CS\nguidelines for form validation.\n\nThis includes the following:\n\n- The `Submit` button in the side panel should be disabled, until all required\n  inputs are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
+      description: "All forms, including that within the `CreateSidePanel` should follow @carbon/ibm-products\nguidelines for form validation.\n\nThis includes the following:\n\n- The `Submit` button in the side panel should be disabled, until all required\n  inputs are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
     }]
   });
 };

package/lib/components/CreateSidePanel/CreateSidePanel.js

@@ -15,6 +15,7 @@ var _settings = require("../../settings");
 var _devtools = require("../../global/js/utils/devtools");
 var _react2 = require("@carbon/react");
 var _SidePanel = require("../SidePanel");
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 var _excluded = ["className", "children", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "selectorPageContent", "selectorPrimaryFocus", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -66,6 +67,7 @@ var CreateSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     onClick: onRequestClose,
     kind: 'secondary'
   }];
+  var formTitleId = (0, _uuidv.default)();
   return selectorPageContent && /*#__PURE__*/_react.default.createElement(_SidePanel.SidePanel, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -82,11 +84,13 @@ var CreateSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     size: "md",
     actions: actions
   }), /*#__PURE__*/_react.default.createElement("h3", {
-    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
+    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text"),
+    id: formTitleId
   }, formTitle), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/_react.default.createElement(_react2.Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 exports.CreateSidePanel = CreateSidePanel;

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -207,7 +207,9 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__content"),
     onBlur: handleBlur,
     ref: contentRef
-  }, /*#__PURE__*/_react.default.createElement(_react2.Form, null, /*#__PURE__*/_react.default.createElement(StepsContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Form, {
+    "aria-label": title
+  }, /*#__PURE__*/_react.default.createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,
       setIsDisabled: setIsDisabled,

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -14,6 +14,7 @@ var _react2 = require("@carbon/react");
 var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
 var _TearsheetNarrow = require("../Tearsheet/TearsheetNarrow");
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 var _excluded = ["children", "className", "description", "disableSubmit", "formDescription", "formTitle", "label", "open", "onRequestClose", "onRequestSubmit", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "title", "verticalPosition"];
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -61,6 +62,7 @@ var CreateTearsheetNarrow = /*#__PURE__*/_react.default.forwardRef(function (_re
     kind: 'secondary'
   }];
   var formTextClass = "".concat(blockClass, "__content-text");
+  var formTitleId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement(_TearsheetNarrow.TearsheetNarrow, (0, _extends2.default)({}, rest, {
     title: title,
     description: description,
@@ -77,11 +79,13 @@ var CreateTearsheetNarrow = /*#__PURE__*/_react.default.forwardRef(function (_re
     verticalPosition: verticalPosition,
     role: "presentation"
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("h3", {
-    className: (0, _classnames.default)("".concat(blockClass, "__form-title-text"), formTextClass)
+    className: (0, _classnames.default)("".concat(blockClass, "__form-title-text"), formTextClass),
+    id: formTitleId
   }, formTitle), /*#__PURE__*/_react.default.createElement("p", {
     className: (0, _classnames.default)("".concat(blockClass, "__form-description-text"), formTextClass)
   }, formDescription), /*#__PURE__*/_react.default.createElement(_react2.Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 

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

@@ -18,13 +18,17 @@ var _DatagridContent = require("./DatagridContent");
 var _FilterProvider = require("./addons/Filtering/FilterProvider");
 var _excluded = ["datagridState"];
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
+
+/**
+ * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ */
 var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);

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

@@ -13,7 +13,6 @@ 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 = ["align", "legendText"];
@@ -28,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var RowSizeDropdown = function RowSizeDropdown(_ref) {
   var _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'bottom' : _ref$align,
+    align = _ref$align === void 0 ? 'bottom-right' : _ref$align,
     _ref$legendText = _ref.legendText,
     legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -36,33 +35,28 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     _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",
+  return /*#__PURE__*/React.createElement(_react2.Popover, {
+    isTabTip: true,
+    align: "bottom-right",
+    open: isOpen,
+    onRequestClose: function onRequestClose() {
+      return setIsOpen(false);
+    },
+    className: "".concat(blockClass, "__row-size-options-container")
+  }, /*#__PURE__*/React.createElement(_react2.IconButton, {
     align: align,
+    kind: "ghost",
     onClick: function onClick() {
       return setIsOpen(function (prevOpen) {
         return !prevOpen;
       });
     },
     label: legendText,
-    className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"))
-  }, /*#__PURE__*/React.createElement(_icons.Settings, {
-    size: 16
-  })), 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
+    className: "".concat(blockClass, "__row-size-button")
   }, /*#__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);
-    }
+  })), /*#__PURE__*/React.createElement(_react2.PopoverContent, null, /*#__PURE__*/React.createElement(_react2.Layer, null, /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
+    legendText: legendText
   })))));
 };
 RowSizeDropdown.propTypes = {

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

@@ -1,27 +1,20 @@
 "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 _react = _interopRequireDefault(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
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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.
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
@@ -30,7 +23,6 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
     selectedOption = _ref.selectedOption,
     datagridName = _ref.datagridName,
     onChange = _ref.onChange,
-    hideRadioGroup = _ref.hideRadioGroup,
     legendText = _ref.legendText,
     _ref$rowSizeLabels = _ref.rowSizeLabels,
     rowSizeLabels = _ref$rowSizeLabels === void 0 ? {
@@ -40,15 +32,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       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", {
-    ref: popoverContentRef,
     className: "".concat(blockClass, "__row-size-dropdown"),
     role: "presentation",
     onClick: function onClick(e) {
@@ -105,7 +89,6 @@ RowSizeRadioGroup.defaultProps = {
 };
 RowSizeRadioGroup.propTypes = {
   datagridName: _propTypes.default.string,
-  hideRadioGroup: _propTypes.default.func.isRequired,
   legendText: _propTypes.default.string,
   onChange: _propTypes.default.func.isRequired,
   rowSizeLabels: _propTypes.default.object,

package/lib/components/Datagrid/Datagrid.docs-page.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocsPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
+var stories = _interopRequireWildcard(require("./Datagrid.stories"));
+var _datagridActionsExample = _interopRequireDefault(require("./storybook-assets/datagrid-actions-example.png"));
+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 DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      title: 'Getting started',
+      description: "You can use the `Datagrid` component to create various kinds of Carbon data tables. Simply import the `Datagrid` along with any accompanying hooks (listed below) depending on what extensions you'd like to be included.",
+      source: {
+        code: "import {\n  Datagrid,\n  useDatagrid,\n  useInfiniteScroll,\n  useNestedRows,\n  useSelectRows,\n  useExpandedRow,\n  useOnRowClick,\n  useSortableColumns,\n  useRowIsMouseOver,\n  useColumnRightAlign,\n  useDisableSelectRows,\n  useStickyColumn,\n  useActionsColumn,\n  useCustomizeColumns,\n  useSelectAllWithToggle,\n  useColumnCenterAlign,\n  useColumnOrder,\n  useEditableCell,\n  useFiltering,\n  useFilterContext\n} from '@carbon/ibm-products';"
+      }
+    }, {
+      title: 'Basic',
+      description: "Here is a basic usage example. The following component will render the datagrid seen below, with pagination and some toolbar actions. One of the key pieces to building the `Datagrid` is the `useDatagrid` hook, this will give you all of the state/props required to render a `Datagrid`."
+    }, {
+      subTitle: 'Multi line wrap',
+      description: 'This setting enables the table cell text wrap to two lines. This can be turned on for only one column in the datagrid or for every column.',
+      source: {
+        language: 'jsx',
+        code: "\n          import { Datagrid, useDatagrid } from '@carbon/ibm-products';\n\nconst App = () => {\n  const columns = React.useMemo(() => defaultHeader, []); // These are the columns that will be used by the datagrid\n  const [data] = useState(makeData(10)); // This is the data that will be rendered by the datagrid\n\n  const columns = React.useMemo(\n    () => [\n      ...defaultHeader,\n      {\n        Header: 'Someone 11',\n        accessor: 'someone11',\n        multiLineWrap: true, //If `multiLineWrap` is required only for specific columns\n      },\n    ],\n    []\n  );\n\n  const datagridState = useDatagrid({\n    columns,\n    data,\n    multiLineWrapAll: true, // If `multiLineWrap` is required for all columns in data grid\n  });\n\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
+      }
+    }, {
+      story: stories.BasicUsage
+    }, {
+      title: 'Column structure',
+      description: "The columns that are passed to the `useDatagrid` hook will have the following structure:",
+      source: {
+        language: 'jsx',
+        code: "\n          const columns = [\n    {\n      Header: 'First Name',\n      accessor: 'firstName',\n    },\n    {\n      Header: 'Last Name',\n      accessor: 'lastName',\n    },\n];"
+      }
+    }, {
+      description: "To change the default/initial width of a column, add a `width` property to the column.",
+      source: {
+        language: 'jsx',
+        code: "\n          const columns = [\n  {\n    Header: 'First Name',\n    accessor: 'firstName',\n    width: 120,\n  },\n  {\n    Header: 'Last Name',\n    accessor: 'lastName',\n    width: 180,\n  },\n];\n          "
+      }
+    }, {
+      description: 'If needed, it is also possible to wrap each cell in a containing element. See below:',
+      source: {
+        language: 'jsx',
+        code: "\n          const columns = [\n  {\n    Header: 'First Name',\n    accessor: 'firstName',\n  },\n  {\n    Header: 'Last Name',\n    accessor: 'lastName',\n    Cell: ({ cell: { value } }) => (\n      <span className=\"custom-cell-wrapper\">{value}</span>\n    ),\n  },\n];\n          "
+      }
+    }, {
+      title: 'Rendering the table toolbar',
+      image: /*#__PURE__*/_react.default.createElement("img", {
+        src: _datagridActionsExample.default,
+        alt: "Datagrid highlighting toolbar area"
+      }),
+      description: "In some of the examples you will see a component named `DatagridActions` passed to the `useDatagrid` hook. This component will render the table toolbar and is something that you will need to create on your own and then provide it to the `useDatagrid` hook. You can reference the `DatagridActions` that we have [created for our stories](https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Datagrid/utils/DatagridActions.js) when building your own."
+    }, {
+      title: 'Empty',
+      story: stories.EmptyState,
+      description: "The `Datagrid` supports empty states, when the data prop passed to the `useDatagrid` hook is an empty array.\n        ",
+      source: {
+        language: 'jsx',
+        code: "\nimport { Datagrid, useDatagrid } from '@carbon/ibm-products';\n\nconst App = () => {\n  const columns = React.useMemo(() => defaultHeader, []); // These are the columns that will be used by the datagrid\n  const [data] = useState([]); // This is the data that will be rendered by the datagrid\n\n  const datagridState = useDatagrid({\n    columns,\n    data,\n    emptyStateTitle: 'Empty state title',\n    emptyStateDescription: 'Description explaining why table is empty',\n    emptyStateSize: 'lg', // See empty state size options from the EmptyState component\n  });\n\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
+      }
+    }, {
+      title: 'Auto size column to fit content',
+      description: "The `getAutoSizedColumnWidth` utility function can be used to auto size columns based on it's content. The width will be set to that of the largest cell in the column or the column header, whichever is greater. If this is not used, the width will be set to the default column width (150px) or the value passed to the `width` property in the column definition. See example below:",
+      source: {
+        code: "\nimport { Datagrid, useDatagrid, getAutoSizedColumnWidth } from '@carbon/ibm-products';\n\n...\n\nconst myColumns = [\n  {\n    Header: 'Column 1',\n    accessor: 'column_1',\n    width: getAutoSizedColumnWidth(rows, 'column_1', 'Column 1'),\n  }\n]\n\n...\n          "
+      }
+    }, {
+      title: 'Disabling select rows',
+      description: "\n        Disabling select rows allows you to choose which rows will be disabled in the table.\n\n- Include the `useDisableSelectRows` hook in the `endPlugins` property of `useDatagrid`.\n- Add the `shouldDisableSelectRow` to the `useDatagrid` hook, this will be a function that returns the row indexes that will be disabled.\n        ",
+      source: {
+        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    DatagridActions,\n    DatagridBatchActions,\n    endPlugins: [useDisableSelectRows],\n    shouldDisableSelectRow: (row) => row.id % 2 === 0,\n    disableSelectAll: true,\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+      }
+    }, {
+      title: 'Infinite scroll',
+      description: "Infinite scroll is supported via the `useInfiniteScroll` hook. This hook will allow you to fetch more data to display to the user after a certain scroll threshold. The `useInfiniteScroll` hook can also be used to support virtualized data, this is required when working with large amounts of data, only rendering the rows that need to be visible in the component at a point in time."
+    }, {
+      description: "Infinite scroll:\n- Include `useInfiniteScroll` hook\n- Add `fetchMoreData` property to `useDatagrid`, this will be a function that is called when the scroll threshold is met. Optionally change the height of the grid with the `virtualHeight` property.",
+      source: {
+        code: "\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    isFetching,\n    fetchMoreData: fetchData,\n    virtualHeight: 540,\n    emptyStateTitle: 'Empty state title',\n    emptyStateDescription: 'Description explaining why the table is empty',\n  },\n  useInfiniteScroll\n);"
+      }
+    }, {
+      description: "Virtualized data:\n- Include `useInfiniteScroll` hook\n- The Datagrid will know to use virtualized data just by providing the `useInfiniteScroll` hook\n        ",
+      source: {
+        code: "\nconst [data] = useState(makeData(10000));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n  },\n  useInfiniteScroll\n);\n          "
+      }
+    }, {
+      title: 'Detect row hover',
+      description: "There may be cases when you want to detect if a user is hovering on a particular row. In this case, use the `useRowIsMouseOver` hook.\n- Include the `useRowIsMouseOver` hook\n- When hover is detected on a row, a property called `isMouseOver` is changed from `false` to `true` within that row.\n        "
+    }, {
+      title: 'Select items across all pages',
+      description: "By default, selecting all items with paginated rows will result in just the current page rows being selected. Incorporating the `useSelectAllWithToggle` hook will provide the option to select all rows across all pages.\n- Include `useSelectAllWithToggle` and `useSelectRows` hook\n- Add the `selectAllToggle` property to the `useDatagrid` hook\n- Optionally pass in labels to ensure proper translation\n- Optionally pass in `onSelectAllRoss`, function that will be called via the select all rows checkbox `onChange`\n        ",
+      source: {
+        code: "\nconst [data] = useState(makeData(100));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst [areAllSelected, setAreAllSelected] = useState(false);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    initialState: {\n      pageSize: 10,\n      pageSizes: [5, 10, 25, 50],\n    },\n    selectAllToggle: {\n      labels: {\n        allRows: 'Select all',\n        allPageRows: 'Select all on page',\n      },\n      onSelectAllRows: setAreAllSelected,\n    },\n    DatagridPagination,\n    DatagridActions,\n    DatagridBatchActions,\n  },\n  useSelectRows,\n  useSelectAllWithToggle\n);\n\nreturn (\n  <Datagrid datagridState={datagridState} />\n);\n          "
+      }
+    }, {
+      title: 'Selecting rows',
+      description: "When building a Datagrid that requires selectable rows, use the `useSelectRows` hook.\n- Include `useSelectRows` hook\n- Add `onRowSelect` to the `useDatagrid` hook, this is a callback function called when on a row's selection checkbox onChange, and sends back the row object and the event\n        ",
+      source: {
+        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    onRowSelect: (row, event) => console.log(row, event),\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+      }
+    }, {
+      description: "The select all checkbox can be optionally hidden by settings the `hideSelectAll` property to `true` in the `useDatagrid` hook.",
+      source: {
+        code: "\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    onRowSelect: (row, event) => console.log(row, event),\n    hideSelectAll: true,\n  },\n  useSelectRows\n);\n          "
+      }
+    }, {
+      description: "Datagrid also provides the option to use radio selection in cases where only one row should be selected at a time. Additionally, you can have preselected row/rows, see example below.",
+      source: {
+        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    radio: true,\n    onRadioSelect: (row) => console.log(`Row clicked`),\n    initialState: {\n      selectedRowIds: {\n        3: true,\n      },\n    },\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+      }
+    }, {
+      title: 'Sortable columns',
+      description: "To add sortable columns to your Datagrid, simply add the `useSortableColumns` hook. This will allow each column header to be clickable and sort each column in either ascending or descending order.\n- Include `useSortableColumns` hook\n        ",
+      source: {
+        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n  },\n  useSortableColumns\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+      }
+    }, {
+      title: 'Sticky column',
+      description: "Sticky columns can be useful when you have many columns that create a horizontal scroll and you have important data in the first or last column that you always want to be visible.\n- Include the `useStickyColumn` hook\n- Sticky columns can _only_ be applied to the first and the last columns in the Datagrid. To have the first column stick, add `sticky: 'left'` to the first column definition. To have the last column stick, add `sticky: 'right'` to the last column definition.\n        ",
+      source: {
+        code: "\nconst columns = [\n  {\n    Header: 'First column',\n    accessor: 'first_column',\n    sticky: 'left',\n  },\n  {\n    ...\n  },\n  {\n    ...\n  }\n];\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n  },\n  useStickyColumn\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+      }
+    }]
+  });
+};
+exports.DocsPage = DocsPage;

package/lib/components/Datagrid/Extensions/ColumnAlignment/ColumnAlignment.docs-page.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocsPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      description: "The default column alignment in the `Datagrid` is left, however there is support for center and right aligned as well. See [design guidance](https://pages.github.ibm.com/cdai-design/pal/components/data-table/column-alignment/usage) for details around when to change default column alignment.\n\nTo utilize center or right aligned columns refer to the steps below:\n\n  - Include `useColumnCenterAlign` or `useColumnRightAlign` hook/s.\n  - Add `rightAlignedColumn` or `centerAlignedColumn` to the column object in which you which to change the default column alignment.\n        ",
+      source: {
+        language: 'jsx',
+        code: "\nimport {\n  Datagrid,\n  useDatagrid,\n  useColumnCenterAlign,\n  useColumnRightAlign,\n} from '@carbon/ibm-products';\n\nconst defaultColumns = [\n  ...defaultCols,\n  {\n    Header: 'Bonus',\n    accessor: 'bonus',\n    width: 120,\n    rightAlignedColumn: true,\n  },\n  {\n    Header: 'Status',\n    accessor: 'status_icon',\n    width: 100,\n    centerAlignedColumn: true,\n  },\n];\n\nconst App = () => {\n  const columns = React.useMemo(() => [...defaultHeader], []);\n  const [data] = useState(makeData(10));\n\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      initialState: {\n        pageSize: 10,\n        pageSizes: [5, 10, 25, 50],\n      },\n      DatagridActions,\n      DatagridPagination,\n    },\n    useColumnCenterAlign,\n    useColumnRightAlign\n  );\n\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
+      }
+    }]
+  });
+};
+exports.DocsPage = DocsPage;