fix(DataGrid): add checkbox support

packages/ibm-products-styles/src/components/Datagrid/styles/_useInlineEdit.scss

@@ -80,6 +80,19 @@ $row-heights: (
   align-items: center;
 }
 
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox-focus
+  .cds--checkbox-label::before {
+  outline: $spacing-01 solid $focus;
+  outline-offset: 1px;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox {
+  display: flex;
+  height: -webkit-fill-available;
+  justify-content: center;
+  padding-inline: $spacing-05;
+}
+
 .#{variables.$block-class}__static--outer-cell {
   display: flex;
   height: -webkit-fill-available;

packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js

@@ -74,6 +74,6 @@ InlineEditButton.propTypes = {
   nonEditCell: PropTypes.bool,
   placeholder: PropTypes.string,
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  type: PropTypes.oneOf(['text', 'number', 'selection', 'date']),
+  type: PropTypes.oneOf(['text', 'number', 'selection', 'date', 'checkbox']),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };

packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -19,6 +19,7 @@ import {
   Dropdown,
   DatePicker,
   DatePickerInput,
+  Checkbox,
 } from '@carbon/react';
 import { Edit, CaretSort, ChevronDown, Calendar } from '@carbon/react/icons';
 import { InlineEditButton } from '../InlineEditButton';
@@ -55,6 +56,7 @@ export const InlineEditCell = ({
   const { inputProps } = config || {};
 
   const textInputRef = useRef();
+  const checkboxRef = useRef();
   const numberInputRef = useRef();
   const dropdownRef = useRef();
   const datePickerRef = useRef();
@@ -240,9 +242,29 @@ export const InlineEditCell = ({
   const handleKeyDown = (event) => {
     const { key } = event;
     switch (key) {
+      case 'ArrowRight':
+      case 'ArrowLeft':
+      case 'ArrowUp':
+      case 'ArrowDown':
+        if (inEditMode && event.target.type === 'checkbox') {
+          const newCellId = getNewCellId(key);
+          saveCellData(cellValue);
+          setInitialValue(cellValue);
+          dispatch({ type: 'EXIT_EDIT_MODE', payload: newCellId });
+          setInEditMode(false);
+          sendFocusBackToGrid();
+        }
+        break;
       // Save cell contents to data
       case 'Tab':
       case 'Enter': {
+        if (type === 'checkbox') {
+          // Since checkbox doesn't need to click into it to enter `inEditMode` we don't need to check for it
+          const newCellId = getNewCellId(key);
+          dispatch({ type: 'EXIT_EDIT_MODE', payload: newCellId });
+          setInEditMode(false);
+          sendFocusBackToGrid();
+        }
         if (inEditMode) {
           // Dropdown saves are handled in the Dropdown's/DatePicker's onChange prop
           if (type === 'selection' || type === 'date') {
@@ -463,6 +485,29 @@ export const InlineEditCell = ({
     );
   };
 
+  const renderCheckBoxCell = () => {
+    return (
+      <Checkbox
+        labelText={cellLabel || 'Checkbox'}
+        {...inputProps}
+        className={cx(`${blockClass}__inline-edit--outer-cell-checkbox`, {
+          [`${blockClass}__inline-edit--outer-cell-checkbox-focus`]:
+            activeCellId === cellId,
+        })}
+        id={cellId}
+        hideLabel
+        checked={cellValue}
+        onChange={(event, { checked }) => {
+          setCellValue(checked);
+          if (inputProps.onChange) {
+            inputProps.onChange(checked);
+          }
+        }}
+        ref={checkboxRef}
+      />
+    );
+  };
+
   const renderTextInput = () => {
     const { validator } = config || {};
     const isInvalid = validator?.(cellValue);
@@ -524,8 +569,11 @@ export const InlineEditCell = ({
         [`${blockClass}__static--outer-cell`]: !disabledCell,
       })}
     >
-      {!nonEditCell && !disabledCell && renderRegularCell()}
-      {(!inEditMode || disabledCell) && (
+      {!nonEditCell &&
+        !disabledCell &&
+        type !== 'checkbox' &&
+        renderRegularCell()}
+      {(!inEditMode || disabledCell) && type !== 'checkbox' && (
         <InlineEditButton
           isActiveCell={cellId === activeCellId}
           renderIcon={setRenderIcon()}
@@ -539,6 +587,7 @@ export const InlineEditCell = ({
           type={type}
         />
       )}
+      {type === 'checkbox' && renderCheckBoxCell()}
       {!nonEditCell && inEditMode && cellId === activeCellId && (
         <>
           {type === 'text' && renderTextInput()}
@@ -566,7 +615,7 @@ InlineEditCell.propTypes = {
   nonEditCell: PropTypes.bool,
   placeholder: PropTypes.string,
   tabIndex: PropTypes.number,
-  type: PropTypes.oneOf(['text', 'number', 'selection', 'date']),
+  type: PropTypes.oneOf(['text', 'number', 'selection', 'date', 'checkbox']),
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node,

packages/ibm-products/src/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js

@@ -83,7 +83,8 @@ export const handleGridKeyPress = ({
 
   // Stop grid key listener when in edit mode
   const isEditing =
-    (document.activeElement.id === activeCellId &&
+    (focusedCell.getAttribute('data-inline-type') !== 'checkbox' &&
+      document.activeElement.id === activeCellId &&
       document.activeElement.id === editId) ||
     dropdownIsActive() ||
     datePickerIsActive();
@@ -106,6 +107,9 @@ export const handleGridKeyPress = ({
   }
   const isDisabledCell =
     focusedCell.getAttribute('data-disabled') === 'false' ? false : true;
+  const isEditableCell = !event.target.classList.contains(
+    `${blockClass}__inline-edit-button--non-edit`
+  );
   const sharedUpdateParams = {
     oldId: activeCellId,
     instance,
@@ -212,7 +216,7 @@ export const handleGridKeyPress = ({
       case 'F2':
       case 'Enter': {
         // Disabled cells are not allowed to go into edit mode
-        if (isDisabledCell) {
+        if (isDisabledCell || !isEditableCell) {
           return;
         }
         // Only go into edit mode if there is no editId, meaning that we're not already in edit mode
@@ -225,6 +229,13 @@ export const handleGridKeyPress = ({
               dropdownTrigger?.click();
             }, 1);
           }
+          if (focusedType === 'checkbox') {
+            setTimeout(() => {
+              const checkboxTrigger = focusedCell.querySelector('input');
+              checkboxTrigger?.click();
+              checkboxTrigger?.focus();
+            }, 1);
+          }
           if (focusedType === 'date') {
             setTimeout(() => {
               const dateInputTrigger = focusedCell.querySelector('input');

packages/ibm-products/src/components/Datagrid/useInlineEdit.tsx

@@ -61,6 +61,8 @@ const useInlineEdit = (hooks: Hooks) => {
             {!staticCell &&
               inlineEditType === 'selection' &&
               renderInlineEditComponent(inlineEditType)}
+            {inlineEditType === 'checkbox' &&
+              renderInlineEditComponent(inlineEditType)}
             {!staticCell &&
               inlineEditType === 'date' &&
               renderInlineEditComponent(inlineEditType)}

packages/ibm-products/src/components/Datagrid/utils/getInlineEditColumns.js

@@ -94,6 +94,18 @@ export const getInlineEditColumns = () => {
         }, // These props are passed to the Carbon component used for inline editing
       },
     },
+    {
+      Header: 'Key',
+      accessor: 'key',
+      inlineEdit: {
+        type: 'checkbox',
+        inputProps: {
+          onChange: (newDateObj, cell) => {
+            console.log(newDateObj, cell);
+          },
+        },
+      },
+    },
     {
       Header: 'Active since',
       accessor: 'activeSince',

packages/ibm-products/src/components/Datagrid/utils/makeData.js

@@ -146,6 +146,7 @@ const newPerson = (index, config) => {
         : initialChartTypeIndex === 1
         ? inlineEditSelectItems[1]
         : inlineEditSelectItems[2],
+    key: false,
     activeSince:
       activeChance > 0.66
         ? activeSinceDate