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

package/dist/index.modern.js

@@ -6441,10 +6441,16 @@ const ToastContainer = ({
   enableMultiContainer: true
 });
 
+const TIME_FORMAT = {
+  FORMAT_24H: '24h',
+  FORMAT_AMPM: 'ampm'
+};
+
 const 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
 };
 const ProviderConfigContext = createContext(initialValue$1);
 const useProviderConfig = () => {
@@ -6459,7 +6465,7 @@ const SousChefProvider = ({
   children,
   i18n: _i18n = en,
   country: _country = 'US',
-  timeFormat: _timeFormat = 'ampm'
+  timeFormat: _timeFormat = TIME_FORMAT.FORMAT_AMPM
 }) => {
   return React__default.createElement(ProviderConfigContext.Provider, {
     value: {
@@ -7569,7 +7575,7 @@ const TimeFieldInput = ({
   duration,
   timeFormat
 }) => {
-  const format = timeFormat === 'ampm' ? 'g:i A' : 'H:i';
+  const format = timeFormat === TIME_FORMAT.FORMAT_AMPM ? 'g:i A' : 'H:i';
   return React__default.createElement(AffixContainer, {
     prefix: prefix ? prefix : React__default.createElement(IconClock, {
       size: "medium",
@@ -7611,7 +7617,7 @@ const TimeFieldDropdownElement = (_ref, ref) => {
       timeFormat
     } = _ref,
     allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-  const defaultPlaceholder = timeFormat === 'ampm' ? '9:00 AM' : '09:00';
+  const defaultPlaceholder = timeFormat === TIME_FORMAT.FORMAT_AMPM ? '9:00 AM' : '09:00';
   const {
     inputProps,
     fieldProps
@@ -9494,8 +9500,6 @@ const useDataTableScrollState = stickyColumns => {
   const hasScrollOnRight = scrollState === DATA_TABLE_SCROLL_STATES.SCROLLABLE_CONTENT_ON_RIGHT || scrollState === DATA_TABLE_SCROLL_STATES.SCROLLABLE_CONTENT_ON_BOTH_SIDES;
   const hasRightColumnSticky = stickyColumns === 'right' || stickyColumns === 'both';
   const hasLeftColumnSticky = stickyColumns === 'left' || stickyColumns === 'both';
-  const showCoverShadowOnRight = stickyColumns === 'left' && hasScrollOnRight;
-  const showCoverShadowOnLeft = stickyColumns === 'right' && hasScrollOnLeft;
   return {
     scrollState,
     onScroll,
@@ -9503,22 +9507,21 @@ const useDataTableScrollState = stickyColumns => {
     hasScrollOnLeft,
     hasScrollOnRight,
     hasRightColumnSticky,
-    hasLeftColumnSticky,
-    showCoverShadowOnRight,
-    showCoverShadowOnLeft
+    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"};
 
 const DataTableCoverShadow = ({
-  showShadowOnLeft,
-  showShadowOnRight,
-  isShowingColumns
+  isShowingColumns,
+  direction,
+  showShadow
 }) => {
   const headerHeight = useTableHeaderHeight(isShowingColumns);
   const [hasFixedScroll] = useState(detectAlwaysShowScrollbars);
   const SCROLL_SIZE = '15px';
+  const backgroundColor = useBackgroundColor();
   const getHeaderHeight = () => {
     if (hasFixedScroll) {
       return `calc(100% - ${headerHeight} - ${SCROLL_SIZE})`;
@@ -9527,10 +9530,14 @@ const DataTableCoverShadow = ({
   };
   return React__default.createElement("div", {
     className: classnames(styles$C['data-table-cover-shadow'], {
-      [styles$C['data-table-cover-shadow--left']]: showShadowOnLeft,
-      [styles$C['data-table-cover-shadow--right']]: showShadowOnRight
+      [styles$C['data-table-cover-shadow--left']]: direction === 'left',
+      [styles$C['data-table-cover-shadow--left-shadow']]: direction === 'left' && showShadow,
+      [styles$C['data-table-cover-shadow--right']]: direction === 'right',
+      [styles$C['data-table-cover-shadow--right-shadow']]: direction === 'right' && showShadow
     }),
     style: {
+      // @ts-expect-error This difines a custom CSS variable
+      '--corner-background-color': backgroundColor,
       height: !isShowingColumns ? '100%' : getHeaderHeight(),
       bottom: isShowingColumns && hasFixedScroll ? SCROLL_SIZE : 0
     }
@@ -9560,15 +9567,16 @@ const DataTableStickyColumnsContainer = ({
   isShowingColumns,
   isShowingFooter
 }) => {
+  const {
+    state
+  } = useDataTableContext();
   const {
     scrollContainerRef,
     onScroll,
     hasScrollOnLeft,
     hasScrollOnRight,
     hasRightColumnSticky,
-    hasLeftColumnSticky,
-    showCoverShadowOnRight,
-    showCoverShadowOnLeft
+    hasLeftColumnSticky
   } = useDataTableScrollState(stickyColumns);
   const [browserVersion] = useState(() => {
     return getBrowserVersion();
@@ -9578,17 +9586,21 @@ const DataTableStickyColumnsContainer = ({
   }
   const noShadow = browserVersion.includes('Safari');
   const containerClassName = 'data-table-sticky-columns-container';
-  return React__default.createElement(Fragment, null, (showCoverShadowOnRight || showCoverShadowOnLeft) && React__default.createElement(DataTableCoverShadow, {
-    showShadowOnLeft: hasScrollOnLeft && stickyColumns === 'right',
-    showShadowOnRight: hasScrollOnRight && stickyColumns === 'left',
-    isShowingColumns: !!isShowingColumns
-  }), React__default.createElement("div", {
+  return React__default.createElement(Fragment, null, (hasScrollOnLeft || hasScrollOnRight) && React__default.createElement(Fragment, null, React__default.createElement(DataTableCoverShadow, {
+    direction: "left",
+    isShowingColumns: !!isShowingColumns,
+    showShadow: state === 'EMPTY' ? false : stickyColumns === 'right'
+  }), React__default.createElement(DataTableCoverShadow, {
+    direction: "right",
+    isShowingColumns: !!isShowingColumns,
+    showShadow: state === 'EMPTY' ? false : stickyColumns === 'left'
+  })), React__default.createElement("div", {
     className: classnames(styles$D[containerClassName], {
       [styles$D[`${containerClassName}--with-footer`]]: isShowingFooter,
       [styles$D[`${containerClassName}--with-left-sticky-columns`]]: hasLeftColumnSticky,
-      [styles$D[`${containerClassName}--with-left-sticky-columns-and-shadow`]]: hasLeftColumnSticky && hasScrollOnLeft,
+      [styles$D[`${containerClassName}--with-left-sticky-columns-and-shadow`]]: state !== 'EMPTY' ? hasLeftColumnSticky && hasScrollOnLeft : false,
       [styles$D[`${containerClassName}--with-right-sticky-columns`]]: hasRightColumnSticky,
-      [styles$D[`${containerClassName}--with-right-sticky-columns-and-shadow`]]: hasRightColumnSticky && hasScrollOnRight,
+      [styles$D[`${containerClassName}--with-right-sticky-columns-and-shadow`]]: state !== 'EMPTY' ? hasRightColumnSticky && hasScrollOnRight : false,
       [styles$D[`${containerClassName}--no-shadow`]]: noShadow
     }),
     onScroll: onScroll,
@@ -9743,13 +9755,26 @@ const MagnifyingGlassIllustration = () => {
 
 const DataTableEmptyState = ({
   columns,
-  customEmptyState
+  customEmptyState,
+  stickyColumns
 }) => {
   const translate = useTranslation('DataTable');
   const customImage = customEmptyState && customEmptyState.image ? customEmptyState.image : '';
-  return React__default.createElement(DataTableRow, null, React__default.createElement(DataTableCell, {
-    columnIndex: 0,
-    colSpan: (columns == null ? void 0 : columns.length) || undefined
+  const shouldRenderStickyLeftCell = stickyColumns && (stickyColumns === 'left' || stickyColumns === 'both');
+  const shouldRenderStickyRightCell = stickyColumns && (stickyColumns === 'right' || stickyColumns === 'both');
+  let colSpan = undefined;
+  if (columns) {
+    if (stickyColumns) {
+      colSpan = stickyColumns === 'both' ? columns.length - 2 : columns.length - 1;
+    } else {
+      colSpan = columns.length;
+    }
+  }
+  return React__default.createElement(DataTableRow, null, shouldRenderStickyLeftCell && React__default.createElement(DataTableCell, {
+    columnIndex: 0
+  }, ''), React__default.createElement(DataTableCell, {
+    columnIndex: shouldRenderStickyLeftCell ? 1 : 0,
+    colSpan: colSpan
   }, React__default.createElement("div", {
     className: styles$B['data-table-empty-state']
   }, React__default.createElement(EmptyStateContainerStack, {
@@ -9758,7 +9783,9 @@ const DataTableEmptyState = ({
     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.createElement(DataTableCell, {
+    columnIndex: shouldRenderStickyLeftCell ? 2 : 1
+  }, ''));
 };
 
 const _excluded$e = ["items", "columns", "itemComponent", "maxHeight", "hasPrevious", "hasNext", "onPreviousClick", "onNextClick", "onSort", "isLoading", "showActionMenu", "footerComponent", "hasVerticalBorders", "testId", "skeletonRowLayout", "stickyColumns", "emptyState"];
@@ -9892,7 +9919,8 @@ const DataTable = _ref => {
     });
   }), state === DATA_TABLE_STATES.EMPTY && React__default.createElement(DataTableEmptyState, {
     columns: columns,
-    customEmptyState: emptyState
+    customEmptyState: emptyState,
+    stickyColumns: stickyColumns
   }), state === DATA_TABLE_STATES.SKELETON_LOADING && React__default.createElement(React__default.Fragment, null, skeletonRows.map((_, index) => React__default.createElement(SkeletonRow, {
     key: index
   })))), isShowingFooter && isShowingContent && React__default.createElement("tfoot", {
@@ -12468,22 +12496,24 @@ const WeekField = ({
   }));
 };
 
-const getTimeOptions = (interval, startTime = setToMidnight(new Date()), skipStartTime = false, timeFormat) => {
+const getTimeOptions = (interval, startTime = setToMidnight(new Date()), skipStartTime = false, timeFormat = TIME_FORMAT.FORMAT_AMPM) => {
   const intervalCoeffecient = 1000 * 60 * interval;
   const optionsCount = 60 * 24 / interval;
   const timeOptions = [];
   const rounded = new Date(Math.ceil(startTime.getTime() / intervalCoeffecient) * intervalCoeffecient);
   const skipFirstInterval = skipStartTime && startTime.getTime() === rounded.getTime();
+  const isUsingAmPmFormat = timeFormat === TIME_FORMAT.FORMAT_AMPM;
   for (let i = skipFirstInterval ? 1 : 0; i < optionsCount; i++) {
     const newDate = new Date(rounded.getTime());
     newDate.setMinutes(rounded.getMinutes() + interval * i);
-    const hours = timeFormat === 'ampm' ? formatHours(newDate.getHours()) : newDate.getHours();
+    const hours = isUsingAmPmFormat ? formatHours(newDate.getHours()) : newDate.getHours();
     const minutes = newDate.getMinutes();
-    const timeString = `${hours.toString().padStart(2, '0')}:${minutes === 0 ? '00' : minutes}`;
-    if (timeFormat === 'ampm') {
+    if (isUsingAmPmFormat) {
+      const timeString = `${hours}:${minutes === 0 ? '00' : minutes}`;
       const period = newDate.getHours() < 12 ? 'AM' : 'PM';
       timeOptions.push(`${timeString} ${period}`);
     } else {
+      const timeString = `${hours.toString().padStart(2, '0')}:${minutes === 0 ? '00' : minutes}`;
       timeOptions.push(timeString);
     }
   }
@@ -12664,7 +12694,7 @@ const TimeRangeEnd = ({
   calculateDuration,
   timeFormat
 }) => {
-  const defaultPlaceholder = timeFormat === 'ampm' ? '2:00 PM' : '14:00';
+  const defaultPlaceholder = timeFormat === TIME_FORMAT.FORMAT_AMPM ? '2:00 PM' : '14:00';
   return React__default.createElement(TimeRangeSelector, {
     name: "end-time",
     startTime: startTime,
@@ -12697,7 +12727,7 @@ const TimeRangeStart = ({
   value,
   timeFormat
 }) => {
-  const defaultPlaceholder = timeFormat === 'ampm' ? '9:00 AM' : '09:00';
+  const defaultPlaceholder = timeFormat === TIME_FORMAT.FORMAT_AMPM ? '9:00 AM' : '09:00';
   return React__default.createElement(TimeRangeSelector, {
     name: "start-time",
     startTime: startTime,
@@ -12728,7 +12758,7 @@ const TimeRangeField = ({
   testId,
   subtractDuration,
   calculateDuration,
-  timeFormat: _timeFormat = '24h'
+  timeFormat
 }) => {
   const {
     timeFormat: globalTimeFormat
@@ -12784,7 +12814,7 @@ const TimeRangeField = ({
     id: controllers.id,
     disabled: disabled,
     value: controllers.value.start,
-    timeFormat: _timeFormat || globalTimeFormat
+    timeFormat: timeFormat || globalTimeFormat
   }), React__default.createElement(TimeRangeEnd, {
     startTime: start,
     interval: _interval,
@@ -12796,7 +12826,7 @@ const TimeRangeField = ({
     value: controllers.value.end,
     subtractDuration: subtractDuration,
     calculateDuration: calculateDuration,
-    timeFormat: _timeFormat || globalTimeFormat
+    timeFormat: timeFormat || globalTimeFormat
   })));
 };