@papillonbits/components 1.13.0 → 1.14.0

package/build/primer/Grid/DisplayTable/DisplayTable.js

@@ -1,58 +1,48 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DisplayTable = DisplayTable;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _uuid = require("uuid");
-var _visibilityDisplay = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/visibility-display.scss"));
-var _borders = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/borders.scss"));
-var _padding = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/padding.scss"));
-var _typography = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/typography.scss"));
-var _colors = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/colors.scss"));
-var _grid = _interopRequireDefault(require("../../Layout/grid.scss"));
-var _DisplayTable = require("./DisplayTable.prop");
-var _jsxRuntime = require("react/jsx-runtime");
-function DisplayTable(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? _DisplayTable.defaultProps.className : _ref$className,
-    items = _ref.items,
-    _ref$idIndex = _ref.idIndex,
-    idIndex = _ref$idIndex === void 0 ? _DisplayTable.defaultProps.idIndex : _ref$idIndex,
-    _ref$isSelectedIndex = _ref.isSelectedIndex,
-    isSelectedIndex = _ref$isSelectedIndex === void 0 ? _DisplayTable.defaultProps.isSelectedIndex : _ref$isSelectedIndex;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])(className, _visibilityDisplay["default"]['d-table'], _grid["default"]['col-12'], _colors["default"]['bg-blue-light']),
-      children: items[0].names.map(function (name, index) {
-        var isIdColumn = index === idIndex;
-        var isSelectedColumn = index === isSelectedIndex;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-          children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _classnames["default"])(_grid["default"]['col-2'], _visibilityDisplay["default"]['d-table-cell'], _borders["default"].border, _padding["default"]['p-2'], _typography["default"].h6),
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.map.js";
+import { Fragment } from 'react';
+import cx from 'classnames';
+import { v1 as uuidv1 } from 'uuid';
+import displayStyles from '@papillonbits/css/build/primer/utilities/visibility-display.scss';
+import borderStyles from '@papillonbits/css/build/primer/utilities/borders.scss';
+import paddingStyles from '@papillonbits/css/build/primer/utilities/padding.scss';
+import typographyStyles from '@papillonbits/css/build/primer/utilities/typography.scss';
+import colorStyles from '@papillonbits/css/build/primer/utilities/colors.scss';
+import gridStyles from '../../Layout/grid.scss';
+import { propTypes, defaultProps } from './DisplayTable.prop';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function DisplayTable({
+  className = defaultProps.className,
+  items,
+  idIndex = defaultProps.idIndex,
+  isSelectedIndex = defaultProps.isSelectedIndex
+}) {
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: cx(className, displayStyles['d-table'], gridStyles['col-12'], colorStyles['bg-blue-light']),
+      children: items[0].names.map((name, index) => {
+        const isIdColumn = index === idIndex;
+        const isSelectedColumn = index === isSelectedIndex;
+        return /*#__PURE__*/_jsx(Fragment, {
+          children: !isIdColumn && /*#__PURE__*/_jsx("div", {
+            className: cx(gridStyles['col-2'], displayStyles['d-table-cell'], borderStyles.border, paddingStyles['p-2'], typographyStyles.h6),
             children: isSelectedColumn ? '' : name
-          }, (0, _uuid.v1)())
-        }, (0, _uuid.v1)());
+          }, uuidv1())
+        }, uuidv1());
       })
-    }), items.map(function (item) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames["default"])(className, _visibilityDisplay["default"]['d-table'], _grid["default"]['col-12']),
-        children: item.values.map(function (value, valueIndex) {
-          var _value$value;
-          var isIdColumn = valueIndex === idIndex;
-          var isSelectedColumn = valueIndex === isSelectedIndex;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-            children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _classnames["default"])(_grid["default"]['col-2'], _visibilityDisplay["default"]['d-table-cell'], _borders["default"].border, _padding["default"]['p-2']),
-              children: isSelectedColumn ? '' : (_value$value = value === null || value === void 0 ? void 0 : value.value) !== null && _value$value !== void 0 ? _value$value : value
-            }, (0, _uuid.v1)())
-          }, (0, _uuid.v1)());
-        })
-      }, (0, _uuid.v1)());
-    })]
+    }), items.map(item => /*#__PURE__*/_jsx("div", {
+      className: cx(className, displayStyles['d-table'], gridStyles['col-12']),
+      children: item.values.map((value, valueIndex) => {
+        const isIdColumn = valueIndex === idIndex;
+        const isSelectedColumn = valueIndex === isSelectedIndex;
+        return /*#__PURE__*/_jsx(Fragment, {
+          children: !isIdColumn && /*#__PURE__*/_jsx("div", {
+            className: cx(gridStyles['col-2'], displayStyles['d-table-cell'], borderStyles.border, paddingStyles['p-2']),
+            children: isSelectedColumn ? '' : value?.value ?? value
+          }, uuidv1())
+        }, uuidv1());
+      })
+    }, uuidv1()))]
   });
 }
