@telus-uds/components-community.data-grid 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @telus-uds/components-community.data-grid
 
-This log was last generated on Fri, 31 Jan 2025 20:49:19 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Feb 2025 18:59:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.1.0
+
+Fri, 14 Feb 2025 18:59:39 GMT
+
+### Minor changes
+
+- `DataGrid`: enhancement to make the grid header optional (mike.taylor@telus.com)
+- Bump @telus-uds/components-web to v4.2.0
+- Bump @telus-uds/components-base to v3.2.0
+- Bump @telus-uds/system-theme-tokens to v4.2.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
+## 1.0.1
+
+Mon, 10 Feb 2025 17:36:47 GMT
+
+### Patches
+
+- Bump @telus-uds/components-web to v4.1.0
+- Bump @telus-uds/components-base to v3.1.0
+- Bump @telus-uds/system-theme-tokens to v4.1.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
 ## 1.0.0
 
-Fri, 31 Jan 2025 20:49:19 GMT
+Fri, 31 Jan 2025 20:53:28 GMT
 
 ### Major changes
 

package/lib/cjs/DataGrid.js

@@ -32,7 +32,8 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens,
     variant,
     copy = 'en',
-    testID = 'data-grid'
+    testID = 'data-grid',
+    isHeaderVisible
   } = _ref;
   const themeTokens = (0, _componentsBase.useThemeTokens)('DataGrid', tokens, variant);
   const getCopy = (0, _componentsBase.useCopy)({
@@ -153,12 +154,14 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       children: [shouldDisplayIconColumn(data, _showCheckbox) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
         tokens: themeTokens,
         isExpandedRowOpen: row.isExpandedRowOpen,
+        isHeaderVisible: isHeaderVisible,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledIconContainer, {
           children: [CheckBoxDisplay, DisplayCaret]
         })
       }), columnsData.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
         tokens: themeTokens,
         isExpandedRowOpen: row.isExpandedRowOpen,
+        isHeaderVisible: isHeaderVisible,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           block: true,
           variant: {
@@ -212,6 +215,7 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           type: _utility.CELL_TYPE.SUBHEADING,
           tokens: themeTokens,
           columnsLength: columnsData.length,
+          isHeaderVisible: isHeaderVisible,
           children: data[group].groupHeaderComponent || DefaultSubHeading
         })
       }, group);
@@ -240,11 +244,13 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       type: _utility.CELL_TYPE.HEADING,
       tokens: themeTokens,
       isFirstCol: true,
