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

package/dist/index.js

@@ -797,7 +797,7 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
 };
 var Tooltip = React.forwardRef(TooltipElement);
 
-var styles$1g = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--marketing":"_mI-Dx","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN"};
+var styles$1g = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--marketing":"_mI-Dx","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN","disabled-button-wrapper":"_yTBTz"};
 
 var BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -884,36 +884,39 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
   var contrastSpinner = [BUTTON_THEMES.PRIMARY, BUTTON_THEMES.DANGER, BUTTON_THEMES.UPSELL, BUTTON_THEMES.MARKETING, BUTTON_THEMES.LINK_CONTRAST];
   var childrenArr = React.Children.toArray(children);
   var isIconOnly = childrenArr.length === 1 && typeof childrenArr[0] != 'string';
+  var ButtonElementResult = React__default["default"].createElement(ButtonElement, {
+    id: id,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    className: classnames__default["default"](styles$1g['button'], (_classnames = {}, _classnames[styles$1g['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1g['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1g['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1g['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1g['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1g['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1g['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1g['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1g['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1g['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1g['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1g['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1g['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1g['button--loading']] = loading, _classnames[styles$1g['button--icon-only']] = isIconOnly, _classnames[styles$1g['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1g['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
+    type: type,
+    disabled: disabled || loading,
+    href: href,
+    ref: ref,
+    target: target,
+    "data-testid": testId,
+    position: positionProps,
+    dataProps: dataProps
+  }, React__default["default"].createElement(Inline, {
+    space: 8,
+    alignItems: "center"
+  }, children), loading && React__default["default"].createElement("div", {
+    className: styles$1g['button__spinner']
+  }, React__default["default"].createElement(Spinner, {
+    theme: contrastSpinner.includes(theme) ? SPINNER_THEMES.CONTRAST : SPINNER_THEMES.DISABLED
+  })));
   return (
     // The ref is passed here as the Tooltip component passes down a new ref to the Button component
     React__default["default"].createElement(Tooltip, {
       overlay: title,
       ref: ref
-    }, React__default["default"].createElement(ButtonElement, {
-      id: id,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      onKeyDown: onKeyDown,
-      className: classnames__default["default"](styles$1g['button'], (_classnames = {}, _classnames[styles$1g['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1g['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1g['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1g['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1g['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1g['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1g['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1g['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1g['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1g['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1g['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1g['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1g['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1g['button--loading']] = loading, _classnames[styles$1g['button--icon-only']] = isIconOnly, _classnames[styles$1g['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1g['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
-      type: type,
-      disabled: disabled || loading,
-      href: href,
-      ref: ref,
-      target: target,
-      "data-testid": testId,
-      position: positionProps,
-      dataProps: dataProps
-    }, React__default["default"].createElement(Inline, {
-      space: 8,
-      alignItems: "center"
-    }, children), loading && React__default["default"].createElement("div", {
-      className: styles$1g['button__spinner']
-    }, React__default["default"].createElement(Spinner, {
-      theme: contrastSpinner.includes(theme) ? SPINNER_THEMES.CONTRAST : SPINNER_THEMES.DISABLED
-    }))))
+    }, title && disabled ? React__default["default"].createElement("div", {
+      className: styles$1g['disabled-button-wrapper']
+    }, ButtonElementResult) : ButtonElementResult)
   );
 };
 var ButtonElement = React.forwardRef(function (_ref2, ref) {
@@ -6298,7 +6301,8 @@ var ToastContainer = function ToastContainer(_ref2) {
 
 var initialValue$1 = {
   // This is currently used to configure the phone number field
-  country: 'US'
+  country: 'US',
+  timeFormat: 'ampm'
 };
 var ProviderConfigContext = React.createContext(initialValue$1);
 var useProviderConfig = function useProviderConfig() {
@@ -6314,10 +6318,13 @@ var SousChefProvider = function SousChefProvider(_ref) {
     _ref$i18n = _ref.i18n,
     i18n = _ref$i18n === void 0 ? en : _ref$i18n,
     _ref$country = _ref.country,
-    country = _ref$country === void 0 ? 'US' : _ref$country;
+    country = _ref$country === void 0 ? 'US' : _ref$country,
+    _ref$timeFormat = _ref.timeFormat,
+    timeFormat = _ref$timeFormat === void 0 ? 'ampm' : _ref$timeFormat;
   return React__default["default"].createElement(ProviderConfigContext.Provider, {
     value: {
-      country: country
+      country: country,
+      timeFormat: timeFormat
     }
   }, React__default["default"].createElement(TranslationsContext.Provider, {
     value: {
@@ -7401,7 +7408,9 @@ var TimeFieldInput = function TimeFieldInput(_ref) {
   var inputProps = _ref.inputProps,
     allOtherProps = _ref.allOtherProps,
     prefix = _ref.prefix,
-    duration = _ref.duration;
+    duration = _ref.duration,
+    timeFormat = _ref.timeFormat;
+  var format = timeFormat === 'ampm' ? 'g:i A' : 'H:i';
   return React__default["default"].createElement(AffixContainer, {
     prefix: prefix ? prefix : React__default["default"].createElement(IconClock, {
       size: "medium",
@@ -7410,14 +7419,14 @@ var TimeFieldInput = function TimeFieldInput(_ref) {
     suffix: duration
   }, React__default["default"].createElement("input", _extends({}, inputProps, {
     onBlur: function onBlur(e) {
-      e.target.value = parseTime__default["default"](e.target.value, 'g:i A');
+      e.target.value = parseTime__default["default"](e.target.value, format);
       inputProps.onChange(e);
       inputProps.onBlur(e);
     },
     onKeyDown: function onKeyDown(e) {
       if ('key' in e && e.key !== 'Enter') return;
       if (!(e.target instanceof HTMLInputElement)) return;
-      e.target.value = parseTime__default["default"](e.target.value, 'g:i A');
+      e.target.value = parseTime__default["default"](e.target.value, format);
       inputProps.onChange(e);
       inputProps.onBlur(e);
       inputProps.onKeyDown(e);
@@ -7432,18 +7441,19 @@ var TimeFieldInput = function TimeFieldInput(_ref) {
   })));
 };
 
-var _excluded$l = ["placeholder", "autoComplete", "selectedTimeOption", "prefix", "startTime", "duration"];
+var _excluded$l = ["placeholder", "autoComplete", "selectedTimeOption", "prefix", "startTime", "duration", "timeFormat"];
 var TimeFieldDropdownElement = function TimeFieldDropdownElement(_ref, ref) {
-  var _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? '9:00 AM' : _ref$placeholder,
+  var placeholder = _ref.placeholder,
     _ref$autoComplete = _ref.autoComplete,
     autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
     selectedTimeOption = _ref.selectedTimeOption,
     prefix = _ref.prefix,
     duration = _ref.duration,
+    timeFormat = _ref.timeFormat,
     allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+  var defaultPlaceholder = timeFormat === 'ampm' ? '9:00 AM' : '09:00';
   var _useTextField = useTextField(_extends({}, allOtherProps, {
-      placeholder: placeholder,
+      placeholder: placeholder || defaultPlaceholder,
       autoComplete: autoComplete,
       ref: ref
     })),
@@ -7462,7 +7472,8 @@ var TimeFieldDropdownElement = function TimeFieldDropdownElement(_ref, ref) {
     inputProps: inputProps,
     allOtherProps: allOtherProps,
     prefix: prefix,
-    duration: duration
+    duration: duration,
+    timeFormat: timeFormat
   }));
 };
 var TimeFieldDropdownTrigger = React.forwardRef(TimeFieldDropdownElement);
@@ -12366,7 +12377,7 @@ var WeekField = function WeekField(_ref) {
   }));
 };
 
-var getTimeOptions = function getTimeOptions(interval, startTime, skipStartTime) {
+var getTimeOptions = function getTimeOptions(interval, startTime, skipStartTime, timeFormat) {
   if (startTime === void 0) {
     startTime = setToMidnight(new Date());
   }
@@ -12381,10 +12392,15 @@ var getTimeOptions = function getTimeOptions(interval, startTime, skipStartTime)
   for (var i = skipFirstInterval ? 1 : 0; i < optionsCount; i++) {
     var newDate = new Date(rounded.getTime());
     newDate.setMinutes(rounded.getMinutes() + interval * i);
-    var hours = formatHours(newDate.getHours());
+    var hours = timeFormat === 'ampm' ? formatHours(newDate.getHours()) : newDate.getHours();
     var minutes = newDate.getMinutes();
-    var period = newDate.getHours() < 12 ? 'AM' : 'PM';
-    timeOptions.push(hours + ":" + (minutes === 0 ? '00' : minutes) + " " + period);
+    var timeString = hours.toString().padStart(2, '0') + ":" + (minutes === 0 ? '00' : minutes);
+    if (timeFormat === 'ampm') {
+      var period = newDate.getHours() < 12 ? 'AM' : 'PM';
+      timeOptions.push(timeString + " " + period);
+    } else {
+      timeOptions.push(timeString);
+    }
   }
   return timeOptions;
 };
@@ -12442,11 +12458,12 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
     _ref$endField = _ref.endField,
     endField = _ref$endField === void 0 ? false : _ref$endField,
     subtractDuration = _ref.subtractDuration,
-    calculateDuration = _ref.calculateDuration;
+    calculateDuration = _ref.calculateDuration,
+    timeFormat = _ref.timeFormat;
   var startTimeParsed = startTime ? getDateWithStartTime(startTime) : setToMidnight(new Date());
   var timeOptions = React.useMemo(function () {
-    return getTimeOptions(interval, startTimeParsed, endField && !!startTime);
-  }, [interval, startTime]);
+    return getTimeOptions(interval, startTimeParsed, endField && !!startTime, timeFormat);
+  }, [interval, startTime, timeFormat, endField, startTimeParsed]);
   var _useState = React.useState(undefined),
     index = _useState[0],
     setIndex = _useState[1];
@@ -12491,7 +12508,7 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
   })));
 };
 
-var _excluded$6 = ["interval", "startTime", "prefix", "endField", "duration", "subtractDuration", "calculateDuration"];
+var _excluded$6 = ["interval", "startTime", "prefix", "endField", "duration", "subtractDuration", "calculateDuration", "timeFormat"];
 var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
   var _ref$interval = _ref.interval,
     interval = _ref$interval === void 0 ? 15 : _ref$interval,
@@ -12502,7 +12519,10 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
     duration = _ref.duration,
     subtractDuration = _ref.subtractDuration,
     calculateDuration = _ref.calculateDuration,
+    timeFormat = _ref.timeFormat,
     allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  var _useProviderConfig = useProviderConfig(),
+    globalTimeFormat = _useProviderConfig.timeFormat;
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
   var _useState = React.useState(allOtherProps.value || allOtherProps.defaultValue),
@@ -12540,7 +12560,8 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
       },
       selectedTimeOption: selectedDropdownValue,
       prefix: prefix,
-      duration: duration
+      duration: duration,
+      timeFormat: timeFormat || globalTimeFormat
     })),
     startTime: startTime,
     onOptionClick: onOptionClick,
@@ -12548,7 +12569,8 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
     width: width,
     endField: endField,
     subtractDuration: subtractDuration,
-    calculateDuration: calculateDuration
+    calculateDuration: calculateDuration,
+    timeFormat: timeFormat || globalTimeFormat
   });
 };
 // exporting TimeField with all props for use in TimeRangeField
@@ -12566,19 +12588,20 @@ var TimeRangeEnd = function TimeRangeEnd(_ref) {
   var startTime = _ref.startTime,
     onChange = _ref.onChange,
     interval = _ref.interval,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? '2:00 PM' : _ref$placeholder,
+    placeholder = _ref.placeholder,
     duration = _ref.duration,
     disabled = _ref.disabled,
     testId = _ref.testId,
     value = _ref.value,
     subtractDuration = _ref.subtractDuration,
-    calculateDuration = _ref.calculateDuration;
+    calculateDuration = _ref.calculateDuration,
+    timeFormat = _ref.timeFormat;
+  var defaultPlaceholder = timeFormat === 'ampm' ? '2:00 PM' : '14:00';
   return React__default["default"].createElement(TimeRangeSelector, {
     name: "end-time",
     startTime: startTime,
     onChange: onChange,
-    placeholder: placeholder,
+    placeholder: placeholder || defaultPlaceholder,
     interval: interval,
     prefix: React__default["default"].createElement(IconArrowRight, {
       size: "medium",
@@ -12590,7 +12613,8 @@ var TimeRangeEnd = function TimeRangeEnd(_ref) {
     disabled: disabled,
     value: value,
     subtractDuration: subtractDuration,
-    calculateDuration: calculateDuration
+    calculateDuration: calculateDuration,
+    timeFormat: timeFormat
   });
 };
 
@@ -12598,22 +12622,24 @@ var TimeRangeStart = function TimeRangeStart(_ref) {
   var startTime = _ref.startTime,
     onChange = _ref.onChange,
     interval = _ref.interval,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? '9:00 AM' : _ref$placeholder,
+    placeholder = _ref.placeholder,
     id = _ref.id,
     disabled = _ref.disabled,
     testId = _ref.testId,
-    value = _ref.value;
+    value = _ref.value,
+    timeFormat = _ref.timeFormat;
+  var defaultPlaceholder = timeFormat === 'ampm' ? '9:00 AM' : '09:00';
   return React__default["default"].createElement(TimeRangeSelector, {
     name: "start-time",
     startTime: startTime,
     onChange: onChange,
-    placeholder: placeholder,
+    placeholder: placeholder || defaultPlaceholder,
     interval: interval,
     testId: testId && testId + "-start-time",
     id: id,
     disabled: disabled,
-    value: value
+    value: value,
+    timeFormat: timeFormat
   });
 };
 
@@ -12634,7 +12660,11 @@ var TimeRangeField = function TimeRangeField(_ref) {
     disabled = _ref.disabled,
     testId = _ref.testId,
     subtractDuration = _ref.subtractDuration,
-    calculateDuration = _ref.calculateDuration;
+    calculateDuration = _ref.calculateDuration,
+    _ref$timeFormat = _ref.timeFormat,
+    timeFormat = _ref$timeFormat === void 0 ? '24h' : _ref$timeFormat;
+  var _useProviderConfig = useProviderConfig(),
+    globalTimeFormat = _useProviderConfig.timeFormat;
   var controllers = useRangeFieldControllers({
     name: name,
     id: inputId,
@@ -12683,7 +12713,8 @@ var TimeRangeField = function TimeRangeField(_ref) {
     testId: testId,
     id: controllers.id,
     disabled: disabled,
-    value: controllers.value.start
+    value: controllers.value.start,
+    timeFormat: timeFormat || globalTimeFormat
   }), React__default["default"].createElement(TimeRangeEnd, {
     startTime: start,
     interval: interval,
@@ -12696,7 +12727,8 @@ var TimeRangeField = function TimeRangeField(_ref) {
     disabled: disabled,
     value: controllers.value.end,
     subtractDuration: subtractDuration,
-    calculateDuration: calculateDuration
+    calculateDuration: calculateDuration,
+    timeFormat: timeFormat || globalTimeFormat
   })));
 };