@elliemae/ds-data-table 2.2.0-alpha.3 → 2.2.0-next.2

package/esm/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -1,161 +1,210 @@
-import * as React from "react";
-import React2, { useMemo, useCallback } from "react";
-import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from "@elliemae/ds-icons";
-import styled from "styled-components";
-import { StyledFocusWithin } from "../../../styled";
-import { DATA_TESTID } from "../../../configs/constants";
-const StyledSpan = styled.span`
-  cursor: pointer;
-  box-sizing: border-box;
-  outline: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useMemo, useCallback } from 'react';
+import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';
+import styled from 'styled-components';
+import { StyledFocusWithin } from '../../../styled.js';
+import { DATA_TESTID } from '../../../configs/constants.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'react-virtual';
+import '../../../configs/useRowFlattenization.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '@elliemae/ds-form';
+import '../../../parts/TableContent.js';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../../../DataTableContext.js';
+import '../../../parts/Row.js';
+import '../../../parts/Footer.js';
+import '../../../parts/HoC/SortableItemContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+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) { _defineProperty(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; }
+const StyledSpan = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1xp824d-0"
+})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
 const expandRowColumn = {
-  id: "expander",
-  accessor: "expandRowColumn",
-  Header: ({ ctx }) => {
+  // Build our expander column
+  id: 'expander',
+  // Make sure it has an ID
+  accessor: 'expandRowColumn',
+  Header: _ref => {
+    let {
+      ctx
+    } = _ref;
     const {
-      tableProps: { expandedRows, onRowExpand },
+      tableProps: {
+        expandedRows,
+        onRowExpand
+      },
       allDataFlattened
     } = ctx;
     const allExpandable = useMemo(() => {
       const expandable = {};
-      allDataFlattened.forEach((row) => {
-        if (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue)
-          expandable[row.uid] = true;
+      allDataFlattened.forEach(row => {
+        if (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue) expandable[row.uid] = true;
       });
       return expandable;
     }, [allDataFlattened]);
     const isAllRowsExpanded = useMemo(() => Object.keys(allExpandable).length === Object.keys(expandedRows).length, [allExpandable, expandedRows]);
     const onExpandedAllHandler = useCallback(() => {
-      if (isAllRowsExpanded)
-        onRowExpand({}, "All");
-      else
-        onRowExpand({ ...allExpandable }, "All");
+      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread({}, allExpandable), 'All');
     }, [allExpandable, isAllRowsExpanded, onRowExpand]);
     const GlobalExpandIcon = useMemo(() => {
-      if (isAllRowsExpanded)
-        return /* @__PURE__ */ React2.createElement(ArrowheadDown, {
-          size: "s",
-          color: ["brand-primary", "600"],
-          "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-        });
+      if (isAllRowsExpanded) return /*#__PURE__*/_jsx(ArrowheadDown, {
+        size: "s",
+        color: ['brand-primary', '600'],
+        "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
+      }); // Mixed
+
       if (Object.keys(expandedRows).length) {
-        return /* @__PURE__ */ React2.createElement(ArrowheadRight, {
+        return /*#__PURE__*/_jsx(ArrowheadRight, {
           size: "s",
-          color: ["brand-primary", "600"],
+          color: ['brand-primary', '600'],
           "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED,
-          style: { transform: "rotate(45deg)" }
+          style: {
+            transform: 'rotate(45deg)'
+          }
         });
       }
-      return /* @__PURE__ */ React2.createElement(ArrowheadRight, {
+
+      return /*#__PURE__*/_jsx(ArrowheadRight, {
         size: "s",
-        color: ["brand-primary", "600"],
+        color: ['brand-primary', '600'],
         "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
       });
     }, [expandedRows, isAllRowsExpanded]);
-    return /* @__PURE__ */ React2.createElement(StyledFocusWithin, null, /* @__PURE__ */ React2.createElement(StyledSpan, {
+    return /*#__PURE__*/_jsx(StyledFocusWithin, {}, void 0, /*#__PURE__*/_jsx(StyledSpan, {
       role: "button",
       tabIndex: 0,
       title: "Toggle All Rows Expanded",
       onClick: onExpandedAllHandler,
-      onKeyDown: (e) => {
-        if (["Enter", "Space"].includes(e.code)) {
+      onKeyDown: e => {
+        if (['Enter', 'Space'].includes(e.code)) {
           onExpandedAllHandler();
           e.preventDefault();
         }
       },
       "data-testid": DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL,
       "aria-expanded": isAllRowsExpanded,
-      style: { width: "24px", height: "24px" }
-    }, GlobalExpandIcon));
+      style: {
+        width: '24px',
+        height: '24px'
+      }
+    }, void 0, GlobalExpandIcon));
   },
-  Cell: ({ cell, row, isRowSelected, ctx, draggableProps }) => {
+  Cell: _ref2 => {
+    var _row$original$subRows;
+
+    let {
+      cell,
+      row,
+      isRowSelected,
+      ctx,
+      draggableProps
+    } = _ref2;
     const {
-      tableProps: { dragAndDropRows, expandedRows, onRowExpand }
+      tableProps: {
+        dragAndDropRows,
+        expandedRows,
+        onRowExpand
+      }
     } = ctx;
     const uniqueId = row.uid;
     const isExpanded = expandedRows[uniqueId];
-    const shouldPrintCaret = row.original.subRows?.length && row.depth === 0 || row.original.tableRowDetails || row.original.dimsumHeaderValue;
-    const onRowExpandHandler = useCallback((e) => {
+    const shouldPrintCaret = ((_row$original$subRows = row.original.subRows) === null || _row$original$subRows === void 0 ? void 0 : _row$original$subRows.length) && row.depth === 0 || // only allows 1 level of expands
+    row.original.tableRowDetails || row.original.dimsumHeaderValue;
+    const onRowExpandHandler = useCallback(e => {
       e.stopPropagation();
+
       if (expandedRows[uniqueId]) {
         delete expandedRows[uniqueId];
       } else {
         expandedRows[uniqueId] = true;
       }
-      onRowExpand({ ...expandedRows }, uniqueId);
+
+      onRowExpand(_objectSpread({}, expandedRows), uniqueId);
     }, [expandedRows, uniqueId, onRowExpand]);
     const isDragging = draggableProps ? draggableProps.isDragging : false;
     const isDragOverlay = dragAndDropRows && !draggableProps;
     const indentStyle = useMemo(() => ({
-      marginLeft: `${row.depth * 32}px`,
-      marginRight: "18px",
-      paddingLeft: "2px",
-      paddingRight: "2px",
-      position: "relative",
-      height: "100%",
-      display: "flex",
-      alignItems: "center"
+      marginLeft: "".concat(row.depth * 32, "px"),
+      marginRight: '18px',
+      paddingLeft: '2px',
+      paddingRight: '2px',
+      position: 'relative',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center'
     }), [row.depth]);
     const rowProps = useMemo(() => ({
-      role: "button",
-      key: `${row.uid}-expand-button`,
-      title: "Toggle Row Expanded",
+      role: 'button',
+      key: "".concat(row.uid, "-expand-button"),
+      title: 'Toggle Row Expanded',
       onClick: onRowExpandHandler,
-      onKeyDown: (e) => {
-        if (["Enter", "Space"].includes(e.code)) {
+      onKeyDown: e => {
+        if (['Enter', 'Space'].includes(e.code)) {
           e.preventDefault();
           onRowExpandHandler(e);
         }
       },
       ref: cell.ref,
       tabIndex: isRowSelected ? 0 : -1,
-      "data-testid": "data-table-row-expand-cell",
-      "aria-expanded": isExpanded,
+      'data-testid': 'data-table-row-expand-cell',
+      'aria-expanded': isExpanded,
       isRightArrow: !isExpanded || isDragging || isDragOverlay
     }), [row.uid, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay]);
-    const PureCaretIcon = useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /* @__PURE__ */ React2.createElement(ArrowheadDown, {
+    const PureCaretIcon = useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /*#__PURE__*/_jsx(ArrowheadDown, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",
       size: "s",
       "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-    }) : /* @__PURE__ */ React2.createElement(ArrowheadRight, {
+    }) : /*#__PURE__*/_jsx(ArrowheadRight, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",
       size: "s",
       "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
     }), [isExpanded, isDragging, isDragOverlay]);
-    const ChildIcon = useMemo(() => /* @__PURE__ */ React2.createElement(ArrowShortReturn, {
+    const ChildIcon = useMemo(() => /*#__PURE__*/_jsx(ArrowShortReturn, {
       size: "s",
       "data-testid": DATA_TESTID.DATA_TABLE_ICON_CHILD,
-      style: { transform: "rotate(90deg) scaleY(-1)" },
-      color: ["brand-primary", "600"]
+      style: {
+        transform: 'rotate(90deg) scaleY(-1)'
+      },
+      color: ['brand-primary', '600']
     }), []);
-    if (shouldPrintCaret)
-      return /* @__PURE__ */ React2.createElement(StyledFocusWithin, {
-        style: indentStyle
-      }, /* @__PURE__ */ React2.createElement(StyledSpan, {
-        ...rowProps
-      }, PureCaretIcon));
-    if (row.depth !== 0)
-      return /* @__PURE__ */ React2.createElement("span", {
-        style: indentStyle
-      }, ChildIcon);
-    return /* @__PURE__ */ React2.createElement("div", {
-      style: { width: "36px" }
+    if (shouldPrintCaret) return /*#__PURE__*/_jsx(StyledFocusWithin, {
+      style: indentStyle
+    }, void 0, /*#__PURE__*/jsx(StyledSpan, _objectSpread(_objectSpread({}, rowProps), {}, {
+      children: PureCaretIcon
+    })));
+    if (row.depth !== 0) return /*#__PURE__*/_jsx("span", {
+      style: indentStyle
+    }, void 0, ChildIcon);
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        width: '36px'
+      }
     });
   },
-  textWrap: "wrap",
+  textWrap: 'wrap',
   canResize: false,
   width: 25,
   padding: 0,
   isFocuseable: false,
   disableDnD: true
 };
-export {
-  expandRowColumn
-};
-//# sourceMappingURL=ColumnExpand.js.map
+
+export { expandRowColumn };

package/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js

@@ -1,79 +1,141 @@
-import * as React from "react";
-import React2, { useMemo, useCallback } from "react";
-import { DSCheckbox } from "@elliemae/ds-form";
-import { DATA_TESTID } from "../../../configs/constants";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useMemo, useCallback } from 'react';
+import { DSCheckbox } from '@elliemae/ds-form';
+import { DATA_TESTID } from '../../../configs/constants.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'react-virtual';
+import '../../../configs/useRowFlattenization.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '@elliemae/ds-icons';
+import 'styled-components';
+import '../../../styled.js';
+import 'react/jsx-runtime';
+import '../../../parts/TableContent.js';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../../../DataTableContext.js';
+import '../../../parts/Row.js';
+import '../../../parts/Footer.js';
+import '../../../parts/HoC/SortableItemContext.js';
+
+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) { _defineProperty(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; }
 const multiSelectColumn = {
-  id: "multiSelecter",
-  Header: ({ ctx }) => {
+  // Build our multiSelecter column
+  id: 'multiSelecter',
+  // Make sure it has an ID
+  Header: _ref => {
+    let {
+      ctx
+    } = _ref;
     const {
-      tableProps: { onSelectionChange, selection, data, disabledRows },
+      tableProps: {
+        onSelectionChange,
+        selection,
+        data,
+        disabledRows
+      },
       allDataFlattened
     } = ctx;
     const selectionKeyCount = Object.keys(selection).length;
-    const currentGlobalState = useMemo(() => selectionKeyCount > 0 && selectionKeyCount < data.length ? "mixed" : selectionKeyCount > 0, [selectionKeyCount, data]);
+    const currentGlobalState = useMemo(() => selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0, [selectionKeyCount, data]);
     const newGlobalStateAfterToggle = useMemo(() => {
+      // false -- toggles into --> true
+      // mixed  -- toggles into --> true
+      // true  -- toggles into --> false
       let newState = false;
-      if (currentGlobalState === false || currentGlobalState === "mixed")
-        newState = true;
+      if (currentGlobalState === false || currentGlobalState === 'mixed') newState = true;
       return newState;
     }, [currentGlobalState]);
     const newSelection = useMemo(() => {
       if (newGlobalStateAfterToggle) {
         const nextSelection = {};
-        allDataFlattened.forEach((datum) => {
+        allDataFlattened.forEach(datum => {
           nextSelection[datum.uid] = !disabledRows[datum.uid];
         });
         return nextSelection;
       }
+
       return {};
     }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);
-    const onChangeHandler = useCallback((e) => {
-      onSelectionChange(newSelection, "All", e);
+    const onChangeHandler = useCallback(e => {
+      onSelectionChange(newSelection, 'All', e);
     }, [newSelection, onSelectionChange]);
-    const PureHeaderCheckbox = useMemo(() => /* @__PURE__ */ React2.createElement(DSCheckbox, {
+    const PureHeaderCheckbox = useMemo(() => /*#__PURE__*/_jsx(DSCheckbox, {
       "data-testid": DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX,
       title: "Toggle All Rows Selected",
       checked: currentGlobalState,
       onChange: onChangeHandler,
       tabIndex: "0",
-      style: { cursor: "pointer" }
+      style: {
+        cursor: 'pointer'
+      }
     }), [currentGlobalState, onChangeHandler]);
     return PureHeaderCheckbox;
   },
-  Cell: ({ cell, row, isRowSelected, ctx }) => {
+  Cell: _ref2 => {
+    let {
+      cell,
+      row,
+      isRowSelected,
+      ctx
+    } = _ref2;
     const {
-      tableProps: { onSelectionChange, selection, disabledRows }
+      tableProps: {
+        onSelectionChange,
+        selection,
+        disabledRows
+      }
     } = ctx;
-    const { uid } = row;
-    const selectedState = selection?.[uid];
-    const PureCheckboxCell = useMemo(() => /* @__PURE__ */ React2.createElement(DSCheckbox, {
+    const {
+      uid
+    } = row;
+    const selectedState = selection === null || selection === void 0 ? void 0 : selection[uid];
+    const PureCheckboxCell = useMemo(() => /*#__PURE__*/_jsx(DSCheckbox, {
       "data-testid": DATA_TESTID.DATA_TABLE_CHECKBOX,
       title: "Toggle Row Selected",
       "aria-checked": selectedState,
       "aria-disabled": false,
       checked: selectedState,
-      onChange: (e) => {
+      onChange: e => {
         const newState = !selectedState;
-        const newSelection = { ...selection, [uid]: newState };
-        if (!newState)
-          delete newSelection[uid];
+
+        const newSelection = _objectSpread(_objectSpread({}, selection), {}, {
+          [uid]: newState
+        }); // we only want true and mixed values
+
+
+        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection
+
         onSelectionChange(newSelection, uid, e);
       },
       disabled: disabledRows[row.uid],
       innerRef: cell.ref,
       tabIndex: isRowSelected ? 0 : -1,
-      style: { cursor: "pointer" }
+      style: {
+        cursor: 'pointer'
+      }
     }), [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange]);
     return PureCheckboxCell;
   },
-  textWrap: "wrap",
+  textWrap: 'wrap',
   width: 32,
   padding: 7,
   canResize: false,
   isFocuseable: false,
   disableDnD: true
 };
-export {
-  multiSelectColumn
-};
-//# sourceMappingURL=ColumnSelectMultiple.js.map
+
+export { multiSelectColumn };

package/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js

@@ -1,37 +1,78 @@
-import * as React from "react";
-import React2, { useMemo } from "react";
-import { DSRadio } from "@elliemae/ds-form";
-import styled from "styled-components";
-import { DATA_TESTID } from "../../../configs/constants";
-const CenteredContent = styled.div`
-  display: flex;
-  height: 100%;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-`;
-const StyledDSRadio = styled(DSRadio)`
-  padding-bottom: 0;
-  cursor: pointer;
-`;
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useMemo } from 'react';
+import { DSRadio } from '@elliemae/ds-form';
+import styled from 'styled-components';
+import { DATA_TESTID } from '../../../configs/constants.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'react-virtual';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import '../../../configs/useRowFlattenization.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '@elliemae/ds-icons';
+import '../../../styled.js';
+import 'react/jsx-runtime';
+import '../../../parts/TableContent.js';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../../../DataTableContext.js';
+import '../../../parts/Row.js';
+import '../../../parts/Footer.js';
+import '../../../parts/HoC/SortableItemContext.js';
+
+var _div;
+const CenteredContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1u47u8g-0"
+})(["display:flex;height:100%;width:100%;justify-content:center;align-items:center;"]);
+const StyledDSRadio = /*#__PURE__*/styled(DSRadio).withConfig({
+  componentId: "sc-1u47u8g-1"
+})(["padding-bottom:0;cursor:pointer;"]);
 const singleSelectColumn = {
-  id: "singleSelecter",
-  Header: () => /* @__PURE__ */ React2.createElement("div", null),
-  Cell: ({ cell, row, isRowSelected, ctx }) => {
+  // Build our singleSelecter column
+  id: 'singleSelecter',
+  // Make sure it has an ID
+  // The header doesn't need anything for single selection
+  Header: () => _div || (_div = /*#__PURE__*/_jsx("div", {})),
+  Cell: _ref => {
+    let {
+      cell,
+      row,
+      isRowSelected,
+      ctx
+    } = _ref;
     const {
-      tableProps: { onSelectionChange, selection, disabledRows }
+      tableProps: {
+        onSelectionChange,
+        selection,
+        disabledRows
+      }
     } = ctx;
-    const { uid } = row;
-    const selectedState = selection?.[uid];
-    const PureCheckBox = useMemo(() => /* @__PURE__ */ React2.createElement(CenteredContent, null, /* @__PURE__ */ React2.createElement(StyledDSRadio, {
+    const {
+      uid
+    } = row;
+    const selectedState = selection === null || selection === void 0 ? void 0 : selection[uid];
+    const PureCheckBox = useMemo(() => /*#__PURE__*/_jsx(CenteredContent, {}, void 0, /*#__PURE__*/_jsx(StyledDSRadio // eslint-disable-next-line react/prop-types
+    , {
       containerProps: {
-        "aria-checked": selectedState,
-        "aria-disabled": false,
-        title: "Toggle Row Selected"
+        'aria-checked': selectedState,
+        'aria-disabled': false,
+        title: 'Toggle Row Selected'
       },
       checked: selectedState,
       onChange: () => {
-        onSelectionChange(!selectedState ? { [uid]: !selectedState } : {});
+        // in single select we only allow one item to be selected
+        onSelectionChange(!selectedState ? {
+          [uid]: !selectedState
+        } : {});
       },
       "data-testid": DATA_TESTID.DATA_TABLE_RADIO,
       disabled: disabledRows[row.uid],
@@ -41,14 +82,12 @@ const singleSelectColumn = {
     })), [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, onSelectionChange, uid]);
     return PureCheckBox;
   },
-  textWrap: "wrap",
+  textWrap: 'wrap',
   width: 32,
   padding: 4,
   canResize: false,
   isFocuseable: false,
   disableDnD: true
 };
-export {
-  singleSelectColumn
-};
-//# sourceMappingURL=ColumnSelectSingle.js.map
+
+export { singleSelectColumn };

package/esm/addons/Columns/index.js

@@ -1,22 +1,9 @@
-import * as React from "react";
-import { actionColumn } from "./ColumnAction/ColumnAction";
-import { expandRowColumn } from "./ColumnExpand/ColumnExpand";
-import { multiSelectColumn } from "./ColumnSelectMultiple/ColumnSelectMultiple";
-import { singleSelectColumn } from "./ColumnSelectSingle/ColumnSelectSingle";
-import { dragHandleColumn } from "./ColumnDragHandle/ColumnDragHandle";
-const INTERNAL_COLUMNS = [
-  "rowActions",
-  "expander",
-  "multiSelecter",
-  "singleSelecter",
-  "dragHandleColumn"
-];
-export {
-  INTERNAL_COLUMNS,
-  actionColumn,
-  dragHandleColumn,
-  expandRowColumn,
-  multiSelectColumn,
-  singleSelectColumn
-};
-//# sourceMappingURL=index.js.map
+export { actionColumn } from './ColumnAction/ColumnAction.js';
+export { expandRowColumn } from './ColumnExpand/ColumnExpand.js';
+export { multiSelectColumn } from './ColumnSelectMultiple/ColumnSelectMultiple.js';
+export { singleSelectColumn } from './ColumnSelectSingle/ColumnSelectSingle.js';
+export { dragHandleColumn } from './ColumnDragHandle/ColumnDragHandle.js';
+
+const INTERNAL_COLUMNS = ['rowActions', 'expander', 'multiSelecter', 'singleSelecter', 'dragHandleColumn'];
+
+export { INTERNAL_COLUMNS };