@7shifts/sous-chef 3.43.3-beta.4 → 3.43.3-beta.5

package/dist/index.css

@@ -1,21 +1,3 @@
-@font-face {
-  font-family: "Proxima Nova";
-  src: url("https://cdn.7shifts.com/fonts/proximaNova-semibold.eot");
-  src: url("https://cdn.7shifts.com/fonts/proximaNova-semibold.eot?#iefix") format("embedded-opentype"), url("https://cdn.7shifts.com/fonts/proximaNova-semibold.woff") format("woff"), url("https://cdn.7shifts.com/fonts/proximaNova-semibold.ttf") format("truetype"), url("https://cdn.7shifts.com/fonts/proximaNova-semibold.svg#ProximaNova-Semibold") format("svg");
-  font-weight: 600;
-  font-style: normal;
-  /* Preload the font */
-  unicode-range: U+0000-00FF; /* Basic Latin */
-}
-@font-face {
-  font-family: "Proxima Nova";
-  src: url("https://cdn.7shifts.com/fonts/ProximaNova-Regular.eot");
-  src: url("https://cdn.7shifts.com/fonts/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"), url("https://cdn.7shifts.com/fonts/ProximaNova-Regular.woff") format("woff"), url("https://cdn.7shifts.com/fonts/ProximaNova-Regular.ttf") format("truetype"), url("https://cdn.7shifts.com/fonts/ProximaNova-Regular.svg#proxima_nova_rgregular") format("svg");
-  font-weight: normal;
-  font-style: normal;
-  /* Preload the font */
-  unicode-range: U+0000-00FF; /* Basic Latin */
-}
 :root {
   --font-family-brand: "Proxima Nova", sans-serif;
   --font-family-body: "Proxima Nova", sans-serif;
@@ -147,12 +129,6 @@
   --z-index-tooltip: 300;
   --z-index-portal: 9999;
 }
-body {
-  font-family: var(--font-family-brand);
-  font-size: var(--font-size-200);
-  line-height: var(--font-line-height-200);
-  font-weight: var(--p-font-weight-normal);
-}
 ._OINV1 {
   display: flex;
 }
@@ -1022,7 +998,7 @@ Just for future references:
   pointer-events: none;
 }
 ._1oK6H {
-  top: 28px;
+  top: 24px;
   border-bottom: 0;
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
@@ -2348,7 +2324,6 @@ input:disabled + ._2W10t::after {
 ._24Yjb table thead tr th:first-of-type {
   position: sticky;
   left: 0;
-  background-color: var(--color-white);
 }
 ._24Yjb table tbody tr td:first-of-type {
   position: sticky;
@@ -2392,7 +2367,6 @@ input:disabled + ._2W10t::after {
 ._2pehG table thead tr th:last-of-type {
   position: sticky;
   right: 0;
-  background-color: var(--color-white);
 }
 ._2pehG table tbody tr td:last-of-type {
   position: sticky;
@@ -2472,7 +2446,6 @@ input:disabled + ._2W10t::after {
   }
 }
 ._1HUZx {
-  height: calc(100% - 28px);
   width: 20px;
   position: absolute;
   display: block;
@@ -2480,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.d.ts

@@ -1,7 +1,6 @@
 import './foundation/tokens/typography/_typography-tokens.scss';
 import './foundation/tokens/color/_color-tokens.scss';
 import './foundation/tokens/zindex/_z-index-tokens.scss';
-import './foundation/_initital-setup.scss';
 export * from './foundation/tokens/color/color-constants';
 export * from './foundation/tokens/zindex/z-index-constants';
 export * from './core';

package/dist/index.js

@@ -5981,10 +5981,34 @@ var HeaderSortIcon = function HeaderSortIcon(_ref) {
   })));
 };
 
+var ModalContext = React.createContext({
+  isModalMounted: false
+});
+var useModalContext = function useModalContext() {
+  var context = React.useContext(ModalContext);
+  return context || {};
+};
+
+var useBackgroundColor = function useBackgroundColor() {
+  var _useModalContext = useModalContext(),
+    isInsideModal = _useModalContext.isModalMounted;
+  var _useState = React.useState(COLORS.white),
+    backgroundColor = _useState[0],
+    setBackgroundColor = _useState[1];
+  React.useLayoutEffect(function () {
+    if (!isInsideModal) {
+      var bodyStyles = window.getComputedStyle(document.body);
+      setBackgroundColor(bodyStyles.getPropertyValue('background-color'));
+    }
+  }, [isInsideModal]);
+  return backgroundColor;
+};
+
 var DataTableHeader = function DataTableHeader(_ref) {
   var columns = _ref.columns,
     onSort = _ref.onSort,
     showActionMenu = _ref.showActionMenu;
+  var backgroundColor = useBackgroundColor();
   var haveLabels = columns.find(function (column) {
     return column.label && column.label !== '';
   });
@@ -6006,7 +6030,11 @@ var DataTableHeader = function DataTableHeader(_ref) {
   return React__default.createElement(React.Fragment, null, React__default.createElement(ColumnSizes, {
     columns: columns,
     showActionMenu: showActionMenu
-  }), React__default.createElement("thead", null, React__default.createElement("tr", {
+  }), React__default.createElement("thead", {
+    style: {
+      backgroundColor: backgroundColor
+    }
+  }, React__default.createElement("tr", {
     className: styles$a['data-table-header']
   }, columns.filter(function (column) {
     return !column.hidden;
@@ -6018,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() {
@@ -7692,14 +7721,6 @@ var ModalHeader = function ModalHeader(_ref) {
   }, subHeader));
 };
 
-var ModalContext = React.createContext({
-  isModalMounted: false
-});
-var useModalContext = function useModalContext() {
-  var context = React.useContext(ModalContext);
-  return context || {};
-};
-
 var _excluded$2y = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId"];
 var Modal = function Modal(_ref) {
   var children = _ref.children,
@@ -8598,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 (isShowingColumns && tableRef.current) {
+      var header = tableRef.current.getElementsByTagName('thead')[0];
+      var height = window.getComputedStyle(header).getPropertyValue('height');
+      setHeaderHeight(height);
+    }
+  }, [tableRef, isShowingColumns]);
   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 + ")"
+    }
   });
 };
 
@@ -8632,7 +8667,8 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
   var children = _ref.children,
     stickyColumns = _ref.stickyColumns,
     isShowingColumns = _ref.isShowingColumns,
-    isShowingFooter = _ref.isShowingFooter;
+    isShowingFooter = _ref.isShowingFooter,
+    tableRef = _ref.tableRef;
   var _useDataTableScrollSt = useDataTableScrollState(stickyColumns),
     scrollContainerRef = _useDataTableScrollSt.scrollContainerRef,
     onScroll = _useDataTableScrollSt.onScroll,
@@ -8654,7 +8690,8 @@ 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)),
     onScroll: onScroll,
@@ -8889,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", {