@7shifts/sous-chef 3.73.0-beta.0 → 3.73.0

package/dist/index.js

@@ -6299,10 +6299,16 @@ var ToastContainer = function ToastContainer(_ref2) {
   });
 };
 
+var TIME_FORMAT = {
+  FORMAT_24H: '24h',
+  FORMAT_AMPM: 'ampm'
+};
+
 var initialValue$1 = {
-  // This is currently used to configure the phone number field
+  // This country prop is currently used to configure the phone number field
   country: 'US',
-  timeFormat: 'ampm'
+  // This timeFormat prop is currently used to configure the time format for time fields
+  timeFormat: TIME_FORMAT.FORMAT_AMPM
 };
 var ProviderConfigContext = React.createContext(initialValue$1);
 var useProviderConfig = function useProviderConfig() {
@@ -6320,7 +6326,7 @@ var SousChefProvider = function SousChefProvider(_ref) {
     _ref$country = _ref.country,
     country = _ref$country === void 0 ? 'US' : _ref$country,
     _ref$timeFormat = _ref.timeFormat,
-    timeFormat = _ref$timeFormat === void 0 ? 'ampm' : _ref$timeFormat;
+    timeFormat = _ref$timeFormat === void 0 ? TIME_FORMAT.FORMAT_AMPM : _ref$timeFormat;
   return React__default["default"].createElement(ProviderConfigContext.Provider, {
     value: {
       country: country,
@@ -7073,7 +7079,9 @@ var FONT_EMPHASIS = {
   BOLD: 'bold',
   ITALIC: 'italic',
   UNDERLINE: 'underline',
-  MONOSPACE: 'monospace'
+  DOTTED_UNDERLINE: 'dotted-underline',
+  MONOSPACE: 'monospace',
+  STRIKETHROUGH: 'strikethrough'
 };
 var ALIGNMENTS = {
   LEFT: 'left',
@@ -7082,7 +7090,7 @@ var ALIGNMENTS = {
   JUSTIFY: 'justify'
 };
 
-var styles$11 = {"text":"_6SgoN","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text--bold":"_i2LHD","text--italic":"_NgSTT","text--underline":"_ouqVK","text--monospace":"_Vi-V1","text--align-left":"_tfSIf","text--align-right":"_AK1Nr","text--align-center":"_N-tR4","text--align-justify":"_LkMr0"};
+var styles$11 = {"text":"_6SgoN","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text--bold":"_i2LHD","text--italic":"_NgSTT","text--underline":"_ouqVK","text--dotted-underline":"_zZ55-","text--monospace":"_Vi-V1","text--line-through":"_psV6T","text--align-left":"_tfSIf","text--align-right":"_AK1Nr","text--align-center":"_N-tR4","text--align-justify":"_LkMr0"};
 
 var _excluded$o = ["children", "as", "emphasis", "alignment", "color", "testId", "textWrap"];
 var TextComponent = function TextComponent(_ref, ref) {
@@ -7107,7 +7115,7 @@ var TextComponent = function TextComponent(_ref, ref) {
       color: getColor(color),
       textWrap: textWrap
     }, positionStyles),
-    className: classnames__default["default"](styles$11['text'], (_classnames = {}, _classnames[styles$11['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$11['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$11['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$11['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$11['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$11['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$11['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$11['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$11['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$11['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$11['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
+    className: classnames__default["default"](styles$11['text'], (_classnames = {}, _classnames[styles$11['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$11['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$11['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$11['text--dotted-underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE), _classnames[styles$11['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$11['text--line-through']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH), _classnames[styles$11['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$11['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$11['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$11['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$11['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$11['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$11['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
     'data-testid': testId
   }, dataProps, {
     ref: ref
@@ -7410,7 +7418,7 @@ var TimeFieldInput = function TimeFieldInput(_ref) {
     prefix = _ref.prefix,
     duration = _ref.duration,
     timeFormat = _ref.timeFormat;
-  var format = timeFormat === 'ampm' ? 'g:i A' : 'H:i';
+  var format = timeFormat === TIME_FORMAT.FORMAT_AMPM ? 'g:i A' : 'H:i';
   return React__default["default"].createElement(AffixContainer, {
     prefix: prefix ? prefix : React__default["default"].createElement(IconClock, {
       size: "medium",
@@ -7451,7 +7459,7 @@ var TimeFieldDropdownElement = function TimeFieldDropdownElement(_ref, ref) {
     duration = _ref.duration,
     timeFormat = _ref.timeFormat,
     allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-  var defaultPlaceholder = timeFormat === 'ampm' ? '9:00 AM' : '09:00';
+  var defaultPlaceholder = timeFormat === TIME_FORMAT.FORMAT_AMPM ? '9:00 AM' : '09:00';
   var _useTextField = useTextField(_extends({}, allOtherProps, {
       placeholder: placeholder || defaultPlaceholder,
       autoComplete: autoComplete,
@@ -9318,8 +9326,6 @@ var useDataTableScrollState = function useDataTableScrollState(stickyColumns) {
   var hasScrollOnRight = scrollState === DATA_TABLE_SCROLL_STATES.SCROLLABLE_CONTENT_ON_RIGHT || scrollState === DATA_TABLE_SCROLL_STATES.SCROLLABLE_CONTENT_ON_BOTH_SIDES;
   var hasRightColumnSticky = stickyColumns === 'right' || stickyColumns === 'both';
   var hasLeftColumnSticky = stickyColumns === 'left' || stickyColumns === 'both';
-  var showCoverShadowOnRight = stickyColumns === 'left' && hasScrollOnRight;
-  var showCoverShadowOnLeft = stickyColumns === 'right' && hasScrollOnLeft;
   return {
     scrollState: scrollState,
     onScroll: onScroll,
@@ -9327,23 +9333,22 @@ var useDataTableScrollState = function useDataTableScrollState(stickyColumns) {
     hasScrollOnLeft: hasScrollOnLeft,
     hasScrollOnRight: hasScrollOnRight,
     hasRightColumnSticky: hasRightColumnSticky,
-    hasLeftColumnSticky: hasLeftColumnSticky,
-    showCoverShadowOnRight: showCoverShadowOnRight,
-    showCoverShadowOnLeft: showCoverShadowOnLeft
+    hasLeftColumnSticky: hasLeftColumnSticky
   };
 };
 
-var styles$C = {"data-table-cover-shadow":"_4XrxW","data-table-cover-shadow--left":"_k704p","fadeinshadowleft":"_Fr-av","data-table-cover-shadow--right":"_wOust","fadeinshadowright":"_KgJaq"};
+var styles$C = {"data-table-cover-shadow":"_4XrxW","data-table-cover-shadow--left":"_k704p","data-table-cover-shadow--left-shadow":"_VXlf0","fadeinshadowleft":"_Fr-av","data-table-cover-shadow--right":"_wOust","data-table-cover-shadow--right-shadow":"_b3Rzx","fadeinshadowright":"_KgJaq"};
 
 var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
   var _classNames;
-  var showShadowOnLeft = _ref.showShadowOnLeft,
-    showShadowOnRight = _ref.showShadowOnRight,
-    isShowingColumns = _ref.isShowingColumns;
+  var isShowingColumns = _ref.isShowingColumns,
+    direction = _ref.direction,
+    showShadow = _ref.showShadow;
   var headerHeight = useTableHeaderHeight(isShowingColumns);
   var _useState = React.useState(detectAlwaysShowScrollbars),
     hasFixedScroll = _useState[0];
   var SCROLL_SIZE = '15px';
+  var backgroundColor = useBackgroundColor();
   var getHeaderHeight = function getHeaderHeight() {
     if (hasFixedScroll) {
       return "calc(100% - " + headerHeight + " - " + SCROLL_SIZE + ")";
@@ -9351,8 +9356,10 @@ var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
     return "calc(100% - " + headerHeight + ")";
   };
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$C['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$C['data-table-cover-shadow--left']] = showShadowOnLeft, _classNames[styles$C['data-table-cover-shadow--right']] = showShadowOnRight, _classNames)),
+    className: classnames__default["default"](styles$C['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$C['data-table-cover-shadow--left']] = direction === 'left', _classNames[styles$C['data-table-cover-shadow--left-shadow']] = direction === 'left' && showShadow, _classNames[styles$C['data-table-cover-shadow--right']] = direction === 'right', _classNames[styles$C['data-table-cover-shadow--right-shadow']] = direction === 'right' && showShadow, _classNames)),
     style: {
+      // @ts-expect-error This difines a custom CSS variable
+      '--corner-background-color': backgroundColor,
       height: !isShowingColumns ? '100%' : getHeaderHeight(),
       bottom: isShowingColumns && hasFixedScroll ? SCROLL_SIZE : 0
     }
@@ -9382,15 +9389,15 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
     stickyColumns = _ref.stickyColumns,
     isShowingColumns = _ref.isShowingColumns,
     isShowingFooter = _ref.isShowingFooter;
+  var _useDataTableContext = useDataTableContext(),
+    state = _useDataTableContext.state;
   var _useDataTableScrollSt = useDataTableScrollState(stickyColumns),
     scrollContainerRef = _useDataTableScrollSt.scrollContainerRef,
     onScroll = _useDataTableScrollSt.onScroll,
     hasScrollOnLeft = _useDataTableScrollSt.hasScrollOnLeft,
     hasScrollOnRight = _useDataTableScrollSt.hasScrollOnRight,
     hasRightColumnSticky = _useDataTableScrollSt.hasRightColumnSticky,
-    hasLeftColumnSticky = _useDataTableScrollSt.hasLeftColumnSticky,
-    showCoverShadowOnRight = _useDataTableScrollSt.showCoverShadowOnRight,
-    showCoverShadowOnLeft = _useDataTableScrollSt.showCoverShadowOnLeft;
+    hasLeftColumnSticky = _useDataTableScrollSt.hasLeftColumnSticky;
   var _useState = React.useState(function () {
       return getBrowserVersion();
     }),
@@ -9400,12 +9407,16 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
   }
   var noShadow = browserVersion.includes('Safari');
   var containerClassName = 'data-table-sticky-columns-container';
-  return React__default["default"].createElement(React.Fragment, null, (showCoverShadowOnRight || showCoverShadowOnLeft) && React__default["default"].createElement(DataTableCoverShadow, {
-    showShadowOnLeft: hasScrollOnLeft && stickyColumns === 'right',
-    showShadowOnRight: hasScrollOnRight && stickyColumns === 'left',
-    isShowingColumns: !!isShowingColumns
-  }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$D[containerClassName], (_classNames = {}, _classNames[styles$D[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$D[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$D[containerClassName + "--with-left-sticky-columns-and-shadow"]] = hasLeftColumnSticky && hasScrollOnLeft, _classNames[styles$D[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$D[containerClassName + "--with-right-sticky-columns-and-shadow"]] = hasRightColumnSticky && hasScrollOnRight, _classNames[styles$D[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
+  return React__default["default"].createElement(React.Fragment, null, (hasScrollOnLeft || hasScrollOnRight) && React__default["default"].createElement(React.Fragment, null, React__default["default"].createElement(DataTableCoverShadow, {
+    direction: "left",
+    isShowingColumns: !!isShowingColumns,
+    showShadow: state === 'EMPTY' ? false : stickyColumns === 'right'
+  }), React__default["default"].createElement(DataTableCoverShadow, {
+    direction: "right",
+    isShowingColumns: !!isShowingColumns,
+    showShadow: state === 'EMPTY' ? false : stickyColumns === 'left'
+  })), React__default["default"].createElement("div", {
+    className: classnames__default["default"](styles$D[containerClassName], (_classNames = {}, _classNames[styles$D[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$D[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$D[containerClassName + "--with-left-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasLeftColumnSticky && hasScrollOnLeft : false, _classNames[styles$D[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$D[containerClassName + "--with-right-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasRightColumnSticky && hasScrollOnRight : false, _classNames[styles$D[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
     onScroll: onScroll,
     ref: scrollContainerRef,
     "data-testid": "sticky-columns-container"
@@ -9556,12 +9567,25 @@ var MagnifyingGlassIllustration = function MagnifyingGlassIllustration() {
 
 var DataTableEmptyState = function DataTableEmptyState(_ref) {
   var columns = _ref.columns,
-    customEmptyState = _ref.customEmptyState;
+    customEmptyState = _ref.customEmptyState,
+    stickyColumns = _ref.stickyColumns;
   var translate = useTranslation('DataTable');
   var customImage = customEmptyState && customEmptyState.image ? customEmptyState.image : '';
-  return React__default["default"].createElement(DataTableRow, null, React__default["default"].createElement(DataTableCell, {
-    columnIndex: 0,
-    colSpan: (columns == null ? void 0 : columns.length) || undefined
+  var shouldRenderStickyLeftCell = stickyColumns && (stickyColumns === 'left' || stickyColumns === 'both');
+  var shouldRenderStickyRightCell = stickyColumns && (stickyColumns === 'right' || stickyColumns === 'both');
+  var colSpan = undefined;
+  if (columns) {
+    if (stickyColumns) {
+      colSpan = stickyColumns === 'both' ? columns.length - 2 : columns.length - 1;
+    } else {
+      colSpan = columns.length;
+    }
+  }
+  return React__default["default"].createElement(DataTableRow, null, shouldRenderStickyLeftCell && React__default["default"].createElement(DataTableCell, {
+    columnIndex: 0
+  }, ''), React__default["default"].createElement(DataTableCell, {
+    columnIndex: shouldRenderStickyLeftCell ? 1 : 0,
+    colSpan: colSpan
   }, React__default["default"].createElement("div", {
     className: styles$B['data-table-empty-state']
   }, React__default["default"].createElement(EmptyStateContainerStack, {
@@ -9570,7 +9594,9 @@ var DataTableEmptyState = function DataTableEmptyState(_ref) {
     title: customEmptyState ? customEmptyState.title : translate('emptyStateTitle'),
     actions: customEmptyState && customEmptyState.actions,
     size: "small"
-  }, customEmptyState ? customEmptyState.caption : translate('emptyStateCaption')))));
+  }, customEmptyState ? customEmptyState.caption : translate('emptyStateCaption')))), shouldRenderStickyRightCell && React__default["default"].createElement(DataTableCell, {
+    columnIndex: shouldRenderStickyLeftCell ? 2 : 1
+  }, ''));
 };
 
 var _excluded$e = ["items", "columns", "itemComponent", "maxHeight", "hasPrevious", "hasNext", "onPreviousClick", "onNextClick", "onSort", "isLoading", "showActionMenu", "footerComponent", "hasVerticalBorders", "testId", "skeletonRowLayout", "stickyColumns", "emptyState"];
@@ -9703,7 +9729,8 @@ var DataTable = function DataTable(_ref) {
     });
   }), state === DATA_TABLE_STATES.EMPTY && React__default["default"].createElement(DataTableEmptyState, {
     columns: columns,
-    customEmptyState: emptyState
+    customEmptyState: emptyState,
+    stickyColumns: stickyColumns
   }), state === DATA_TABLE_STATES.SKELETON_LOADING && React__default["default"].createElement(React__default["default"].Fragment, null, skeletonRows.map(function (_, index) {
     return React__default["default"].createElement(SkeletonRow, {
       key: index
@@ -12384,22 +12411,27 @@ var getTimeOptions = function getTimeOptions(interval, startTime, skipStartTime,
   if (skipStartTime === void 0) {
     skipStartTime = false;
   }
+  if (timeFormat === void 0) {
+    timeFormat = TIME_FORMAT.FORMAT_AMPM;
+  }
   var intervalCoeffecient = 1000 * 60 * interval;
   var optionsCount = 60 * 24 / interval;
   var timeOptions = [];
   var rounded = new Date(Math.ceil(startTime.getTime() / intervalCoeffecient) * intervalCoeffecient);
   var skipFirstInterval = skipStartTime && startTime.getTime() === rounded.getTime();
+  var isUsingAmPmFormat = timeFormat === TIME_FORMAT.FORMAT_AMPM;
   for (var i = skipFirstInterval ? 1 : 0; i < optionsCount; i++) {
     var newDate = new Date(rounded.getTime());
     newDate.setMinutes(rounded.getMinutes() + interval * i);
-    var hours = timeFormat === 'ampm' ? formatHours(newDate.getHours()) : newDate.getHours();
+    var hours = isUsingAmPmFormat ? formatHours(newDate.getHours()) : newDate.getHours();
     var minutes = newDate.getMinutes();
-    var timeString = hours.toString().padStart(2, '0') + ":" + (minutes === 0 ? '00' : minutes);
-    if (timeFormat === 'ampm') {
+    if (isUsingAmPmFormat) {
+      var timeString = hours + ":" + (minutes === 0 ? '00' : minutes);
       var period = newDate.getHours() < 12 ? 'AM' : 'PM';
       timeOptions.push(timeString + " " + period);
     } else {
-      timeOptions.push(timeString);
+      var _timeString = hours.toString().padStart(2, '0') + ":" + (minutes === 0 ? '00' : minutes);
+      timeOptions.push(_timeString);
     }
   }
   return timeOptions;
@@ -12596,7 +12628,7 @@ var TimeRangeEnd = function TimeRangeEnd(_ref) {
     subtractDuration = _ref.subtractDuration,
     calculateDuration = _ref.calculateDuration,
     timeFormat = _ref.timeFormat;
-  var defaultPlaceholder = timeFormat === 'ampm' ? '2:00 PM' : '14:00';
+  var defaultPlaceholder = timeFormat === TIME_FORMAT.FORMAT_AMPM ? '2:00 PM' : '14:00';
   return React__default["default"].createElement(TimeRangeSelector, {
     name: "end-time",
     startTime: startTime,
@@ -12628,7 +12660,7 @@ var TimeRangeStart = function TimeRangeStart(_ref) {
     testId = _ref.testId,
     value = _ref.value,
     timeFormat = _ref.timeFormat;
-  var defaultPlaceholder = timeFormat === 'ampm' ? '9:00 AM' : '09:00';
+  var defaultPlaceholder = timeFormat === TIME_FORMAT.FORMAT_AMPM ? '9:00 AM' : '09:00';
   return React__default["default"].createElement(TimeRangeSelector, {
     name: "start-time",
     startTime: startTime,
@@ -12661,8 +12693,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
     testId = _ref.testId,
     subtractDuration = _ref.subtractDuration,
     calculateDuration = _ref.calculateDuration,
-    _ref$timeFormat = _ref.timeFormat,
-    timeFormat = _ref$timeFormat === void 0 ? '24h' : _ref$timeFormat;
+    timeFormat = _ref.timeFormat;
   var _useProviderConfig = useProviderConfig(),
     globalTimeFormat = _useProviderConfig.timeFormat;
   var controllers = useRangeFieldControllers({