+      isHeaderVisible: isHeaderVisible,
       children: HeaderCheckBoxDisplay
     }), columnsData.map(column => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DataGridCell.default, {
       type: _utility.CELL_TYPE.HEADING,
       tokens: themeTokens,
       isSortable: isSortable,
+      isHeaderVisible: isHeaderVisible,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         block: true,
         variant: {
@@ -364,6 +370,10 @@ DataGrid.propTypes = {
   /**
    * Use in tests if the datagrid test cases need to find the element with the id.
    */
-  testID: _propTypes.default.string
+  testID: _propTypes.default.string,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: _propTypes.default.bool
 };
 var _default = exports.default = DataGrid;

package/lib/cjs/DataGridCell.js

@@ -22,31 +22,37 @@ const StyledHeaderCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfi
   displayName: "DataGridCell__StyledHeaderCellDiv",
   componentId: "[object Object]__sc-6nkvhz-1"
 })(["display:flex;align-items:center;"]);
+const StyledHeaderCellHiddenHeader = /*#__PURE__*/_styledComponents.default.th.withConfig({
+  displayName: "DataGridCell__StyledHeaderCellHiddenHeader",
+  componentId: "[object Object]__sc-6nkvhz-2"
+})(["", ""], props => {
+  return (0, _styledComponents.css)(["background-color:", ";border-bottom:solid ", "px ", ";padding:0px;width:", ";height:1px;"], props.headerRowBackgroundColor, props.headerBorderBottomWidth, props.cellBorderBottomColor, props.firstColWidth);
+});
 const StyledGroupHeaderCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCell",
-  componentId: "[object Object]__sc-6nkvhz-2"
+  componentId: "[object Object]__sc-6nkvhz-3"
 })(["", ""], props => {
   return (0, _styledComponents.css)(["background-color:", ";padding:", "px;border-top:solid ", "px ", ";text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.subHeadingBackgroundColor, props.cellPadding, props.cellBorderBottomWidth, props.cellBorderBottomColor, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
 const StyledGroupHeaderCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCellDiv",
-  componentId: "[object Object]__sc-6nkvhz-3"
+  componentId: "[object Object]__sc-6nkvhz-4"
 })(["display:flex;align-items:center;justify-content:start;"]);
 const StyledExpandedCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
   displayName: "DataGridCell__StyledExpandedCell",
-  componentId: "[object Object]__sc-6nkvhz-4"
+  componentId: "[object Object]__sc-6nkvhz-5"
 })(["", ""], props => {
   return (0, _styledComponents.css)(["padding:", "px;border-bottom:", " text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.cellPadding, props.isExpandedRowOpen ? `solid ${props.cellBorderBottomWidth}px ${props.headerBorderBottomColor};` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
 const StyledExpandedCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "DataGridCell__StyledExpandedCellDiv",
-  componentId: "[object Object]__sc-6nkvhz-5"
+  componentId: "[object Object]__sc-6nkvhz-6"
 })(["", ""], props => {
   return (0, _styledComponents.css)(["display:flex;align-items:center;justify-content:", ";padding-left:", ";"], props.expandedContentAlignment ? props.expandedContentAlignment : 'start', props.showCheckbox ? `${props.expandedContentLeftPadding}px` : `${props.expandedContentDefaultLeftPadding}px`);
 });
 const StyledCell = exports.StyledCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
   displayName: "DataGridCell__StyledCell",
-  componentId: "[object Object]__sc-6nkvhz-6"
+  componentId: "[object Object]__sc-6nkvhz-7"
 })(["", ""], props => {
   if (props.isExpandedRowOpen) {
     return (0, _styledComponents.css)(["padding:", "px;text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";border-top:solid ", "px ", ";"], props.cellPadding, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily, props.headerBorderTopWidth, props.headerBorderTopColor);
@@ -61,16 +67,21 @@ const DataGridCell = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     columnsLength,
     showCheckbox = false,
     isFirstCol = false,
-    isExpandedRowOpen = false
+    isExpandedRowOpen = false,
+    isHeaderVisible = true
   } = _ref;
   if (type === _utility.CELL_TYPE.HEADING) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
+    return isHeaderVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
       ...tokens,
       firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
       ref: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCellDiv, {
         children: children
       })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCellHiddenHeader, {
+      ...tokens,
+      firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
+      ref: ref
     });
   }
   if (type === _utility.CELL_TYPE.SUBHEADING) {
@@ -133,6 +144,10 @@ DataGridCell.propTypes = {
   /**
    * isExpandedRowOpen passed to the component to determine if cell is displaying additional data
    */
-  isExpandedRowOpen: _propTypes.default.bool
+  isExpandedRowOpen: _propTypes.default.bool,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: _propTypes.default.bool
 };
 var _default = exports.default = DataGridCell;

package/lib/esm/DataGrid.js

@@ -25,7 +25,8 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tokens,
     variant,
     copy = 'en',
-    testID = 'data-grid'
+    testID = 'data-grid',
+    isHeaderVisible
   } = _ref;
   const themeTokens = useThemeTokens('DataGrid', tokens, variant);
   const getCopy = useCopy({
@@ -146,12 +147,14 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: [shouldDisplayIconColumn(data, _showCheckbox) && /*#__PURE__*/_jsx(DataGridCell, {
         tokens: themeTokens,
         isExpandedRowOpen: row.isExpandedRowOpen,
+        isHeaderVisible: isHeaderVisible,
         children: /*#__PURE__*/_jsxs(StyledIconContainer, {
           children: [CheckBoxDisplay, DisplayCaret]
         })
       }), columnsData.map(column => /*#__PURE__*/_jsx(DataGridCell, {
         tokens: themeTokens,
         isExpandedRowOpen: row.isExpandedRowOpen,
+        isHeaderVisible: isHeaderVisible,
         children: /*#__PURE__*/_jsx(Typography, {
           block: true,
           variant: {
@@ -205,6 +208,7 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           type: CELL_TYPE.SUBHEADING,
           tokens: themeTokens,
           columnsLength: columnsData.length,
+          isHeaderVisible: isHeaderVisible,
           children: data[group].groupHeaderComponent || DefaultSubHeading
         })
       }, group);
@@ -233,11 +237,13 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       type: CELL_TYPE.HEADING,
       tokens: themeTokens,
       isFirstCol: true,
+      isHeaderVisible: isHeaderVisible,
       children: HeaderCheckBoxDisplay
     }), columnsData.map(column => /*#__PURE__*/_jsxs(DataGridCell, {
       type: CELL_TYPE.HEADING,
       tokens: themeTokens,
       isSortable: isSortable,
+      isHeaderVisible: isHeaderVisible,
       children: [/*#__PURE__*/_jsx(Typography, {
         block: true,
         variant: {
@@ -357,6 +363,10 @@ DataGrid.propTypes = {
   /**
    * Use in tests if the datagrid test cases need to find the element with the id.
    */
-  testID: PropTypes.string
+  testID: PropTypes.string,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: PropTypes.bool
 };
 export default DataGrid;

package/lib/esm/DataGridCell.js

@@ -13,31 +13,37 @@ const StyledHeaderCellDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGridCell__StyledHeaderCellDiv",
   componentId: "[object Object]__sc-6nkvhz-1"
 })(["display:flex;align-items:center;"]);
+const StyledHeaderCellHiddenHeader = /*#__PURE__*/styled.th.withConfig({
+  displayName: "DataGridCell__StyledHeaderCellHiddenHeader",
+  componentId: "[object Object]__sc-6nkvhz-2"
+})(["", ""], props => {
+  return css(["background-color:", ";border-bottom:solid ", "px ", ";padding:0px;width:", ";height:1px;"], props.headerRowBackgroundColor, props.headerBorderBottomWidth, props.cellBorderBottomColor, props.firstColWidth);
+});
 const StyledGroupHeaderCell = /*#__PURE__*/styled.td.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCell",
-  componentId: "[object Object]__sc-6nkvhz-2"
+  componentId: "[object Object]__sc-6nkvhz-3"
 })(["", ""], props => {
   return css(["background-color:", ";padding:", "px;border-top:solid ", "px ", ";text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.subHeadingBackgroundColor, props.cellPadding, props.cellBorderBottomWidth, props.cellBorderBottomColor, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
 const StyledGroupHeaderCellDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCellDiv",
-  componentId: "[object Object]__sc-6nkvhz-3"
+  componentId: "[object Object]__sc-6nkvhz-4"
 })(["display:flex;align-items:center;justify-content:start;"]);
 const StyledExpandedCell = /*#__PURE__*/styled.td.withConfig({
   displayName: "DataGridCell__StyledExpandedCell",
-  componentId: "[object Object]__sc-6nkvhz-4"
+  componentId: "[object Object]__sc-6nkvhz-5"
 })(["", ""], props => {
   return css(["padding:", "px;border-bottom:", " text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.cellPadding, props.isExpandedRowOpen ? `solid ${props.cellBorderBottomWidth}px ${props.headerBorderBottomColor};` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
 const StyledExpandedCellDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGridCell__StyledExpandedCellDiv",
-  componentId: "[object Object]__sc-6nkvhz-5"
+  componentId: "[object Object]__sc-6nkvhz-6"
 })(["", ""], props => {
   return css(["display:flex;align-items:center;justify-content:", ";padding-left:", ";"], props.expandedContentAlignment ? props.expandedContentAlignment : 'start', props.showCheckbox ? `${props.expandedContentLeftPadding}px` : `${props.expandedContentDefaultLeftPadding}px`);
 });
 export const StyledCell = /*#__PURE__*/styled.td.withConfig({
   displayName: "DataGridCell__StyledCell",
-  componentId: "[object Object]__sc-6nkvhz-6"
+  componentId: "[object Object]__sc-6nkvhz-7"
 })(["", ""], props => {
   if (props.isExpandedRowOpen) {
     return css(["padding:", "px;text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";border-top:solid ", "px ", ";"], props.cellPadding, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily, props.headerBorderTopWidth, props.headerBorderTopColor);
@@ -52,16 +58,21 @@ const DataGridCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     columnsLength,
     showCheckbox = false,
     isFirstCol = false,
-    isExpandedRowOpen = false
+    isExpandedRowOpen = false,
+    isHeaderVisible = true
   } = _ref;
   if (type === CELL_TYPE.HEADING) {
-    return /*#__PURE__*/_jsx(StyledHeaderCell, {
+    return isHeaderVisible ? /*#__PURE__*/_jsx(StyledHeaderCell, {
       ...tokens,
       firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
       ref: ref,
       children: /*#__PURE__*/_jsx(StyledHeaderCellDiv, {
         children: children
       })
+    }) : /*#__PURE__*/_jsx(StyledHeaderCellHiddenHeader, {
+      ...tokens,
+      firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
+      ref: ref
     });
   }
   if (type === CELL_TYPE.SUBHEADING) {
@@ -124,6 +135,10 @@ DataGridCell.propTypes = {
   /**
    * isExpandedRowOpen passed to the component to determine if cell is displaying additional data
    */
-  isExpandedRowOpen: PropTypes.bool
+  isExpandedRowOpen: PropTypes.bool,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: PropTypes.bool
 };
 export default DataGridCell;

package/package.json

@@ -5,9 +5,9 @@
   ],
   "dependencies": {
     "prop-types": "^15.7.2",
-    "@telus-uds/components-web": "^4.0.0",
-    "@telus-uds/components-base": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.0.0",
+    "@telus-uds/components-web": "^4.2.0",
+    "@telus-uds/components-base": "^3.2.0",
+    "@telus-uds/system-theme-tokens": "^4.2.0",
     "styled-components": "6.1.13",
     "smooth-scrollbar": "8.8.4",
     "smooth-scrollbar-react": "2.4.1"
@@ -46,5 +46,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.0.0"
+  "version": "1.1.0"
 }

package/src/DataGrid.jsx

@@ -48,7 +48,8 @@ const DataGrid = React.forwardRef(
       tokens,
       variant,
       copy = 'en',
-      testID = 'data-grid'
+      testID = 'data-grid',
+      isHeaderVisible
     },
     ref
   ) => {
@@ -188,7 +189,11 @@ const DataGrid = React.forwardRef(
           onClick={toggleRowExpansion}
         >
           {shouldDisplayIconColumn(data, _showCheckbox) && (
-            <DataGridCell tokens={themeTokens} isExpandedRowOpen={row.isExpandedRowOpen}>
+            <DataGridCell
+              tokens={themeTokens}
+              isExpandedRowOpen={row.isExpandedRowOpen}
+              isHeaderVisible={isHeaderVisible}
+            >
               <StyledIconContainer>
                 {CheckBoxDisplay}
                 {DisplayCaret}
@@ -199,6 +204,7 @@ const DataGrid = React.forwardRef(
             <DataGridCell
               tokens={themeTokens}
               isExpandedRowOpen={row.isExpandedRowOpen}
+              isHeaderVisible={isHeaderVisible}
               key={`${rowId}-${column.key}`}
             >
               <Typography
@@ -257,6 +263,7 @@ const DataGrid = React.forwardRef(
               type={CELL_TYPE.SUBHEADING}
               tokens={themeTokens}
               columnsLength={columnsData.length}
+              isHeaderVisible={isHeaderVisible}
             >
               {data[group].groupHeaderComponent || DefaultSubHeading}
             </DataGridCell>
@@ -305,7 +312,12 @@ const DataGrid = React.forwardRef(
     HeaderContent = (
       <>
         {shouldDisplayIconColumn(data, showCheckbox) && (
-          <DataGridCell type={CELL_TYPE.HEADING} tokens={themeTokens} isFirstCol={true}>
+          <DataGridCell
+            type={CELL_TYPE.HEADING}
+            tokens={themeTokens}
+            isFirstCol={true}
+            isHeaderVisible={isHeaderVisible}
+          >
             {HeaderCheckBoxDisplay}
           </DataGridCell>
         )}
@@ -316,6 +328,7 @@ const DataGrid = React.forwardRef(
             key={column.key}
             tokens={themeTokens}
             isSortable={isSortable}
+            isHeaderVisible={isHeaderVisible}
           >
             <Typography
               block
@@ -457,7 +470,11 @@ DataGrid.propTypes = {
   /**
    * Use in tests if the datagrid test cases need to find the element with the id.
    */
-  testID: PropTypes.string
+  testID: PropTypes.string,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: PropTypes.bool
 }
 
 export default DataGrid

package/src/DataGridCell.jsx

@@ -25,6 +25,17 @@ const StyledHeaderCellDiv = styled.div`
   display: flex;
   align-items: center;
 `
+const StyledHeaderCellHiddenHeader = styled.th`
+  ${(props) => {
+    return css`
+      background-color: ${props.headerRowBackgroundColor};
+      border-bottom: solid ${props.headerBorderBottomWidth}px ${props.cellBorderBottomColor};
+      padding: 0px;
+      width: ${props.firstColWidth};
+      height: 1px;
+    `
+  }}
+`
 
 const StyledGroupHeaderCell = styled.td`
   ${(props) => {
@@ -118,12 +129,13 @@ const DataGridCell = React.forwardRef(
       columnsLength,
       showCheckbox = false,
       isFirstCol = false,
-      isExpandedRowOpen = false
+      isExpandedRowOpen = false,
+      isHeaderVisible = true
     },
     ref
   ) => {
     if (type === CELL_TYPE.HEADING) {
-      return (
+      return isHeaderVisible ? (
         <StyledHeaderCell
           {...tokens}
           firstColWidth={isFirstCol ? tokens.firstColWidth : 'auto'}
@@ -131,6 +143,12 @@ const DataGridCell = React.forwardRef(
         >
           <StyledHeaderCellDiv>{children}</StyledHeaderCellDiv>
         </StyledHeaderCell>
+      ) : (
+        <StyledHeaderCellHiddenHeader
+          {...tokens}
+          firstColWidth={isFirstCol ? tokens.firstColWidth : 'auto'}
+          ref={ref}
+        />
       )
     }
     if (type === CELL_TYPE.SUBHEADING) {
@@ -192,7 +210,11 @@ DataGridCell.propTypes = {
   /**
    * isExpandedRowOpen passed to the component to determine if cell is displaying additional data
    */
-  isExpandedRowOpen: PropTypes.bool
+  isExpandedRowOpen: PropTypes.bool,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: PropTypes.bool
 }
 
 export default DataGridCell