@7shifts/sous-chef 3.43.3-beta.1 → 3.43.3-beta.3

package/dist/index.css

@@ -2324,8 +2324,6 @@ input:disabled + ._2W10t::after {
 ._24Yjb table thead tr th:first-of-type {
   position: sticky;
   left: 0;
-  -webkit-backdrop-filter: blur(100px);
-          backdrop-filter: blur(100px);
 }
 ._24Yjb table tbody tr td:first-of-type {
   position: sticky;
@@ -2369,8 +2367,6 @@ input:disabled + ._2W10t::after {
 ._2pehG table thead tr th:last-of-type {
   position: sticky;
   right: 0;
-  -webkit-backdrop-filter: blur(100px);
-          backdrop-filter: blur(100px);
 }
 ._2pehG table tbody tr td:last-of-type {
   position: sticky;
@@ -2450,7 +2446,6 @@ input:disabled + ._2W10t::after {
   }
 }
 ._1HUZx {
-  height: calc(100% - 28px);
   width: 20px;
   position: absolute;
   display: block;
@@ -2458,9 +2453,6 @@ input:disabled + ._2W10t::after {
   z-index: 2;
   box-sizing: border-box;
 }
-._17lLm {
-  height: 100%;
-}
 ._332hh {
   border: 1px solid var(--color-grey-200);
   border-right: 0;

package/dist/index.js

@@ -6046,7 +6046,8 @@ var DataTableHeader = function DataTableHeader(_ref) {
     return React__default.createElement("th", {
       className: classnames((_classnames = {}, _classnames[styles$a['data-table-header__item']] = true, _classnames[styles$a['data-table-header__item--sortable']] = isSortable, _classnames)),
       style: {
-        flex: column.size || 1
+        flex: column.size || 1,
+        backgroundColor: backgroundColor
       },
       key: column.name,
       onClick: function onClick() {
@@ -8618,15 +8619,29 @@ var useDataTableScrollState = function useDataTableScrollState(stickyColumns) {
   };
 };
 
-var styles$L = {"data-table-cover-shadow":"_1HUZx","data-table-cover-shadow--no-columns":"_17lLm","data-table-cover-shadow--left":"_332hh","fadeinshadowleft":"_1TazX","data-table-cover-shadow--right":"_22uc2","fadeinshadowright":"_21Z84"};
+var styles$L = {"data-table-cover-shadow":"_1HUZx","data-table-cover-shadow--left":"_332hh","fadeinshadowleft":"_1TazX","data-table-cover-shadow--right":"_22uc2","fadeinshadowright":"_21Z84"};
 
 var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
   var _classNames;
   var showShadowOnLeft = _ref.showShadowOnLeft,
     showShadowOnRight = _ref.showShadowOnRight,
-    isShowingColumns = _ref.isShowingColumns;
+    isShowingColumns = _ref.isShowingColumns,
+    tableRef = _ref.tableRef;
+  var _useState = React.useState('24px'),
+    headerHeight = _useState[0],
+    setHeaderHeight = _useState[1];
+  React.useLayoutEffect(function () {
+    if (tableRef.current) {
+      var header = tableRef.current.getElementsByTagName('thead')[0];
+      var height = window.getComputedStyle(header).getPropertyValue('height');
+      setHeaderHeight(height);
+    }
+  }, [tableRef]);
   return React__default.createElement("div", {
-    className: classnames(styles$L['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$L['data-table-cover-shadow--left']] = showShadowOnLeft, _classNames[styles$L['data-table-cover-shadow--right']] = showShadowOnRight, _classNames[styles$L['data-table-cover-shadow--no-columns']] = !isShowingColumns, _classNames))
+    className: classnames(styles$L['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$L['data-table-cover-shadow--left']] = showShadowOnLeft, _classNames[styles$L['data-table-cover-shadow--right']] = showShadowOnRight, _classNames)),
+    style: {
+      height: !isShowingColumns ? '100%' : "calc(100% - " + headerHeight + ")"
+    }
   });
 };
 
@@ -8652,8 +8667,8 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
   var children = _ref.children,
     stickyColumns = _ref.stickyColumns,
     isShowingColumns = _ref.isShowingColumns,
-    isShowingFooter = _ref.isShowingFooter;
-  var backgroundColor = useBackgroundColor();
+    isShowingFooter = _ref.isShowingFooter,
+    tableRef = _ref.tableRef;
   var _useDataTableScrollSt = useDataTableScrollState(stickyColumns),
     scrollContainerRef = _useDataTableScrollSt.scrollContainerRef,
     onScroll = _useDataTableScrollSt.onScroll,
@@ -8675,12 +8690,10 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
   return React__default.createElement(React.Fragment, null, (showCoverShadowOnRight || showCoverShadowOnLeft) && React__default.createElement(DataTableCoverShadow, {
     showShadowOnLeft: hasScrollOnLeft && stickyColumns === 'right',
     showShadowOnRight: hasScrollOnRight && stickyColumns === 'left',
-    isShowingColumns: !!isShowingColumns
+    isShowingColumns: !!isShowingColumns,
+    tableRef: tableRef
   }), React__default.createElement("div", {
     className: classnames(styles$K[containerClassName], (_classNames = {}, _classNames[styles$K[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$K[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$K[containerClassName + "--with-left-sticky-columns-and-shadow"]] = hasLeftColumnSticky && hasScrollOnLeft, _classNames[styles$K[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$K[containerClassName + "--with-right-sticky-columns-and-shadow"]] = hasRightColumnSticky && hasScrollOnRight, _classNames[styles$K[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
-    style: {
-      backgroundColor: backgroundColor
-    },
     onScroll: onScroll,
     ref: scrollContainerRef,
     "data-testid": "sticky-columns-container"
@@ -8913,7 +8926,8 @@ var DataTable$1 = function DataTable(_ref) {
   }, React__default.createElement(DataTableStickyColumnsContainer, {
     stickyColumns: stickyColumns,
     isShowingColumns: !!isShowingColumns,
-    isShowingFooter: !!isShowingFooter
+    isShowingFooter: !!isShowingFooter,
+    tableRef: tableRef
   }, isShowingColumns && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
     placement: "top"
   }), React__default.createElement("div", {