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

package/dist/index.css

@@ -1,3 +1,21 @@
+@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;
@@ -129,6 +147,12 @@
   --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;
 }
@@ -998,7 +1022,7 @@ Just for future references:
   pointer-events: none;
 }
 ._1oK6H {
-  top: 24px;
+  top: 28px;
   border-bottom: 0;
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
@@ -2324,6 +2348,7 @@ 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;
@@ -2367,6 +2392,7 @@ 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;
@@ -2446,6 +2472,7 @@ input:disabled + ._2W10t::after {
   }
 }
 ._1HUZx {
+  height: calc(100% - 28px);
   width: 20px;
   position: absolute;
   display: block;
@@ -2453,6 +2480,9 @@ 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,6 +1,7 @@
 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,34 +5981,10 @@ 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 !== '';
   });
@@ -6030,11 +6006,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
   return React__default.createElement(React.Fragment, null, React__default.createElement(ColumnSizes, {
     columns: columns,
     showActionMenu: showActionMenu
-  }), React__default.createElement("thead", {
-    style: {
-      backgroundColor: backgroundColor
-    }
-  }, React__default.createElement("tr", {
+  }), React__default.createElement("thead", null, React__default.createElement("tr", {
     className: styles$a['data-table-header']
   }, columns.filter(function (column) {
     return !column.hidden;
@@ -6046,8 +6018,7 @@ 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,
-        backgroundColor: backgroundColor
+        flex: column.size || 1
       },
       key: column.name,
       onClick: function onClick() {
@@ -7721,6 +7692,14 @@ 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,
@@ -8619,29 +8598,15 @@ var useDataTableScrollState = function useDataTableScrollState(stickyColumns) {
   };
 };
 
-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 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 DataTableCoverShadow = function DataTableCoverShadow(_ref) {
   var _classNames;
   var showShadowOnLeft = _ref.showShadowOnLeft,
     showShadowOnRight = _ref.showShadowOnRight,
-    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]);
+    isShowingColumns = _ref.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)),
-    style: {
-      height: !isShowingColumns ? '100%' : "calc(100% - " + headerHeight + ")"
-    }
+    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))
   });
 };
 
@@ -8667,8 +8632,7 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
   var children = _ref.children,
     stickyColumns = _ref.stickyColumns,
     isShowingColumns = _ref.isShowingColumns,
-    isShowingFooter = _ref.isShowingFooter,
-    tableRef = _ref.tableRef;
+    isShowingFooter = _ref.isShowingFooter;
   var _useDataTableScrollSt = useDataTableScrollState(stickyColumns),
     scrollContainerRef = _useDataTableScrollSt.scrollContainerRef,
     onScroll = _useDataTableScrollSt.onScroll,
@@ -8690,8 +8654,7 @@ 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,
-    tableRef: tableRef
+    isShowingColumns: !!isShowingColumns
   }), 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,
@@ -8926,8 +8889,7 @@ var DataTable$1 = function DataTable(_ref) {
   }, React__default.createElement(DataTableStickyColumnsContainer, {
     stickyColumns: stickyColumns,
     isShowingColumns: !!isShowingColumns,
-    isShowingFooter: !!isShowingFooter,
-    tableRef: tableRef
+    isShowingFooter: !!isShowingFooter
   }, isShowingColumns && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
     placement: "top"
   }), React__default.createElement("div", {