-DisplayTable.propTypes = _DisplayTable.propTypes;
+DisplayTable.propTypes = propTypes;

package/build/primer/Grid/DisplayTable/DisplayTable.prop.js

@@ -1,17 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.defaultProps = void 0;
-var _propTypes = require("prop-types");
-var propTypes = exports.propTypes = {
-  className: _propTypes.string,
-  items: _propTypes.array.isRequired,
-  idIndex: _propTypes.number,
-  isSelectedIndex: _propTypes.number
+import { string, array, number } from 'prop-types';
+export const propTypes = {
+  className: string,
+  items: array.isRequired,
+  idIndex: number,
+  isSelectedIndex: number
 };
-var defaultProps = exports.defaultProps = {
+export const defaultProps = {
   className: null,
   idIndex: -1,
   isSelectedIndex: -1

package/build/primer/Grid/DisplayTable/index.js

@@ -1,12 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "DisplayTable", {
-  enumerable: true,
-  get: function get() {
-    return _DisplayTable.DisplayTable;
-  }
-});
-var _DisplayTable = require("./DisplayTable");
+export { DisplayTable } from './DisplayTable';

package/build/primer/Grid/FlexGrid/FlexGrid.js

@@ -1,244 +1,223 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FlexGrid = FlexGrid;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _uuid = require("uuid");
-var _string = require("@papillonbits/library/string");
-var _sort = require("@papillonbits/library/sort");
-var _visibilityDisplay = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/visibility-display.scss"));
-var _flexbox = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/flexbox.scss"));
-var _borders = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/borders.scss"));
-var _padding = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/padding.scss"));
-var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
-var _typography = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/typography.scss"));
-var _layout = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/layout.scss"));
-var _colors = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/colors.scss"));
-var _index = _interopRequireDefault(require("@papillonbits/css/build/primer/truncate/index.scss"));
-var _grid = _interopRequireDefault(require("../../Layout/grid.scss"));
-var _FlexGrid = require("./FlexGrid.prop");
-var _FlexGrid2 = _interopRequireDefault(require("./FlexGrid.scss"));
-var _Radio = require("../../Form/Radio");
-var _Checkbox = require("../../Form/Checkbox");
-var _Icon = require("../../Icon");
-var _jsxRuntime = require("react/jsx-runtime");
-function FlexGrid(_ref) {
-  var _items$;
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? _FlexGrid.defaultProps.className : _ref$className,
-    items = _ref.items,
-    _ref$idIndex = _ref.idIndex,
-    idIndex = _ref$idIndex === void 0 ? _FlexGrid.defaultProps.idIndex : _ref$idIndex,
-    _ref$isSelectedIndex = _ref.isSelectedIndex,
-    isSelectedIndex = _ref$isSelectedIndex === void 0 ? _FlexGrid.defaultProps.isSelectedIndex : _ref$isSelectedIndex,
-    _ref$selection = _ref.selection,
-    selection = _ref$selection === void 0 ? _FlexGrid.defaultProps.selection : _ref$selection,
-    sort = _ref.sort,
-    _ref$onChange = _ref.onChange,
-    _onChange = _ref$onChange === void 0 ? _FlexGrid.defaultProps.onChange : _ref$onChange,
-    _ref$onClick = _ref.onClick,
-    _onClick = _ref$onClick === void 0 ? _FlexGrid.defaultProps.onClick : _ref$onClick,
-    _ref$onDoubleClick = _ref.onDoubleClick,
-    _onDoubleClick = _ref$onDoubleClick === void 0 ? _FlexGrid.defaultProps.onDoubleClick : _ref$onDoubleClick,
-    _ref$iconColor = _ref.iconColor,
-    iconColor = _ref$iconColor === void 0 ? _FlexGrid.defaultProps.iconColor : _ref$iconColor,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? _FlexGrid.defaultProps.state : _ref$state;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])(className, (0, _defineProperty2["default"])({}, _FlexGrid2["default"]['flexGrid-inactive'], state === _FlexGrid.flexGridState.inactive)),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _flexbox["default"]['flex-items-start'], _colors["default"]['bg-blue-light'], (0, _defineProperty2["default"])({}, _borders["default"].border, items === null || items === void 0 ? void 0 : items[0])),
-      children: items === null || items === void 0 || (_items$ = items[0]) === null || _items$ === void 0 || (_items$ = _items$.names) === null || _items$ === void 0 ? void 0 : _items$.map(function (name, nameIndex) {
-        var _items$2;
-        var isIdColumn = nameIndex === idIndex;
-        var isSelectedColumn = nameIndex === isSelectedIndex;
-        var isSelectedComponent = selection === _FlexGrid.flexGridSelection.radio ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.every.js";
+import "core-js/modules/es.iterator.find.js";
+import "core-js/modules/es.iterator.map.js";
+import { Fragment } from 'react';
+import cx from 'classnames';
+import { v1 as uuidv1 } from 'uuid';
+import { getCapizalizedString } from '@papillonbits/library/string';
+import { sortOrder } from '@papillonbits/library/sort';
+import displayStyles from '@papillonbits/css/build/primer/utilities/visibility-display.scss';
+import flexboxStyles from '@papillonbits/css/build/primer/utilities/flexbox.scss';
+import borderStyles from '@papillonbits/css/build/primer/utilities/borders.scss';
+import paddingStyles from '@papillonbits/css/build/primer/utilities/padding.scss';
+import marginStyles from '@papillonbits/css/build/primer/utilities/margin.scss';
+import typographyStyles from '@papillonbits/css/build/primer/utilities/typography.scss';
+import layoutStyles from '@papillonbits/css/build/primer/utilities/layout.scss';
+import colorStyles from '@papillonbits/css/build/primer/utilities/colors.scss';
+import truncateStyles from '@papillonbits/css/build/primer/truncate/index.scss';
+import gridStyles from '../../Layout/grid.scss';
+import { propTypes, defaultProps, flexGridSelection, flexGridState } from './FlexGrid.prop';
+import styles from './FlexGrid.scss';
+import { Radio } from '../../Form/Radio';
+import { Checkbox } from '../../Form/Checkbox';
+import { Icon, iconName, iconSize } from '../../Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function FlexGrid({
+  className = defaultProps.className,
+  items,
+  idIndex = defaultProps.idIndex,
+  isSelectedIndex = defaultProps.isSelectedIndex,
+  selection = defaultProps.selection,
+  sort,
+  onChange = defaultProps.onChange,
+  onClick = defaultProps.onClick,
+  onDoubleClick = defaultProps.onDoubleClick,
+  iconColor = defaultProps.iconColor,
+  state = defaultProps.state
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(className, {
+      [styles['flexGrid-inactive']]: state === flexGridState.inactive
+    }),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: cx(displayStyles['d-flex'], flexboxStyles['flex-row'], flexboxStyles['flex-items-start'], colorStyles['bg-blue-light'], {
+        [borderStyles.border]: items?.[0]
+      }),
+      children: items?.[0]?.names?.map((name, nameIndex) => {
+        const isIdColumn = nameIndex === idIndex;
+        const isSelectedColumn = nameIndex === isSelectedIndex;
+        const isSelectedComponent = selection === flexGridSelection.radio ? null : /*#__PURE__*/_jsx(Checkbox, {
           ariaAttr: {
             describedBy: name
           },
-          isChecked: items.map(function (item) {
-            return item.values[1];
-          }).every(function (isSelected) {
-            return isSelected === true;
-          }),
-          onChange: function onChange(event) {
-            var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref2) {
-              var values = _ref2.values;
-              return values === null || values === void 0 ? void 0 : values.map(function (value, valueIndex) {
-                return valueIndex === isSelectedIndex ? event.target.checked : value;
-              });
-            }).map(function (newItem) {
-              return {
-                id: newItem[idIndex],
-                isSelected: newItem[isSelectedIndex]
-              };
-            });
-            _onChange(newItems);
+          isChecked: items.map(item => item.values[1]).every(isSelected => isSelected === true),
+          onChange: event => {
+            const newItems = items?.map(({
+              values
+            }) => values?.map((value, valueIndex) => valueIndex === isSelectedIndex ? event.target.checked : value)).map(newItem => ({
+              id: newItem[idIndex],
+              isSelected: newItem[isSelectedIndex]
+            }));
+            onChange(newItems);
           }
         });
-        var sortComponent;
+        let sortComponent;
         if (sort.index === nameIndex && sort.value === name) {
-          if (sort.order === _sort.sortOrder.ascending) {
-            sortComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
-              icon: _Icon.iconName.TriangleUp16,
-              size: _Icon.iconSize.small,
+          if (sort.order === sortOrder.ascending) {
+            sortComponent = /*#__PURE__*/_jsx(Icon, {
+              icon: iconName.TriangleUp16,
+              size: iconSize.small,
               fill: iconColor.sort
             });
           } else {
-            sortComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
-              icon: _Icon.iconName.TriangleDown16,
-              size: _Icon.iconSize.small,
+            sortComponent = /*#__PURE__*/_jsx(Icon, {
+              icon: iconName.TriangleDown16,
+              size: iconSize.small,
               fill: iconColor.sort
             });
           }
         }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-          children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _classnames["default"])(_typography["default"].h6, _visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _padding["default"]['p-2'], _index["default"]['css-truncate'], _index["default"]['css-truncate-overflow'], _FlexGrid2["default"].item, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _grid["default"]['col-2'], isSelectedColumn), _grid["default"]['col-12'], !isSelectedColumn), _flexbox["default"]['flex-justify-center'], isSelectedColumn), _flexbox["default"]['flex-justify-between'], !isSelectedColumn)),
