@telus-uds/components-community.data-grid 1.5.3 → 1.6.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @telus-uds/components-community.data-grid
 
-This log was last generated on Fri, 25 Jul 2025 04:09:38 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Sep 2025 06:46:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.6.0
+
+Thu, 04 Sep 2025 06:46:41 GMT
+
+### Minor changes
+
+- `Datagrid`: Remove gap between checkbox and chevron icon (vishal.jindal@telus.com)
+- `DataGrid`: Enhancement to enable custom business logic on chevron toggle (sam.obisesan@telus.com)
+- Bump @telus-uds/components-web to v4.11.0
+- Bump @telus-uds/components-base to v3.14.0
+- Bump @telus-uds/system-theme-tokens to v4.13.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
+## 1.5.4
+
+Fri, 15 Aug 2025 00:52:15 GMT
+
+### Patches
+
+- Bump @telus-uds/components-web to v4.10.0
+- Bump @telus-uds/components-base to v3.13.0
+- Bump @telus-uds/system-theme-tokens to v4.12.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
 ## 1.5.3
 
-Fri, 25 Jul 2025 04:09:38 GMT
+Fri, 25 Jul 2025 04:13:56 GMT
 
 ### Patches
 

package/lib/cjs/DataGrid.js

@@ -22,7 +22,15 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const StyledIconContainer = exports.StyledIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "DataGrid__StyledIconContainer",
   componentId: "[object Object]__sc-1ddcmt-0"
-})(["display:flex;box-sizing:border-box;align-items:center;width:60px;justify-content:space-between;"]);
+})(["", ""], props => {
+  return `
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      width: ${props.checkboxChevronIconGap < 0 ? 34 : props.checkboxChevronIconGap + 34}px;
+      justify-content: space-between;
+    `;
+});
 const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     rows = [],
@@ -47,7 +55,8 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     expandRowIcon,
     hideExpandedRowIcon,
     sortColumnIconDown,
-    sortColumnIconUp
+    sortColumnIconUp,
+    checkboxChevronIconGap
   } = themeTokens;
   const [data, setData] = _react.default.useState(groupedRows ? (0, _utility.resetRowData)([...groupedRows], true) : (0, _utility.resetRowData)([...rows]));
   const [columnsData, setColumnsData] = _react.default.useState((0, _utility.resetColumnsData)(columns));
