@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -20,76 +20,64 @@ var usePreviousValue = require('../../../../../../global/js/hooks/usePreviousVal
 var useIsomorphicEffect = require('../../../../../../global/js/hooks/useIsomorphicEffect.js');
 var InlineEditButton = require('../InlineEditButton/InlineEditButton.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var InlineEditCell = function InlineEditCell(_ref) {
-  var _config$validator;
-  var cell = _ref.cell,
-    config = _ref.config,
-    _ref$disabledCell = _ref.disabledCell,
-    disabledCell = _ref$disabledCell === void 0 ? false : _ref$disabledCell,
-    instance = _ref.instance,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
-    tabIndex = _ref.tabIndex,
-    value = _ref.value,
-    _ref$nonEditCell = _ref.nonEditCell,
-    nonEditCell = _ref$nonEditCell === void 0 ? false : _ref$nonEditCell,
-    type = _ref.type;
-  var columnId = cell.column.id;
-  var columnIndex = instance.columns.findIndex(function (col) {
-    return col.id === columnId;
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const InlineEditCell = _ref => {
+  let {
+    cell,
+    config,
+    disabledCell = false,
+    instance,
+    placeholder = '',
+    tabIndex,
+    value,
+    nonEditCell = false,
+    type
+  } = _ref;
+  const columnId = cell.column.id;
+  const columnIndex = instance.columns.findIndex(col => col.id === columnId);
+  const rowIndex = cell.row.index;
+  const cellId = `column-${columnIndex}-row-${rowIndex}`;
+  const {
+    state,
+    dispatch
+  } = React.useContext(InlineEditContext.InlineEditContext);
+  const [inEditMode, setInEditMode] = React.useState(false);
+  const [cellValue, setCellValue] = React.useState(value);
+  const [initialValue, setInitialValue] = React.useState();
+  const [cellLabel, setCellLabel] = React.useState();
+  const {
+    activeCellId,
+    editId
+  } = state;
+  const previousState = usePreviousValue.usePreviousValue({
+    editId,
+    activeCellId
   });
-  var rowIndex = cell.row.index;
-  var cellId = "column-".concat(columnIndex, "-row-").concat(rowIndex);
-  var _useContext = React.useContext(InlineEditContext.InlineEditContext),
-    state = _useContext.state,
-    dispatch = _useContext.dispatch;
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    inEditMode = _useState2[0],
-    setInEditMode = _useState2[1];
-  var _useState3 = React.useState(value),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    cellValue = _useState4[0],
-    setCellValue = _useState4[1];
-  var _useState5 = React.useState(),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    initialValue = _useState6[0],
-    setInitialValue = _useState6[1];
-  var _useState7 = React.useState(),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    cellLabel = _useState8[0],
-    setCellLabel = _useState8[1];
-  var activeCellId = state.activeCellId,
-    editId = state.editId;
-  var previousState = usePreviousValue.usePreviousValue({
-    editId: editId,
-    activeCellId: activeCellId
-  });
-  var _ref2 = config || {},
-    inputProps = _ref2.inputProps;
-  var textInputRef = React.useRef(undefined);
-  var checkboxRef = React.useRef(undefined);
-  var numberInputRef = React.useRef(undefined);
-  var dropdownRef = React.useRef(undefined);
-  var outerButtonElement = React.useRef(undefined);
-  var rowSize = instance.rowSize,
-    onDataUpdate = instance.onDataUpdate;
-  var saveCellData;
+  const {
+    inputProps
+  } = config || {};
+  const textInputRef = React.useRef(undefined);
+  const checkboxRef = React.useRef(undefined);
+  const numberInputRef = React.useRef(undefined);
+  const dropdownRef = React.useRef(undefined);
+  const outerButtonElement = React.useRef(undefined);
+  const {
+    rowSize,
+    onDataUpdate
+  } = instance;
+  let saveCellData;
   if (inEditMode) {
     instance.cellEditing = {
-      cellId: cellId,
-      columnIndex: columnIndex,
-      rowIndex: rowIndex,
+      cellId,
+      columnIndex,
+      rowIndex,
       curCellValue: cellValue
     };
   }
-  React.useEffect(function () {
+  React.useEffect(() => {
     setInitialValue(value);
-    var columnId = cell.column.id;
-    var columnLabel = instance.columns.find(function (item) {
-      return item.id === columnId;
-    });
+    const columnId = cell.column.id;
+    const columnLabel = instance.columns.find(item => item.id === columnId);
     setCellLabel(typeof columnLabel.Header === 'string' ? columnLabel.Header : 'Inline edit cell label');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -97,22 +85,23 @@ var InlineEditCell = function InlineEditCell(_ref) {
   // Reverts cellValue back to initialValue when exiting edit mode via clicking outside
   // of the cell (either on a regular cell or clicking into another inline edit cell) and the
   // edit input is in an invalid state
-  React.useEffect(function () {
-    if ((previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && !editId || (previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && cellId !== editId) {
-      var _ref3 = config || {},
-        validator = _ref3.validator;
-      var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
+  React.useEffect(() => {
+    if (previousState?.editId === cellId && !editId || previousState?.editId === cellId && cellId !== editId) {
+      const {
+        validator
+      } = config || {};
+      const isInvalid = validator?.(cellValue);
       if (isInvalid) {
         setCellValue(initialValue);
         saveCellData(initialValue);
         return;
       }
     }
-  }, [previousState === null || previousState === void 0 ? void 0 : previousState.editId, editId, cellId, cellValue, config, initialValue, saveCellData]);
+  }, [previousState?.editId, editId, cellId, cellValue, config, initialValue, saveCellData]);
 
   // If you are in edit mode and click outside of the cell,
   // this changes the cell back to the InlineEditButton
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (activeCellId !== cellId || !editId) {
       setInEditMode(false);
     }
@@ -121,31 +110,32 @@ var InlineEditCell = function InlineEditCell(_ref) {
       saveCellData(cellValue);
     }
   }, [activeCellId, cellId, nonEditCell, editId, cellValue, saveCellData]);
-  var openDropdown = function openDropdown(type) {
+  const openDropdown = type => {
     // *****
     // Only added this querySelector because v11 Datepicker isn't forwarding the ref which breaks how we were handling this in v10
     // *****
-    var datePickerInputElement = document.querySelector("#".concat(blockClass, "__inline-edit--date-picker--").concat(cell.row.index));
-    var dropdownTrigger = type === 'selection' ? dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current : datePickerInputElement;
+    const datePickerInputElement = document.querySelector(`#${blockClass}__inline-edit--date-picker--${cell.row.index}`);
+    const dropdownTrigger = type === 'selection' ? dropdownRef?.current : datePickerInputElement;
     dropdownTrigger.click();
     if (type === 'date') {
-      dropdownTrigger === null || dropdownTrigger === void 0 || dropdownTrigger.focus();
+      dropdownTrigger?.focus();
     }
   };
 
   // Re-initializes initialValue if clicking outside of a cell that was previously
   // in edit mode, otherwise `initialValue` becomes stale
-  React.useEffect(function () {
-    if ((previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && (previousState === null || previousState === void 0 ? void 0 : previousState.activeCellId) === cellId && activeCellId !== cellId) {
-      var _ref4 = config || {},
-        validator = _ref4.validator;
-      var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
+  React.useEffect(() => {
+    if (previousState?.editId === cellId && previousState?.activeCellId === cellId && activeCellId !== cellId) {
+      const {
+        validator
+      } = config || {};
+      const isInvalid = validator?.(cellValue);
       if (!isInvalid) {
         setInitialValue(cellValue);
       }
     }
   }, [previousState, cellId, cellValue, activeCellId, config]);
-  var handleInlineCellClick = function handleInlineCellClick() {
+  const handleInlineCellClick = () => {
     if (!inEditMode) {
       dispatch({
         type: 'ENTER_EDIT_MODE',
@@ -155,7 +145,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
         }
       });
       setInEditMode(true);
-      setTimeout(function () {
+      setTimeout(() => {
         if (type === 'selection' || type === 'date') {
           openDropdown(type);
         }
@@ -164,7 +154,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
   };
 
   // Auto focus text input when entering edit mode
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (inEditMode) {
       if (type === 'text') {
         textInputRef.current.focus();
@@ -173,50 +163,52 @@ var InlineEditCell = function InlineEditCell(_ref) {
         numberInputRef.current.focus();
       }
       if (type === 'selection') {
-        var _dropdownRef$current;
-        dropdownRef === null || dropdownRef === void 0 || (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 || _dropdownRef$current.focus();
+        dropdownRef?.current?.focus();
       }
     }
   }, [inEditMode, type]);
 
   // Saves the new cell data, onDataUpdate is a required function to be
   // passed to useDatagrid when using useInlineEdit
-  saveCellData = React.useCallback(function (newValue) {
-    var columnId = cell.column.id;
-    var rowIndex = cell.row.index;
-    onDataUpdate(function (prev) {
-      return prev.map(function (row, index) {
-        if (index === rowIndex) {
-          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev[rowIndex]), {}, _rollupPluginBabelHelpers.defineProperty({}, columnId, newValue));
-        }
-        return row;
-      });
-    });
+  saveCellData = React.useCallback(newValue => {
+    const columnId = cell.column.id;
+    const rowIndex = cell.row.index;
+    onDataUpdate(prev => prev.map((row, index) => {
+      if (index === rowIndex) {
+        return {
+          ...prev[rowIndex],
+          [columnId]: newValue
+        };
+      }
+      return row;
+    }));
   }, [cell, onDataUpdate]);
 
   // Initialize cellValue from value prop
-  React.useEffect(function () {
+  React.useEffect(() => {
     setCellValue(value);
   }, [value]);
-  var sendFocusBackToGrid = function sendFocusBackToGrid() {
+  const sendFocusBackToGrid = () => {
     // Allows the onKeyDown listener to go back to the entire grid area
-    var inlineEditArea = document.querySelector("#".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit"));
+    const inlineEditArea = document.querySelector(`#${instance.tableId} .${blockClass}__table-with-inline-edit`);
     inlineEditArea.focus();
   };
-  var getNewCellId = function getNewCellId(key) {
-    var totalRows = instance.rows.length;
-    var newCellId = key === 'Enter' ? "column-".concat(columnIndex, "-row-").concat(cell.row.index < totalRows - 1 && type === 'checkbox' ? cell.row.index + 1 : cell.row.index) : "column-".concat(columnIndex < instance.columns.length - 1 ? columnIndex + 1 : columnIndex, "-row-").concat(cell.row.index);
+  const getNewCellId = key => {
+    const totalRows = instance.rows.length;
+    const newCellId = key === 'Enter' ? `column-${columnIndex}-row-${cell.row.index < totalRows - 1 && type === 'checkbox' ? cell.row.index + 1 : cell.row.index}` : `column-${columnIndex < instance.columns.length - 1 ? columnIndex + 1 : columnIndex}-row-${cell.row.index}`;
     return newCellId;
   };
-  var handleKeyDown = function handleKeyDown(event) {
-    var key = event.key;
+  const handleKeyDown = event => {
+    const {
+      key
+    } = event;
     switch (key) {
       case 'ArrowRight':
       case 'ArrowLeft':
       case 'ArrowUp':
       case 'ArrowDown':
         if (inEditMode && event.target.type === 'checkbox') {
-          var newCellId = getNewCellId(key);
+          const newCellId = getNewCellId(key);
           saveCellData(cellValue);
           setInitialValue(cellValue);
           dispatch({
@@ -233,10 +225,10 @@ var InlineEditCell = function InlineEditCell(_ref) {
         {
           if (type === 'checkbox') {
             // Since checkbox doesn't need to click into it to enter `inEditMode` we don't need to check for it
-            var _newCellId = getNewCellId(key);
+            const newCellId = getNewCellId(key);
             dispatch({
               type: 'EXIT_EDIT_MODE',
-              payload: _newCellId
+              payload: newCellId
             });
             setInEditMode(false);
             sendFocusBackToGrid();
@@ -246,20 +238,21 @@ var InlineEditCell = function InlineEditCell(_ref) {
             if (type === 'selection' || type === 'date') {
               return;
             }
-            var _ref5 = config || {},
-              validator = _ref5.validator;
-            var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
+            const {
+              validator
+            } = config || {};
+            const isInvalid = validator?.(cellValue);
             // If an invalid state is detected, Tab/Enter should not do anything
             // until the input has a valid state once again
             if (isInvalid) {
               return;
             }
-            var _newCellId2 = getNewCellId(key);
+            const newCellId = getNewCellId(key);
             saveCellData(cellValue);
             setInitialValue(cellValue);
             dispatch({
               type: 'EXIT_EDIT_MODE',
-              payload: _newCellId2
+              payload: newCellId
             });
             setInEditMode(false);
             sendFocusBackToGrid();
@@ -284,47 +277,47 @@ var InlineEditCell = function InlineEditCell(_ref) {
         return;
     }
   };
-  var addActiveState = function addActiveState() {
+  const addActiveState = () => {
     dispatch({
       type: 'UPDATE_ACTIVE_CELL_ID',
       payload: cellId
     });
   };
-  var renderDropdownItem = function renderDropdownItem(item) {
-    var includesIcon = !!(item !== null && item !== void 0 && item.icon);
+  const renderDropdownItem = item => {
+    const includesIcon = !!item?.icon;
     return includesIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(item.icon), /*#__PURE__*/React.createElement("span", {
-      className: cx("".concat(blockClass, "__inline-edit--select-item"))
-    }, item === null || item === void 0 ? void 0 : item.text)) : item === null || item === void 0 ? void 0 : item.text;
+      className: cx(`${blockClass}__inline-edit--select-item`)
+    }, item?.text)) : item?.text;
   };
-  var handleTransformedItem = function handleTransformedItem(items) {
-    return items !== null && items !== void 0 && items.length && _rollupPluginBabelHelpers.typeof(items[0]) === 'object' ? function (item) {
-      return renderDropdownItem(item);
-    } : null;
+  const handleTransformedItem = items => {
+    return items?.length && typeof items[0] === 'object' ? item => renderDropdownItem(item) : null;
   };
-  useIsomorphicEffect.useIsomorphicEffect(function () {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     if (dropdownRef.current && dropdownRef.current.style) {
-      var closestElement = dropdownRef.current.closest(".".concat(blockClass, "__inline-edit--select"));
-      closestElement.style.width = "".concat(cell.column.totalWidth, "px");
+      const closestElement = dropdownRef.current.closest(`.${blockClass}__inline-edit--select`);
+      closestElement.style.width = `${cell.column.totalWidth}px`;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dropdownRef.current, cell.column.totalWidth]);
-  var renderSelectCell = function renderSelectCell() {
-    var _ref6 = config || {},
-      inputProps = _ref6.inputProps;
+  const renderSelectCell = () => {
+    const {
+      inputProps
+    } = config || {};
     return /*#__PURE__*/React.createElement(react.Dropdown, _rollupPluginBabelHelpers.extends({
       id: cellId,
       label: cellLabel || 'Dropdown menu options',
       ariaLabel: cellLabel || 'Dropdown menu options'
     }, inputProps, {
       hideLabel: true,
-      className: cx("".concat(blockClass, "__inline-edit--select"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--select-").concat(rowSize), rowSize)),
-      items: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.items) || [],
+      className: cx(`${blockClass}__inline-edit--select`, {
+        [`${blockClass}__inline-edit--select-${rowSize}`]: rowSize
+      }),
+      items: inputProps?.items || [],
       initialSelectedItem: cell.value,
-      itemToElement: handleTransformedItem(inputProps === null || inputProps === void 0 ? void 0 : inputProps.items),
-      renderSelectedItem: handleTransformedItem(inputProps === null || inputProps === void 0 ? void 0 : inputProps.items),
-      onChange: function onChange(item) {
-        var _inputProps$onChange;
-        var newCellId = getNewCellId('Enter');
+      itemToElement: handleTransformedItem(inputProps?.items),
+      renderSelectedItem: handleTransformedItem(inputProps?.items),
+      onChange: item => {
+        const newCellId = getNewCellId('Enter');
         saveCellData(item.selectedItem);
         setCellValue(item.selectedItem);
         dispatch({
@@ -333,12 +326,13 @@ var InlineEditCell = function InlineEditCell(_ref) {
         });
         setInEditMode(false);
         sendFocusBackToGrid();
-        inputProps === null || inputProps === void 0 || (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 || _inputProps$onChange.call(inputProps, item.selectedItem);
+        inputProps?.onChange?.(item.selectedItem);
       },
       downshiftProps: {
-        onStateChange: function onStateChange(downshiftState) {
-          var _ref7 = downshiftState || {},
-            isOpen = _ref7.isOpen;
+        onStateChange: downshiftState => {
+          const {
+            isOpen
+          } = downshiftState || {};
           // !isOpen does not work in this case because a state change occurs on hover of the
           // menu items and isOpen is changed to undefined which causes dispatch to be called unexpectedly
           if (isOpen === false) {
@@ -355,7 +349,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       autoAlign: true
     }));
   };
-  var setRenderIcon = function setRenderIcon() {
+  const setRenderIcon = () => {
     if (type === 'text') {
       return icons.Edit;
     }
@@ -369,33 +363,33 @@ var InlineEditCell = function InlineEditCell(_ref) {
       return icons.Calendar;
     }
   };
-  var renderDateCell = function renderDateCell() {
-    var _config$inputProps, _outerButtonElement$c;
-    var datePickerPreparedProps = propsHelper.prepareProps(config.inputProps, ['datePickerInputProps']);
-    var datePickerInputProps = config === null || config === void 0 || (_config$inputProps = config.inputProps) === null || _config$inputProps === void 0 ? void 0 : _config$inputProps.datePickerInputProps;
+  const renderDateCell = () => {
+    const datePickerPreparedProps = propsHelper.prepareProps(config.inputProps, ['datePickerInputProps']);
+    const datePickerInputProps = config?.inputProps?.datePickerInputProps;
     return /*#__PURE__*/React.createElement(react.DatePicker, _rollupPluginBabelHelpers.extends({}, datePickerPreparedProps, {
-      appendTo: outerButtonElement === null || outerButtonElement === void 0 || (_outerButtonElement$c = outerButtonElement.current) === null || _outerButtonElement$c === void 0 ? void 0 : _outerButtonElement$c.parentElement,
-      ref: function ref(el) {
+      appendTo: outerButtonElement?.current?.parentElement,
+      ref: el => {
         if (el && el.style) {
-          el.style.width = "".concat(cell.column.totalWidth, "px");
-          var elementId = "".concat(blockClass, "__inline-edit--date-picker--").concat(cell.row.index);
-          var element = el.querySelector("input#".concat(elementId));
+          el.style.width = `${cell.column.totalWidth}px`;
+          const elementId = `${blockClass}__inline-edit--date-picker--${cell.row.index}`;
+          const element = el.querySelector(`input#${elementId}`);
           if (element) {
             element.style.position = 'static';
           }
         }
       },
       datePickerType: "single",
-      className: cx("".concat(blockClass, "__inline-edit--date"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--date-").concat(rowSize), rowSize)),
-      onChange: function onChange(newDate) {
-        var _datePickerPreparedPr;
-        var newDateObj = newDate[0];
-        datePickerPreparedProps === null || datePickerPreparedProps === void 0 || (_datePickerPreparedPr = datePickerPreparedProps.onChange) === null || _datePickerPreparedPr === void 0 || _datePickerPreparedPr.call(datePickerPreparedProps, newDateObj, cell);
-        var newCellId = getNewCellId('Enter');
+      className: cx(`${blockClass}__inline-edit--date`, {
+        [`${blockClass}__inline-edit--date-${rowSize}`]: rowSize
+      }),
+      onChange: newDate => {
+        const newDateObj = newDate[0];
+        datePickerPreparedProps?.onChange?.(newDateObj, cell);
+        const newCellId = getNewCellId('Enter');
         saveCellData(newDateObj);
         setCellValue(newDateObj);
         // To handle the interaction of the masked input when the DatePicker and updating
-        setTimeout(function () {
+        setTimeout(() => {
           setInEditMode(false);
           sendFocusBackToGrid();
           dispatch({
@@ -406,24 +400,23 @@ var InlineEditCell = function InlineEditCell(_ref) {
       },
       value: cell.value
     }), /*#__PURE__*/React.createElement(react.DatePickerInput, _rollupPluginBabelHelpers.extends({}, datePickerInputProps, {
-      placeholder: (datePickerInputProps === null || datePickerInputProps === void 0 ? void 0 : datePickerInputProps.placeholder) || 'mm/dd/yyyy',
-      labelText: (datePickerInputProps === null || datePickerInputProps === void 0 ? void 0 : datePickerInputProps.labelText) || cellLabel || 'Set date',
-      id: "".concat(blockClass, "__inline-edit--date-picker--").concat(cell.row.index),
+      placeholder: datePickerInputProps?.placeholder || 'mm/dd/yyyy',
+      labelText: datePickerInputProps?.labelText || cellLabel || 'Set date',
+      id: `${blockClass}__inline-edit--date-picker--${cell.row.index}`,
       hideLabel: true
     })));
   };
 
   // Ensures that months and days are all 2 digits, prefixes 0 if `num` is a single digit
-  var padTo2Digits = function padTo2Digits(num) {
+  const padTo2Digits = num => {
     return num.toString().padStart(2, '0');
   };
-  var buildDate = function buildDate(value) {
-    var _config$inputProps2;
-    var dateFormat = config === null || config === void 0 || (_config$inputProps2 = config.inputProps) === null || _config$inputProps2 === void 0 ? void 0 : _config$inputProps2.dateFormat;
+  const buildDate = value => {
+    const dateFormat = config?.inputProps?.dateFormat;
     if (value instanceof Date) {
-      var maskedFullYear = value.getFullYear();
-      var maskedMonth = padTo2Digits(value.getMonth() + 1);
-      var maskedDay = padTo2Digits(value.getDate());
+      const maskedFullYear = value.getFullYear();
+      const maskedMonth = padTo2Digits(value.getMonth() + 1);
+      const maskedDay = padTo2Digits(value.getDate());
       if (dateFormat === 'm/d/Y' || value === 'm/d/y') {
         return [maskedMonth, maskedDay, maskedFullYear].join('/');
       }
@@ -435,9 +428,10 @@ var InlineEditCell = function InlineEditCell(_ref) {
     }
     return null;
   };
-  var renderNumberInput = function renderNumberInput() {
-    var _ref8 = config || {},
-      validator = _ref8.validator;
+  const renderNumberInput = () => {
+    const {
+      validator
+    } = config || {};
     return /*#__PURE__*/React.createElement(react.NumberInput, _rollupPluginBabelHelpers.extends({
       placeholder: placeholder,
       label: cellLabel
@@ -445,10 +439,12 @@ var InlineEditCell = function InlineEditCell(_ref) {
       id: cellId,
       hideLabel: true,
       defaultValue: cellValue,
-      invalid: validator === null || validator === void 0 ? void 0 : validator(cellValue),
-      invalidText: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.invalidText) || 'Provide missing invalidText',
-      onChange: function onChange(event, _ref9) {
-        var value = _ref9.value;
+      invalid: validator?.(cellValue),
+      invalidText: inputProps?.invalidText || 'Provide missing invalidText',
+      onChange: (event, _ref2) => {
+        let {
+          value
+        } = _ref2;
         setCellValue(value);
         if (inputProps.onChange) {
           inputProps.onChange(value);
@@ -457,16 +453,20 @@ var InlineEditCell = function InlineEditCell(_ref) {
       ref: numberInputRef
     }));
   };
-  var renderCheckBoxCell = function renderCheckBoxCell() {
+  const renderCheckBoxCell = () => {
     return /*#__PURE__*/React.createElement(react.Checkbox, _rollupPluginBabelHelpers.extends({
       labelText: cellLabel || 'Checkbox'
     }, inputProps, {
-      className: cx("".concat(blockClass, "__inline-edit--outer-cell-checkbox"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-checkbox-focus"), activeCellId === cellId)),
+      className: cx(`${blockClass}__inline-edit--outer-cell-checkbox`, {
+        [`${blockClass}__inline-edit--outer-cell-checkbox-focus`]: activeCellId === cellId
+      }),
       id: cellId,
       hideLabel: true,
       checked: cellValue,
-      onChange: function onChange(event, _ref10) {
-        var checked = _ref10.checked;
+      onChange: (event, _ref3) => {
+        let {
+          checked
+        } = _ref3;
         setCellValue(checked);
         if (inputProps.onChange) {
           inputProps.onChange(checked);
@@ -475,10 +475,11 @@ var InlineEditCell = function InlineEditCell(_ref) {
       ref: checkboxRef
     }));
   };
-  var renderTextInput = function renderTextInput() {
-    var _ref11 = config || {},
-      validator = _ref11.validator;
-    var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
+  const renderTextInput = () => {
+    const {
+      validator
+    } = config || {};
+    const isInvalid = validator?.(cellValue);
     return /*#__PURE__*/React.createElement(react.TextInput, _rollupPluginBabelHelpers.extends({
       labelText: cellLabel,
       placeholder: placeholder
@@ -487,8 +488,8 @@ var InlineEditCell = function InlineEditCell(_ref) {
       hideLabel: true,
       defaultValue: cellValue,
       invalid: isInvalid,
-      invalidText: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.invalidText) || 'Provide missing invalidText',
-      onChange: function onChange(event) {
+      invalidText: inputProps?.invalidText || 'Provide missing invalidText',
+      onChange: event => {
         setCellValue(event.target.value);
         if (inputProps.onChange) {
           inputProps.onChange(event.target.value);
@@ -497,22 +498,21 @@ var InlineEditCell = function InlineEditCell(_ref) {
       ref: textInputRef
     }));
   };
-  var getLabel = function getLabel() {
-    var _value$text, _checkStaticCell;
-    var checkStaticCell = function checkStaticCell(val) {
-      if (_rollupPluginBabelHelpers.typeof(val) === 'object' && val !== null && val !== void 0 && val.isStaticCell) {
-        return val === null || val === void 0 ? void 0 : val.value;
+  const getLabel = () => {
+    const checkStaticCell = val => {
+      if (typeof val === 'object' && val?.isStaticCell) {
+        return val?.value;
       }
     };
     switch (type) {
       case 'selection':
         checkStaticCell(value);
-        return (_value$text = value === null || value === void 0 ? void 0 : value.text) !== null && _value$text !== void 0 ? _value$text : value;
+        return value?.text ?? value;
       case 'date':
         checkStaticCell(value);
         return buildDate(value);
       default:
-        return (_checkStaticCell = checkStaticCell(value)) !== null && _checkStaticCell !== void 0 ? _checkStaticCell : value;
+        return checkStaticCell(value) ?? value;
     }
   };
   return (
@@ -527,13 +527,18 @@ var InlineEditCell = function InlineEditCell(_ref) {
       "data-inline-type": type,
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
-      className: cx("".concat(blockClass, "__inline-edit--outer-cell-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), inEditMode && (config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue))), "".concat(blockClass, "__static--outer-cell"), !disabledCell))
+      className: cx(`${blockClass}__inline-edit--outer-cell-button`, {
+        [`${blockClass}__inline-edit--outer-cell-button--${rowSize}`]: rowSize,
+        [`${blockClass}__inline-edit--outer-cell-button--lg`]: !rowSize,
+        [`${blockClass}__inline-edit--outer-cell-button--invalid`]: inEditMode && config?.validator?.(cellValue),
+        [`${blockClass}__static--outer-cell`]: !disabledCell
+      })
     }, (!inEditMode || disabledCell) && type !== 'checkbox' && /*#__PURE__*/React.createElement(InlineEditButton.InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),
       label: getLabel(),
       disabledCell: disabledCell,
-      labelIcon: (value === null || value === void 0 ? void 0 : value.icon) || null,
+      labelIcon: value?.icon || null,
       placeholder: placeholder,
       tabIndex: tabIndex,
       nonEditCell: nonEditCell,