@7shifts/sous-chef 3.35.0 → 3.36.1-beta0

package/dist/index.js

@@ -4216,34 +4216,6 @@ IconWrench.displayName = 'IconWrench';
 
 var styles$6 = {"pagination-controls":"_SMSPF"};
 
-var getLocalizedString = function getLocalizedString(key) {
-  if (!window.Shifts) {
-    return getLocalTranslation(key);
-  }
-  return getWebAppTranslation(key);
-};
-var getWebAppTranslation = function getWebAppTranslation(key) {
-  var _Shifts, _Shifts$Lang;
-  if (!Shifts || ((_Shifts = Shifts) === null || _Shifts === void 0 ? void 0 : (_Shifts$Lang = _Shifts.Lang) === null || _Shifts$Lang === void 0 ? void 0 : _Shifts$Lang.cache) === undefined) {
-    return getLocalTranslation(key);
-  }
-  var _key$split = key.split('.'),
-    moduleName = _key$split[0],
-    id = _key$split[1];
-  if (Shifts.Lang.cache === undefined || Shifts.Lang.cache[moduleName] === undefined || Shifts.Lang.cache[moduleName][id] === undefined) {
-    return key;
-  }
-  return Shifts.Lang.cache[moduleName][id];
-};
-var getLocalTranslation = function getLocalTranslation(key) {
-  var translationParts = key.split('.');
-  if (translationParts.length > 1) {
-    var literal = translationParts[1];
-    return literal.charAt(0).toUpperCase() + literal.slice(1).toLowerCase().replace(/_/g, ' ');
-  }
-  return key;
-};
-
 var styles$7 = {"keyboard-key":"_14Od2","keyboard-key--light":"_3hU2t","keyboard-key__character":"_31UYJ"};
 
 var KeyboardKey = function KeyboardKey(_ref) {
@@ -4289,8 +4261,75 @@ var isFocusingEditableElement = function isFocusingEditableElement() {
   return false;
 };
 
+var PaginationControls = {
+	previousButton: "Previous",
+	nextButton: "Next"
+};
+var AsyncSelectField = {
+	moreOptionsPlaceholder: "Start typing to see more options"
+};
+var SelectField = {
+	createOption: "Create option",
+	createButton: "Create"
+};
+var HintModal = {
+	dontShowAgainLabel: "Don’t show this again"
+};
+var Calendar = {
+	sunday: "Sunday",
+	monday: "Monday",
+	tuesday: "Tuesday",
+	wednesday: "Wednesday",
+	thursday: "Thursday",
+	friday: "Friday",
+	saturday: "Saturday",
+	january: "January",
+	february: "February",
+	march: "March",
+	april: "April",
+	may: "May",
+	june: "June",
+	july: "July",
+	august: "August",
+	september: "September",
+	october: "October",
+	november: "November",
+	december: "December"
+};
+var en = {
+	PaginationControls: PaginationControls,
+	AsyncSelectField: AsyncSelectField,
+	SelectField: SelectField,
+	HintModal: HintModal,
+	Calendar: Calendar
+};
+
+var initialValue = {
+  i18n: en
+};
+var TranslationsContext = React.createContext(initialValue);
+
+var useTranslation = function useTranslation(context) {
+  var _useContext = React.useContext(TranslationsContext),
+    i18n = _useContext.i18n;
+  var translate = function translate(key) {
+    var keys = key.includes('.') ? key.split('.') : [key];
+    if (context) {
+      keys.unshift(context);
+    }
+    var translation = keys.reduce(function (acc, key) {
+      if (typeof acc === 'string') {
+        return acc;
+      }
+      return acc.hasOwnProperty(key) ? acc[key] : '';
+    }, i18n);
+    return typeof translation === 'string' && translation !== '' ? translation : keys.join('.');
+  };
+  return translate;
+};
+
 var _excluded$2n = ["hasPrevious", "hasNext", "onPreviousClick", "onNextClick", "testId", "scrollTarget"];
-var PaginationControls = function PaginationControls(_ref) {
+var PaginationControls$1 = function PaginationControls(_ref) {
   var _ref$hasPrevious = _ref.hasPrevious,
     hasPrevious = _ref$hasPrevious === void 0 ? true : _ref$hasPrevious,
     _ref$hasNext = _ref.hasNext,
@@ -4300,6 +4339,7 @@ var PaginationControls = function PaginationControls(_ref) {
     testId = _ref.testId,
     scrollTarget = _ref.scrollTarget,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2n);
+  var __ = useTranslation('PaginationControls');
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   var scrollToTop = function scrollToTop() {
@@ -4339,7 +4379,7 @@ var PaginationControls = function PaginationControls(_ref) {
   }), React__default.createElement(Button$1, {
     disabled: !hasPrevious,
     onClick: handlePreviousClick,
-    title: React__default.createElement(React__default.Fragment, null, capitalizeFirstLetter(getLocalizedString('default.PREVIOUS')), "\xA0\xA0", React__default.createElement(KeyboardKey, {
+    title: React__default.createElement(React__default.Fragment, null, capitalizeFirstLetter(__('previousButton')), "\xA0\xA0", React__default.createElement(KeyboardKey, {
       theme: "light"
     }, SHORTCUTS.PREVIOUS.toLocaleUpperCase()))
   }, React__default.createElement(IconArrowLeft, {
@@ -4347,7 +4387,7 @@ var PaginationControls = function PaginationControls(_ref) {
   })), React__default.createElement(Button$1, {
     disabled: !hasNext,
     onClick: handleNextClick,
-    title: React__default.createElement(React__default.Fragment, null, capitalizeFirstLetter(getLocalizedString('default.next')), "\xA0\xA0", React__default.createElement(KeyboardKey, {
+    title: React__default.createElement(React__default.Fragment, null, capitalizeFirstLetter(__('nextButton')), "\xA0\xA0", React__default.createElement(KeyboardKey, {
       theme: "light"
     }, SHORTCUTS.NEXT.toLocaleUpperCase()))
   }, React__default.createElement(IconArrowRight, {
@@ -4431,8 +4471,14 @@ var ToastContainer = function ToastContainer(_ref2) {
 };
 
 var SousChefProvider = function SousChefProvider(_ref) {
-  var children = _ref.children;
-  return React__default.createElement(React.Fragment, null, React__default.createElement(ToastContainer, null), children);
+  var children = _ref.children,
+    _ref$i18n = _ref.i18n,
+    i18n = _ref$i18n === void 0 ? en : _ref$i18n;
+  return React__default.createElement(TranslationsContext.Provider, {
+    value: {
+      i18n: i18n
+    }
+  }, React__default.createElement(ToastContainer, null), children);
 };
 
 var styles$a = {"data-table-header":"_1vpCK","data-table-header__item":"_dJWps","data-table-header__item--sortable":"_14AEw","data-table-header__itemfocus":"_2JSFR","data-table-header__item--action":"_29TM7","data-table-header__item-content":"_2Zpt5","data-table-header__item-content--right-align":"_3WtwH","data-table-header__sort-icon":"_3codU"};
@@ -4591,12 +4637,12 @@ var DATA_TABLE_SCROLL_STATES = {
 };
 var AMOUNT_OF_SKELETON_ROWS = 10;
 
-var initialValue = {
+var initialValue$1 = {
   columns: [],
   numberOfRows: 0,
   state: DATA_TABLE_STATES.SKELETON_LOADING
 };
-var Context = React.createContext(initialValue);
+var Context = React.createContext(initialValue$1);
 var useDataTableContext = function useDataTableContext() {
   var context = React.useContext(Context);
   if (!context) {
@@ -5713,13 +5759,6 @@ var getItemType = function getItemType(child) {
       throw new Error('DropdownList - dropdown items should be using DropdownListDivider or DropdownListItem components');
   }
 };
-var calculateScrollYPosition = function calculateScrollYPosition(newFocusItem, lastFocusItem, paneScrollTop, maxPaneHeight, elementYPosition) {
-  var directionCoeff = !lastFocusItem || newFocusItem > lastFocusItem ? -1 * maxPaneHeight : 0;
-  if (elementYPosition > paneScrollTop + maxPaneHeight || elementYPosition < paneScrollTop) {
-    return elementYPosition + directionCoeff;
-  }
-  return null;
-};
 
 var DropdownList = function DropdownList(_ref) {
   var testId = _ref.testId,
@@ -5742,10 +5781,7 @@ var DropdownList = function DropdownList(_ref) {
     if (listRef.current && newFocusItem !== null && listRef.current.parentNode) {
       var element = listRef.current.querySelector(":nth-child(" + (newFocusItem + 1) + ")");
       var parentList = listRef.current.parentNode;
-      var scrollYPosition = calculateScrollYPosition(newFocusItem, focusedItem || 0, parentList.scrollTop, 354, element.offsetTop);
-      if (scrollYPosition !== null) {
-        parentList.scrollTo(0, scrollYPosition);
-      }
+      parentList.scrollTo(0, element.offsetTop);
     }
   };
   var _useListKeyboardNavig = useListKeyboardNavigation(items, listRef, {
@@ -6426,12 +6462,12 @@ function createWeekRange(date, weekStart) {
     end: getEndOfWeek(date, weekStart)
   };
 }
-var getDays = function getDays() {
-  var DAYS = [getLocalizedString('time.sunday'), getLocalizedString('time.monday'), getLocalizedString('time.tuesday'), getLocalizedString('time.wednesday'), getLocalizedString('time.thursday'), getLocalizedString('time.friday'), getLocalizedString('time.saturday')];
+var getDays = function getDays(translate) {
+  var DAYS = [translate('Calendar.sunday'), translate('Calendar.monday'), translate('Calendar.tuesday'), translate('Calendar.wednesday'), translate('Calendar.thursday'), translate('Calendar.friday'), translate('Calendar.saturday')];
   return DAYS;
 };
-var getMonths = function getMonths() {
-  var MONTH_NAMES = [getLocalizedString('time.january'), getLocalizedString('time.february'), getLocalizedString('time.march'), getLocalizedString('time.april'), getLocalizedString('time.may'), getLocalizedString('time.june'), getLocalizedString('time.july'), getLocalizedString('time.august'), getLocalizedString('time.september'), getLocalizedString('time.october'), getLocalizedString('time.november'), getLocalizedString('time.december')];
+var getMonths = function getMonths(translate) {
+  var MONTH_NAMES = [translate('Calendar.january'), translate('Calendar.february'), translate('Calendar.march'), translate('Calendar.april'), translate('Calendar.may'), translate('Calendar.june'), translate('Calendar.july'), translate('Calendar.august'), translate('Calendar.september'), translate('Calendar.october'), translate('Calendar.november'), translate('Calendar.december')];
   return MONTH_NAMES;
 };
 
@@ -6491,7 +6527,7 @@ var getVerticalPosition = function getVerticalPosition(anchorPosition, placement
   }
 };
 
-var Calendar = function Calendar(_ref) {
+var Calendar$1 = function Calendar(_ref) {
   var _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? CALENDAR_MODE.DAY : _ref$mode,
     _ref$position = _ref.position,
@@ -6506,6 +6542,7 @@ var Calendar = function Calendar(_ref) {
     anchorRef = _ref.anchorRef,
     testId = _ref.testId,
     onMonthChange = _ref.onMonthChange;
+  var translate = useTranslation();
   var _useState = React.useState(null),
     calendarRef = _useState[0],
     setCalendarRef = _useState[1];
@@ -6541,7 +6578,8 @@ var Calendar = function Calendar(_ref) {
   var anchorPosition = anchorNode.getBoundingClientRect();
   var calendarPosition = calculateCalendarPosition(position, anchorPosition, calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.getBoundingClientRect());
   var styleOverrides = mode === CALENDAR_MODE.WEEK ? weekOverridesStyles : dayOverridesStyles;
-  var MONTH_NAMES = getMonths();
+  var MONTH_NAMES = getMonths(translate);
+  var DAYS = getDays(translate);
   var defaultProps = {
     classNames: _extends({}, originalStylers, styleOverrides),
     onDayClick: function onDayClick(day, activeModifiers) {
@@ -6560,6 +6598,9 @@ var Calendar = function Calendar(_ref) {
     weekStartsOn: weekStart,
     onMonthChange: onMonthChange,
     formatters: {
+      formatMonthCaption: function formatMonthCaption(date) {
+        return MONTH_NAMES[date.getMonth()];
+      },
       formatCaption: function formatCaption(date) {
         return MONTH_NAMES[date.getMonth()] + ' ' + date.getFullYear();
       },
@@ -6568,7 +6609,6 @@ var Calendar = function Calendar(_ref) {
       }
     }
   };
-  var DAYS = getDays();
   return React__default.createElement(Portal, null, React__default.createElement("div", {
     className: styles$G['calendar']
   }, React__default.createElement("div", {
@@ -6717,7 +6757,7 @@ var useLocalStorage = function useLocalStorage(key, initialValue) {
 var styles$I = {"hint-modal":"_1b47y","hint-modal--after-open":"_2MB4p","hint-modal--before-close":"_3VYQo","hint-modal__overlay":"_3Enme","hint-modal__image":"_2Nn7v","hint-modal__body":"_bzN9e","hint-modal__close-button":"_3xbis"};
 
 var _excluded$2y = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "testId"];
-var HintModal = function HintModal(_ref) {
+var HintModal$1 = function HintModal(_ref) {
   var header = _ref.header,
     children = _ref.children,
     mediaUrl = _ref.mediaUrl,
@@ -6726,6 +6766,7 @@ var HintModal = function HintModal(_ref) {
     primaryButton = _ref.primaryButton,
     testId = _ref.testId,
     positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2y);
+  var __ = useTranslation('HintModal');
   var _useState = React.useState(false),
     doNotShowAgain = _useState[0],
     setDoNotShowAgain = _useState[1];
@@ -6790,7 +6831,7 @@ var HintModal = function HintModal(_ref) {
   }, React__default.createElement(CheckboxField, {
     name: "hint-modal-do-not-show-checkbox",
     checked: doNotShowAgain,
-    label: getLocalizedString('schedules.DONT_SHOW_THIS_AGAIN'),
+    label: __('dontShowAgainLabel'),
     onChange: function onChange() {
       return setDoNotShowAgain(!doNotShowAgain);
     }
@@ -7235,7 +7276,7 @@ var DataTable = function DataTable(_ref) {
     return React__default.createElement("div", {
       className: styles$b['data-table__pagination-controls'],
       "data-testid": testId && testId + "-pagination-controls"
-    }, React__default.createElement(PaginationControls, {
+    }, React__default.createElement(PaginationControls$1, {
       hasPrevious: isLoading ? false : hasPrevious,
       hasNext: isLoading ? false : hasNext,
       onPreviousClick: onPreviousClick,
@@ -7570,6 +7611,7 @@ function CustomMenu(_ref) {
     setInputDefaultValue = _useState2[1];
   var textFieldRef = React.useRef(null);
   var containerRef = React.useRef(null);
+  var __ = useTranslation('SelectField');
   var CreatableButton = function CreatableButton() {
     var button = creatableButton;
     if (!button || typeof button === 'string') {
@@ -7587,7 +7629,7 @@ function CustomMenu(_ref) {
         justifyContent: "center"
       }, React__default.createElement(IconPlus, {
         size: "medium"
-      }), button || getLocalizedString('main.CREATE_OPTION')));
+      }), button || __('createOption')));
     }
     return React__default.cloneElement(button, {
       onClick: function onClick() {
@@ -7653,7 +7695,7 @@ function CustomMenu(_ref) {
     onKeyDown: function onKeyDown(e) {
       e.stopPropagation();
     }
-  }, getLocalizedString('default.CREATE'))))));
+  }, __('createButton'))))));
 }
 
 var useShouldScrollMenuIntoView = function useShouldScrollMenuIntoView(menuShouldScrollIntoView) {
@@ -7771,7 +7813,7 @@ var useSelectField = function useSelectField(_ref) {
   };
 };
 
-var SelectField = function SelectField(props) {
+var SelectField$1 = function SelectField(props) {
   var _useSelectField = useSelectField(props),
     fieldProps = _useSelectField.fieldProps,
     selectProps = _useSelectField.selectProps;
@@ -7792,7 +7834,7 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
     disabled = _ref.disabled,
     prefix = _ref.prefix,
     testId = _ref.testId;
-  return React__default.createElement(SelectField, {
+  return React__default.createElement(SelectField$1, {
     name: name,
     value: value,
     options: options,
@@ -7966,7 +8008,7 @@ var DateFilter = function DateFilter(_ref) {
   }, React__default.createElement(IconChevronRight, {
     size: "small",
     color: "grey-400"
-  }))), calendarOpen && mode !== DATE_FILTER_MODE.MONTH && React__default.createElement(Calendar, {
+  }))), calendarOpen && mode !== DATE_FILTER_MODE.MONTH && React__default.createElement(Calendar$1, {
     onSelect: handleChange,
     selected: value,
     onClickOutside: function onClickOutside() {
@@ -8874,6 +8916,7 @@ var CustomList = function CustomList(_ref) {
     hasMoreOptions = _ref.hasMoreOptions,
     hasMoreOptionsFirstLoad = _ref.hasMoreOptionsFirstLoad,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2F);
+  var __ = useTranslation('AsyncSelectField');
   var showFooter = hasMoreOptions;
   if (props.selectProps.inputValue === '' && typeof hasMoreOptionsFirstLoad === 'boolean') {
     showFooter = hasMoreOptionsFirstLoad;
@@ -8882,11 +8925,11 @@ var CustomList = function CustomList(_ref) {
     justifyContent: "center"
   }, React__default.createElement("div", {
     className: styles$11['custom-list']
-  }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
+  }, __('moreOptionsPlaceholder')))));
 };
 
 var _excluded$2G = ["loadOptions"];
-var AsyncSelectField = function AsyncSelectField(_ref) {
+var AsyncSelectField$1 = function AsyncSelectField(_ref) {
   var loadOptions = _ref.loadOptions,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2G);
   var _useState = React.useState(false),
@@ -9106,7 +9149,7 @@ var DateField = function DateField(_ref) {
     onBlur: controllers.onBlur,
     maxLength: format.length,
     value: inputValue
-  })), showCalendar && React__default.createElement(Calendar, {
+  })), showCalendar && React__default.createElement(Calendar$1, {
     onSelect: function onSelect(date) {
       var _inputRef$current;
       setInputValue(formatDate(date, format));
@@ -9203,6 +9246,7 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
     testId = _ref.testId,
     onMonthChange = _ref.onMonthChange,
     mode = _ref.mode;
+  var translate = useTranslation();
   var position = CALENDAR_PLACEMENT.BOTTOM;
   var _useState = React.useState(null),
     calendarRef = _useState[0],
@@ -9236,8 +9280,8 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
     fromMonth: start
   };
   var datePickerProps = mode === 'start-date' ? startDateProps : endDateProps;
-  var DAYS = getDays();
-  var MONTH_NAMES = getMonths();
+  var DAYS = getDays(translate);
+  var MONTH_NAMES = getMonths(translate);
   return React__default.createElement(Portal, null, React__default.createElement("div", {
     className: styles$G['calendar']
   }, React__default.createElement("div", {
@@ -9576,7 +9620,7 @@ var WeekField = function WeekField(_ref) {
     onBlur: controllers.onBlur,
     maxLength: format.length,
     value: inputValue
-  })), showCalendar && React__default.createElement(Calendar, {
+  })), showCalendar && React__default.createElement(Calendar$1, {
     onSelect: function onSelect(date) {
       var _inputRef$current;
       setInputValue(formatDate(date, format));
@@ -9663,7 +9707,8 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
     inputValue = _ref.inputValue,
     width = _ref.width,
     _ref$endField = _ref.endField,
-    endField = _ref$endField === void 0 ? false : _ref$endField;
+    endField = _ref$endField === void 0 ? false : _ref$endField,
+    value = _ref.value;
   var startTimeParsed = startTime ? getDateWithStartTime(startTime) : setToMidnight(new Date());
   var timeOptions = React.useMemo(function () {
     return getTimeOptions(interval, startTimeParsed, endField && !!startTime);
@@ -9672,12 +9717,13 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
     index = _useState[0],
     setIndex = _useState[1];
   React.useEffect(function () {
-    if (inputValue) {
+    var selectedValue = value || inputValue;
+    if (selectedValue) {
       setIndex(timeOptions.findIndex(function (option) {
-        return option.toLowerCase().startsWith(inputValue.toLowerCase());
+        return option.toLowerCase().startsWith(selectedValue.toLowerCase());
       }));
     }
-  }, [inputValue]);
+  }, [inputValue, value]);
   return React__default.createElement(Dropdown, {
     triggerWidth: "full",
     trigger: trigger,
@@ -9751,7 +9797,8 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
     onOptionClick: onOptionClick,
     inputValue: selectedDropdownValue,
     width: width,
-    endField: endField
+    endField: endField,
+    value: allOtherProps.value
   });
 };
 var TimeRangeSelector = React.forwardRef(TimeFieldElement);
@@ -11403,7 +11450,7 @@ var EmptyState = function EmptyState(_ref) {
   }, children);
 };
 
-exports.AsyncSelectField = AsyncSelectField;
+exports.AsyncSelectField = AsyncSelectField$1;
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
 exports.Bold = Bold;
@@ -11411,7 +11458,7 @@ exports.BreadcrumbItem = BreadcrumbItem;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$1;
 exports.COLORS = COLORS;
-exports.Calendar = Calendar;
+exports.Calendar = Calendar$1;
 exports.CalloutCard = CalloutCard;
 exports.Card = Card;
 exports.CheckboxField = CheckboxField;
@@ -11435,7 +11482,7 @@ exports.FormFeedback = FormFeedback;
 exports.FormFooter = FormFooter;
 exports.FormRow = FormRow;
 exports.FormSection = FormSection;
-exports.HintModal = HintModal;
+exports.HintModal = HintModal$1;
 exports.IconAnalytics = IconAnalytics;
 exports.IconArrowDown = IconArrowDown;
 exports.IconArrowDownWideShort = IconArrowDownWideShort;
@@ -11591,7 +11638,7 @@ exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;
 exports.MultiSelectField = MultiSelectField;
 exports.Page = Page;
-exports.PaginationControls = PaginationControls;
+exports.PaginationControls = PaginationControls$1;
 exports.PasswordField = PasswordField;
 exports.Paywall = Paywall;
 exports.PercentageField = PercentageField;
@@ -11609,7 +11656,7 @@ exports.SIZE_50_PERCENT = SIZE_50_PERCENT;
 exports.SIZE_66_PERCENT = SIZE_66_PERCENT;
 exports.SIZE_75_PERCENT = SIZE_75_PERCENT;
 exports.SegmentedControl = SegmentedControl;
-exports.SelectField = SelectField;
+exports.SelectField = SelectField$1;
 exports.Skeleton = Skeleton;
 exports.SousChefProvider = SousChefProvider;
 exports.Spinner = Spinner;