@@ -121,18 +130,31 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     setData(tempData);
   };
   const toggleRowExpansion = rowId => {
-    let tempRow = null;
+    let tempData = null;
     if (groupedRows) {
       const [group, splitId] = rowId.split('-');
-      const id = parseInt(splitId, 10);
-      tempRow = {
+      const childId = parseInt(splitId, 10);
+      tempData = {
         ...data
       };
-      tempRow[group].data = (0, _utility.toggleExpandedRow)(tempRow[group].data, id);
+      tempData[group].data = (0, _utility.toggleExpandedRow)(tempData[group].data, childId);
+      const childIndex = tempData[group].data.findIndex(value => value.id === childId);
+      if (tempData[group].data[childIndex].expandedRowChildComponent?.onChevronToggle && typeof tempData[group].data[childIndex].expandedRowChildComponent?.onChevronToggle === 'function') {
+        const newData = tempData[group].data[childIndex].expandedRowChildComponent?.onChevronToggle(tempData, rowId);
+        setData(newData);
+      } else {
+        setData(tempData);
+      }
     } else {
-      tempRow = (0, _utility.toggleExpandedRow)(data, rowId);
+      tempData = (0, _utility.toggleExpandedRow)(data, rowId);
+      const thisRow = data.find(innerData => innerData.id === rowId);
+      if (typeof thisRow.expandedRowChildComponent?.onChevronToggle === 'function') {
+        const newData = thisRow.expandedRowChildComponent.onChevronToggle(tempData, rowId);
+        setData(newData);
+      } else {
+        setData(tempData);
+      }
     }
-    setData(tempRow);
   };
   const HeaderCheckBoxDisplay = showCheckbox && !hideHeaderCheckBoxByRows && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Checkbox, {
     label: getCopy('all'),
@@ -179,6 +201,7 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         hidePreviousRowBorder: row.hidePreviousRowBorder,
         isHeaderVisible: isHeaderVisible,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledIconContainer, {
+          checkboxChevronIconGap: checkboxChevronIconGap,
           children: [CheckBoxDisplay, DisplayCaret]
         })
       }), columnsData.map(column => {
@@ -377,7 +400,8 @@ DataGrid.propTypes = {
     id: _propTypes.default.number.isRequired,
     expandedRowChildComponent: _propTypes.default.shape({
       component: _propTypes.default.node,
-      displayOnLoad: _propTypes.default.bool.isRequired
+      displayOnLoad: _propTypes.default.bool.isRequired,
+      onChevronToggle: _propTypes.default.func
     }),
     /**
      * Set this to true to hide checkbox for the specified row

package/lib/esm/DataGrid.js

@@ -13,7 +13,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 export const StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGrid__StyledIconContainer",
   componentId: "[object Object]__sc-1ddcmt-0"
-})(["display:flex;box-sizing:border-box;align-items:center;width:60px;justify-content:space-between;"]);
+})(["", ""], props => {
+  return `
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      width: ${props.checkboxChevronIconGap < 0 ? 34 : props.checkboxChevronIconGap + 34}px;
+      justify-content: space-between;
+    `;
+});
 const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     rows = [],
@@ -38,7 +46,8 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     expandRowIcon,
     hideExpandedRowIcon,
     sortColumnIconDown,
-    sortColumnIconUp
+    sortColumnIconUp,
+    checkboxChevronIconGap
   } = themeTokens;
   const [data, setData] = React.useState(groupedRows ? resetRowData([...groupedRows], true) : resetRowData([...rows]));
   const [columnsData, setColumnsData] = React.useState(resetColumnsData(columns));
@@ -112,18 +121,31 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     setData(tempData);
   };
   const toggleRowExpansion = rowId => {
-    let tempRow = null;
+    let tempData = null;
     if (groupedRows) {
       const [group, splitId] = rowId.split('-');
-      const id = parseInt(splitId, 10);
-      tempRow = {
+      const childId = parseInt(splitId, 10);
+      tempData = {
         ...data
       };
-      tempRow[group].data = toggleExpandedRow(tempRow[group].data, id);
+      tempData[group].data = toggleExpandedRow(tempData[group].data, childId);
+      const childIndex = tempData[group].data.findIndex(value => value.id === childId);
+      if (tempData[group].data[childIndex].expandedRowChildComponent?.onChevronToggle && typeof tempData[group].data[childIndex].expandedRowChildComponent?.onChevronToggle === 'function') {
+        const newData = tempData[group].data[childIndex].expandedRowChildComponent?.onChevronToggle(tempData, rowId);
+        setData(newData);
+      } else {
+        setData(tempData);
+      }
     } else {
-      tempRow = toggleExpandedRow(data, rowId);
+      tempData = toggleExpandedRow(data, rowId);
+      const thisRow = data.find(innerData => innerData.id === rowId);
+      if (typeof thisRow.expandedRowChildComponent?.onChevronToggle === 'function') {
+        const newData = thisRow.expandedRowChildComponent.onChevronToggle(tempData, rowId);
+        setData(newData);
+      } else {
+        setData(tempData);
+      }
     }
-    setData(tempRow);
   };
   const HeaderCheckBoxDisplay = showCheckbox && !hideHeaderCheckBoxByRows && /*#__PURE__*/_jsx(Checkbox, {
     label: getCopy('all'),
@@ -170,6 +192,7 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         hidePreviousRowBorder: row.hidePreviousRowBorder,
         isHeaderVisible: isHeaderVisible,
         children: /*#__PURE__*/_jsxs(StyledIconContainer, {
+          checkboxChevronIconGap: checkboxChevronIconGap,
           children: [CheckBoxDisplay, DisplayCaret]
         })
       }), columnsData.map(column => {
@@ -368,7 +391,8 @@ DataGrid.propTypes = {
     id: PropTypes.number.isRequired,
     expandedRowChildComponent: PropTypes.shape({
       component: PropTypes.node,
-      displayOnLoad: PropTypes.bool.isRequired
+      displayOnLoad: PropTypes.bool.isRequired,
+      onChevronToggle: PropTypes.func
     }),
     /**
      * Set this to true to hide checkbox for the specified row

package/package.json

@@ -5,9 +5,9 @@
   ],
   "dependencies": {
     "prop-types": "^15.7.2",
-    "@telus-uds/components-web": "^4.9.2",
-    "@telus-uds/components-base": "^3.12.2",
-    "@telus-uds/system-theme-tokens": "^4.11.0",
+    "@telus-uds/components-web": "^4.11.0",
+    "@telus-uds/components-base": "^3.14.0",
+    "@telus-uds/system-theme-tokens": "^4.13.0",
     "styled-components": "6.1.13"
   },
   "devDependencies": {
@@ -44,5 +44,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.5.3"
+  "version": "1.6.0"
 }

package/src/DataGrid.jsx

@@ -32,11 +32,15 @@ import DataGridRow from './DataGridRow'
 import DataGridCell from './DataGridCell'
 
 export const StyledIconContainer = styled.div`
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  width: 60px;
-  justify-content: space-between;
+  ${(props) => {
+    return `
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      width: ${props.checkboxChevronIconGap < 0 ? 34 : props.checkboxChevronIconGap + 34}px;
+      justify-content: space-between;
+    `
+  }}
 `
 
 const DataGrid = React.forwardRef(
@@ -59,7 +63,13 @@ const DataGrid = React.forwardRef(
   ) => {
     const themeTokens = useThemeTokens('DataGrid', tokens, variant)
     const getCopy = useCopy({ dictionary, copy })
-    const { expandRowIcon, hideExpandedRowIcon, sortColumnIconDown, sortColumnIconUp } = themeTokens
+    const {
+      expandRowIcon,
+      hideExpandedRowIcon,
+      sortColumnIconDown,
+      sortColumnIconUp,
+      checkboxChevronIconGap
+    } = themeTokens
     const [data, setData] = React.useState(
       groupedRows ? resetRowData([...groupedRows], true) : resetRowData([...rows])
     )
@@ -144,16 +154,36 @@ const DataGrid = React.forwardRef(
     }
 
     const toggleRowExpansion = (rowId) => {
-      let tempRow = null
+      let tempData = null
       if (groupedRows) {
         const [group, splitId] = rowId.split('-')
-        const id = parseInt(splitId, 10)
-        tempRow = { ...data }
-        tempRow[group].data = toggleExpandedRow(tempRow[group].data, id)
+        const childId = parseInt(splitId, 10)
+        tempData = { ...data }
+        tempData[group].data = toggleExpandedRow(tempData[group].data, childId)
+        const childIndex = tempData[group].data.findIndex((value) => value.id === childId)
+        if (
+          tempData[group].data[childIndex].expandedRowChildComponent?.onChevronToggle &&
+          typeof tempData[group].data[childIndex].expandedRowChildComponent?.onChevronToggle ===
+            'function'
+        ) {
+          const newData = tempData[group].data[
+            childIndex
+          ].expandedRowChildComponent?.onChevronToggle(tempData, rowId)
+
+          setData(newData)
+        } else {
+          setData(tempData)
+        }
       } else {
-        tempRow = toggleExpandedRow(data, rowId)
+        tempData = toggleExpandedRow(data, rowId)
+        const thisRow = data.find((innerData) => innerData.id === rowId)
+        if (typeof thisRow.expandedRowChildComponent?.onChevronToggle === 'function') {
+          const newData = thisRow.expandedRowChildComponent.onChevronToggle(tempData, rowId)
+          setData(newData)
+        } else {
+          setData(tempData)
+        }
       }
-      setData(tempRow)
     }
 
     const HeaderCheckBoxDisplay = showCheckbox && !hideHeaderCheckBoxByRows && (
@@ -230,7 +260,7 @@ const DataGrid = React.forwardRef(
               hidePreviousRowBorder={row.hidePreviousRowBorder}
               isHeaderVisible={isHeaderVisible}
             >
-              <StyledIconContainer>
+              <StyledIconContainer checkboxChevronIconGap={checkboxChevronIconGap}>
                 {CheckBoxDisplay}
                 {DisplayCaret}
               </StyledIconContainer>
@@ -497,7 +527,8 @@ DataGrid.propTypes = {
       id: PropTypes.number.isRequired,
       expandedRowChildComponent: PropTypes.shape({
         component: PropTypes.node,
-        displayOnLoad: PropTypes.bool.isRequired
+        displayOnLoad: PropTypes.bool.isRequired,
+        onChevronToggle: PropTypes.func
       }),
       /**
        * Set this to true to hide checkbox for the specified row