-            onClick: function onClick() {
+        return /*#__PURE__*/_jsx(Fragment, {
+          children: !isIdColumn && /*#__PURE__*/_jsx("div", {
+            className: cx(typographyStyles.h6, displayStyles['d-flex'], flexboxStyles['flex-row'], paddingStyles['p-2'], truncateStyles['css-truncate'], truncateStyles['css-truncate-overflow'], styles.item, {
+              [gridStyles['col-2']]: isSelectedColumn,
+              [gridStyles['col-12']]: !isSelectedColumn,
+              [flexboxStyles['flex-justify-center']]: isSelectedColumn,
+              [flexboxStyles['flex-justify-between']]: !isSelectedColumn
+            }),
+            onClick: () => {
               if (!isSelectedColumn) {
-                _onClick({
+                onClick({
                   index: nameIndex,
                   value: name,
                   order: sort.order
                 });
               }
             },
-            onKeyPress: function onKeyPress() {},
+            onKeyPress: () => {},
             role: "button",
             tabIndex: 0,
-            children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-justify-between'], _layout["default"]['width-full']),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow']),
-                children: (0, _string.getCapizalizedString)({
+            children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/_jsxs("div", {
+              className: cx(displayStyles['d-flex'], flexboxStyles['flex-justify-between'], layoutStyles['width-full']),
+              children: [/*#__PURE__*/_jsx("div", {
+                className: cx(truncateStyles['css-truncate'], truncateStyles['css-truncate-overflow']),
+                children: getCapizalizedString({
                   string: name
                 })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-items-start'], _margin["default"]['ml-1']),
-                children: [sortComponent, nameIndex < (items === null || items === void 0 || (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.names.length) - 1 ?
+              }), /*#__PURE__*/_jsxs("div", {
+                className: cx(displayStyles['d-flex'], flexboxStyles['flex-items-start'], marginStyles['ml-1']),
+                children: [sortComponent, nameIndex < items?.[0]?.names.length - 1 ?
                 /*#__PURE__*/
                 // eslint-disable-line no-unsafe-optional-chaining
-                (0, _jsxRuntime.jsx)("span", {
-                  className: (0, _classnames["default"])(_margin["default"]['ml-1'], _colors["default"]['text-gray-light']),
+                _jsx("span", {
+                  className: cx(marginStyles['ml-1'], colorStyles['text-gray-light']),
                   children: " |"
                 }) : null]
               })]
             })
           })
-        }, (0, _uuid.v1)());
+        }, uuidv1());
       })
-    }), items === null || items === void 0 ? void 0 : items.map(function (item, itemIndex) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _flexbox["default"]['flex-items-start'], _borders["default"].border, _FlexGrid2["default"].item, _FlexGrid2["default"].row),
-        onClick: function onClick() {
-          var bubleUpNewItems = true;
-          var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref3, newItemIndex) {
-            var values = _ref3.values;
-            return values === null || values === void 0 ? void 0 : values.map(function (newValue, newValueIndex) {
-              if ((0, _typeof2["default"])(newValue) === 'object' && ['FileDirectory16', 'File16'].includes(newValue === null || newValue === void 0 ? void 0 : newValue.icon)) {
-                bubleUpNewItems = false;
-              }
-              return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? !newValue : newValue;
-            });
-          }).map(function (newItem) {
-            return {
+    }), items?.map((item, itemIndex) => /*#__PURE__*/_jsx("div", {
+      className: cx(displayStyles['d-flex'], flexboxStyles['flex-row'], flexboxStyles['flex-items-start'], borderStyles.border, styles.item, styles.row),
+      onClick: () => {
+        let bubleUpNewItems = true;
+        const newItems = items?.map(({
+          values
+        }, newItemIndex) => values?.map((newValue, newValueIndex) => {
+          if (typeof newValue === 'object' && ['FileDirectory16', 'File16'].includes(newValue?.icon)) {
+            bubleUpNewItems = false;
+          }
+          return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? !newValue : newValue;
+        })).map(newItem => ({
+          id: newItem[idIndex],
+          isSelected: newItem[isSelectedIndex]
+        }));
+        if (bubleUpNewItems) {
+          onChange(newItems);
+        }
+      },
+      onKeyPress: () => {},
+      role: "button",
+      tabIndex: 0,
+      onDoubleClick: () => {
+        onDoubleClick(itemIndex);
+      },
+      children: item.values.map((value, valueIndex) => {
+        const isIdColumn = valueIndex === idIndex;
+        const isSelectedColumn = valueIndex === isSelectedIndex;
+        const isSelectedComponent = selection === flexGridSelection.radio ? /*#__PURE__*/_jsx(Radio, {
+          name: "isSelected",
+          isChecked: item.values[isSelectedIndex] === true,
+          onChange: event => {
+            const newItems = items?.map(({
+              names,
+              values
+            }, newItemIndex) => ({
+              names,
+              values: values.map((newValue, newValueIndex) => {
+                if (newItemIndex === itemIndex && newValueIndex === isSelectedIndex) {
+                  return event.target.checked;
+                }
+                if (newItemIndex === itemIndex && newValueIndex !== isSelectedIndex) {
+                  return newValue;
+                }
+                if (newItemIndex !== itemIndex && newValueIndex === isSelectedIndex) {
+                  return false;
+                }
+                if (newItemIndex !== itemIndex && newValueIndex !== isSelectedIndex) {
+                  return newValue;
+                }
+                return newValue;
+              })
+            }));
+            onChange(newItems);
+          }
+        }) : /*#__PURE__*/_jsx(Checkbox, {
+          ariaAttr: {
+            describedBy: 'isSelected'
+          },
+          isChecked: item.values[isSelectedIndex] === true,
+          onChange: event => {
+            const newItems = items?.map(({
+              values
+            }, newItemIndex) => values?.map((newValue, newValueIndex) => newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? event.target.checked : newValue)).map(newItem => ({
               id: newItem[idIndex],
               isSelected: newItem[isSelectedIndex]
-            };
-          });
-          if (bubleUpNewItems) {
-            _onChange(newItems);
+            }));
+            onChange(newItems);
           }
-        },
-        onKeyPress: function onKeyPress() {},
-        role: "button",
-        tabIndex: 0,
-        onDoubleClick: function onDoubleClick() {
-          _onDoubleClick(itemIndex);
-        },
-        children: item.values.map(function (value, valueIndex) {
-          var isIdColumn = valueIndex === idIndex;
-          var isSelectedColumn = valueIndex === isSelectedIndex;
-          var isSelectedComponent = selection === _FlexGrid.flexGridSelection.radio ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.Radio, {
-            name: "isSelected",
-            isChecked: item.values[isSelectedIndex] === true,
-            onChange: function onChange(event) {
-              var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref4, newItemIndex) {
-                var names = _ref4.names,
-                  values = _ref4.values;
-                return {
-                  names: names,
-                  values: values.map(function (newValue, newValueIndex) {
-                    if (newItemIndex === itemIndex && newValueIndex === isSelectedIndex) {
-                      return event.target.checked;
-                    }
-                    if (newItemIndex === itemIndex && newValueIndex !== isSelectedIndex) {
-                      return newValue;
-                    }
-                    if (newItemIndex !== itemIndex && newValueIndex === isSelectedIndex) {
-                      return false;
-                    }
-                    if (newItemIndex !== itemIndex && newValueIndex !== isSelectedIndex) {
-                      return newValue;
-                    }
-                    return newValue;
-                  })
-                };
-              });
-              _onChange(newItems);
-            }
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
-            ariaAttr: {
-              describedBy: 'isSelected'
-            },
-            isChecked: item.values[isSelectedIndex] === true,
-            onChange: function onChange(event) {
-              var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref5, newItemIndex) {
-                var values = _ref5.values;
-                return values === null || values === void 0 ? void 0 : values.map(function (newValue, newValueIndex) {
-                  return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? event.target.checked : newValue;
-                });
-              }).map(function (newItem) {
-                return {
-                  id: newItem[idIndex],
-                  isSelected: newItem[isSelectedIndex]
-                };
-              });
-              _onChange(newItems);
-            }
-          });
-          var iconComponent = value !== null && value !== void 0 && value.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
-            icon: _Icon.iconName[value.icon],
-            size: _Icon.iconSize.small,
-            fill: iconColor.object
-          }) : null;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-            children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _padding["default"]['p-2'], _index["default"]['css-truncate'], _index["default"]['css-truncate-overflow'], _typography["default"]['no-wrap'], (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _grid["default"]['col-2'], isSelectedColumn), _grid["default"]['col-12'], !isSelectedColumn), _flexbox["default"]['flex-justify-center'], isSelectedColumn), _flexbox["default"]['flex-justify-start'], !isSelectedColumn)),
-              children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow']),
-                children: [(value === null || value === void 0 ? void 0 : value.icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-                  children: [iconComponent, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    className: _margin["default"]['ml-2'],
-                    children: value.value
-                  })]
-                }), value instanceof Date && "".concat(value.toLocaleDateString(), " ").concat(value.toLocaleTimeString()), Array.isArray(value) && value.find(function (_ref6) {
-                  var isSelected = _ref6.isSelected;
-                  return isSelected === true;
-                }).text, !(value !== null && value !== void 0 && value.icon) && !(value instanceof Date) && !Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.toString())]
-              })
-            }, (0, _uuid.v1)())
-          }, (0, _uuid.v1)());
-        })
-      }, (0, _uuid.v1)());
-    })]
+        });
+        const iconComponent = value?.icon ? /*#__PURE__*/_jsx(Icon, {
+          icon: iconName[value.icon],
+          size: iconSize.small,
+          fill: iconColor.object
+        }) : null;
+        return /*#__PURE__*/_jsx(Fragment, {
+          children: !isIdColumn && /*#__PURE__*/_jsx("div", {
+            className: cx(displayStyles['d-flex'], flexboxStyles['flex-row'], paddingStyles['p-2'], truncateStyles['css-truncate'], truncateStyles['css-truncate-overflow'], typographyStyles['no-wrap'], {
+              [gridStyles['col-2']]: isSelectedColumn,
+              [gridStyles['col-12']]: !isSelectedColumn,
+              [flexboxStyles['flex-justify-center']]: isSelectedColumn,
+              [flexboxStyles['flex-justify-start']]: !isSelectedColumn
+            }),
+            children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/_jsxs("div", {
+              className: cx(truncateStyles['css-truncate'], truncateStyles['css-truncate-overflow']),
+              children: [value?.icon && /*#__PURE__*/_jsxs(Fragment, {
+                children: [iconComponent, /*#__PURE__*/_jsx("span", {
+                  className: marginStyles['ml-2'],
+                  children: value.value
+                })]
+              }), value instanceof Date && `${value.toLocaleDateString()} ${value.toLocaleTimeString()}`, Array.isArray(value) && value.find(({
+                isSelected
+              }) => isSelected === true).text, !value?.icon && !(value instanceof Date) && !Array.isArray(value) && value?.toString()]
+            })
+          }, uuidv1())
+        }, uuidv1());
+      })
+    }, uuidv1()))]
   });
 }
-FlexGrid.propTypes = _FlexGrid.propTypes;
+FlexGrid.propTypes = propTypes;