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

package/dist/index.modern.js

@@ -767,7 +767,7 @@ const TooltipElement = ({
 };
 const Tooltip = 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"};
 
 const BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -854,54 +854,57 @@ const ButtonComponent = (_ref, ref) => {
   const contrastSpinner = [BUTTON_THEMES.PRIMARY, BUTTON_THEMES.DANGER, BUTTON_THEMES.UPSELL, BUTTON_THEMES.MARKETING, BUTTON_THEMES.LINK_CONTRAST];
   const childrenArr = Children.toArray(children);
   const isIconOnly = childrenArr.length === 1 && typeof childrenArr[0] != 'string';
+  const ButtonElementResult = React__default.createElement(ButtonElement, {
+    id: id,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    className: classnames(styles$1g['button'], {
+      [styles$1g['button--default']]: theme === BUTTON_THEMES.DEFAULT,
+      [styles$1g['button--primary']]: theme === BUTTON_THEMES.PRIMARY,
+      [styles$1g['button--danger']]: theme === BUTTON_THEMES.DANGER,
+      [styles$1g['button--upsell']]: theme === BUTTON_THEMES.UPSELL,
+      [styles$1g['button--marketing']]: theme === BUTTON_THEMES.MARKETING,
+      [styles$1g['button--hollow']]: theme === BUTTON_THEMES.HOLLOW,
+      [styles$1g['button--hollow-contrast']]: theme === BUTTON_THEMES.HOLLOW_CONTRAST,
+      [styles$1g['button--link-primary']]: theme === BUTTON_THEMES.LINK_PRIMARY,
+      [styles$1g['button--link-danger']]: theme === BUTTON_THEMES.LINK_DANGER,
+      [styles$1g['button--link-upsell']]: theme === BUTTON_THEMES.LINK_UPSELL,
+      [styles$1g['button--link-toolbar']]: theme === BUTTON_THEMES.LINK_TOOLBAR,
+      [styles$1g['button--link-contrast']]: theme === BUTTON_THEMES.LINK_CONTRAST,
+      [styles$1g['button--link-icon']]: theme === BUTTON_THEMES.LINK_ICON,
+      [styles$1g['button--loading']]: loading,
+      [styles$1g['button--icon-only']]: isIconOnly,
+      [styles$1g['button--size-min-width-100']]: size === BUTTON_SIZES.MIN_WIDTH_100,
+      [styles$1g['button--size-full-width']]: size === BUTTON_SIZES.FULL_WIDTH
+    }),
+    type: type,
+    disabled: disabled || loading,
+    href: href,
+    ref: ref,
+    target: target,
+    "data-testid": testId,
+    position: positionProps,
+    dataProps: dataProps
+  }, React__default.createElement(Inline, {
+    space: 8,
+    alignItems: "center"
+  }, children), loading && React__default.createElement("div", {
+    className: styles$1g['button__spinner']
+  }, React__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.createElement(Tooltip, {
       overlay: title,
       ref: ref
-    }, React__default.createElement(ButtonElement, {
-      id: id,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      onKeyDown: onKeyDown,
-      className: classnames(styles$1g['button'], {
-        [styles$1g['button--default']]: theme === BUTTON_THEMES.DEFAULT,
-        [styles$1g['button--primary']]: theme === BUTTON_THEMES.PRIMARY,
-        [styles$1g['button--danger']]: theme === BUTTON_THEMES.DANGER,
-        [styles$1g['button--upsell']]: theme === BUTTON_THEMES.UPSELL,
-        [styles$1g['button--marketing']]: theme === BUTTON_THEMES.MARKETING,
-        [styles$1g['button--hollow']]: theme === BUTTON_THEMES.HOLLOW,
-        [styles$1g['button--hollow-contrast']]: theme === BUTTON_THEMES.HOLLOW_CONTRAST,
-        [styles$1g['button--link-primary']]: theme === BUTTON_THEMES.LINK_PRIMARY,
-        [styles$1g['button--link-danger']]: theme === BUTTON_THEMES.LINK_DANGER,
-        [styles$1g['button--link-upsell']]: theme === BUTTON_THEMES.LINK_UPSELL,
-        [styles$1g['button--link-toolbar']]: theme === BUTTON_THEMES.LINK_TOOLBAR,
-        [styles$1g['button--link-contrast']]: theme === BUTTON_THEMES.LINK_CONTRAST,
-        [styles$1g['button--link-icon']]: theme === BUTTON_THEMES.LINK_ICON,
-        [styles$1g['button--loading']]: loading,
-        [styles$1g['button--icon-only']]: isIconOnly,
-        [styles$1g['button--size-min-width-100']]: size === BUTTON_SIZES.MIN_WIDTH_100,
-        [styles$1g['button--size-full-width']]: size === BUTTON_SIZES.FULL_WIDTH
-      }),
-      type: type,
-      disabled: disabled || loading,
-      href: href,
-      ref: ref,
-      target: target,
-      "data-testid": testId,
-      position: positionProps,
-      dataProps: dataProps
-    }, React__default.createElement(Inline, {
-      space: 8,
-      alignItems: "center"
-    }, children), loading && React__default.createElement("div", {
-      className: styles$1g['button__spinner']
-    }, React__default.createElement(Spinner, {
-      theme: contrastSpinner.includes(theme) ? SPINNER_THEMES.CONTRAST : SPINNER_THEMES.DISABLED
-    }))))
+    }, title && disabled ? React__default.createElement("div", {
+      className: styles$1g['disabled-button-wrapper']
+    }, ButtonElementResult) : ButtonElementResult)
   );
 };
 const ButtonElement = forwardRef((_ref2, ref) => {
@@ -6440,7 +6443,8 @@ const ToastContainer = ({
 
 const initialValue$1 = {
   // This is currently used to configure the phone number field
-  country: 'US'
+  country: 'US',
+  timeFormat: 'ampm'
 };
 const ProviderConfigContext = createContext(initialValue$1);
 const useProviderConfig = () => {
@@ -6454,11 +6458,13 @@ const useProviderConfig = () => {
 const SousChefProvider = ({
   children,
   i18n: _i18n = en,
-  country: _country = 'US'
+  country: _country = 'US',
+  timeFormat: _timeFormat = 'ampm'
 }) => {
   return React__default.createElement(ProviderConfigContext.Provider, {
     value: {
-      country: _country
+      country: _country,
+      timeFormat: _timeFormat
     }
   }, React__default.createElement(TranslationsContext.Provider, {
     value: {
@@ -7560,8 +7566,10 @@ const TimeFieldInput = ({
   inputProps,
   allOtherProps,
   prefix,
-  duration
+  duration,
+  timeFormat
 }) => {
+  const format = timeFormat === 'ampm' ? 'g:i A' : 'H:i';
   return React__default.createElement(AffixContainer, {
     prefix: prefix ? prefix : React__default.createElement(IconClock, {
       size: "medium",
@@ -7570,14 +7578,14 @@ const TimeFieldInput = ({
     suffix: duration
   }, React__default.createElement("input", _extends({}, inputProps, {
     onBlur: e => {
-      e.target.value = parseTime(e.target.value, 'g:i A');
+      e.target.value = parseTime(e.target.value, format);
       inputProps.onChange(e);
       inputProps.onBlur(e);
     },
     onKeyDown: e => {
       if ('key' in e && e.key !== 'Enter') return;
       if (!(e.target instanceof HTMLInputElement)) return;
-      e.target.value = parseTime(e.target.value, 'g:i A');
+      e.target.value = parseTime(e.target.value, format);
       inputProps.onChange(e);
       inputProps.onBlur(e);
       inputProps.onKeyDown(e);
@@ -7592,21 +7600,23 @@ const TimeFieldInput = ({
   })));
 };
 
-const _excluded$l = ["placeholder", "autoComplete", "selectedTimeOption", "prefix", "startTime", "duration"];
+const _excluded$l = ["placeholder", "autoComplete", "selectedTimeOption", "prefix", "startTime", "duration", "timeFormat"];
 const TimeFieldDropdownElement = (_ref, ref) => {
   let {
-      placeholder = '9:00 AM',
+      placeholder,
       autoComplete = 'off',
       selectedTimeOption,
       prefix,
-      duration
+      duration,
+      timeFormat
     } = _ref,
     allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+  const defaultPlaceholder = timeFormat === 'ampm' ? '9:00 AM' : '09:00';
   const {
     inputProps,
     fieldProps
   } = useTextField(_extends({}, allOtherProps, {
-    placeholder,
+    placeholder: placeholder || defaultPlaceholder,
     autoComplete,
     ref
   }));
@@ -7623,7 +7633,8 @@ const TimeFieldDropdownElement = (_ref, ref) => {
     inputProps: inputProps,
     allOtherProps: allOtherProps,
     prefix: prefix,
-    duration: duration
+    duration: duration,
+    timeFormat: timeFormat
   }));
 };
 const TimeFieldDropdownTrigger = forwardRef(TimeFieldDropdownElement);
@@ -12457,7 +12468,7 @@ const WeekField = ({
   }));
 };
 
-const getTimeOptions = (interval, startTime = setToMidnight(new Date()), skipStartTime = false) => {
+const getTimeOptions = (interval, startTime = setToMidnight(new Date()), skipStartTime = false, timeFormat) => {
   const intervalCoeffecient = 1000 * 60 * interval;
   const optionsCount = 60 * 24 / interval;
   const timeOptions = [];
@@ -12466,10 +12477,15 @@ const getTimeOptions = (interval, startTime = setToMidnight(new Date()), skipSta
   for (let i = skipFirstInterval ? 1 : 0; i < optionsCount; i++) {
     const newDate = new Date(rounded.getTime());
     newDate.setMinutes(rounded.getMinutes() + interval * i);
-    const hours = formatHours(newDate.getHours());
+    const hours = timeFormat === 'ampm' ? formatHours(newDate.getHours()) : newDate.getHours();
     const minutes = newDate.getMinutes();
-    const period = newDate.getHours() < 12 ? 'AM' : 'PM';
-    timeOptions.push(`${hours}:${minutes === 0 ? '00' : minutes} ${period}`);
+    const timeString = `${hours.toString().padStart(2, '0')}:${minutes === 0 ? '00' : minutes}`;
+    if (timeFormat === 'ampm') {
+      const period = newDate.getHours() < 12 ? 'AM' : 'PM';
+      timeOptions.push(`${timeString} ${period}`);
+    } else {
+      timeOptions.push(timeString);
+    }
   }
   return timeOptions;
 };
@@ -12521,10 +12537,11 @@ const TimeFieldDropdown = ({
   width,
   endField: _endField = false,
   subtractDuration,
-  calculateDuration
+  calculateDuration,
+  timeFormat
 }) => {
   const startTimeParsed = startTime ? getDateWithStartTime(startTime) : setToMidnight(new Date());
-  const timeOptions = useMemo(() => getTimeOptions(interval, startTimeParsed, _endField && !!startTime), [interval, startTime]);
+  const timeOptions = useMemo(() => getTimeOptions(interval, startTimeParsed, _endField && !!startTime, timeFormat), [interval, startTime, timeFormat, _endField, startTimeParsed]);
   const [index, setIndex] = useState(undefined);
   useEffect(() => {
     if (inputValue) {
@@ -12565,7 +12582,7 @@ const TimeFieldDropdown = ({
   })));
 };
 
-const _excluded$6 = ["interval", "startTime", "prefix", "endField", "duration", "subtractDuration", "calculateDuration"];
+const _excluded$6 = ["interval", "startTime", "prefix", "endField", "duration", "subtractDuration", "calculateDuration", "timeFormat"];
 const TimeFieldElement = (_ref, forwardedRef) => {
   let {
       interval = 15,
@@ -12574,9 +12591,13 @@ const TimeFieldElement = (_ref, forwardedRef) => {
       endField = false,
       duration,
       subtractDuration,
-      calculateDuration
+      calculateDuration,
+      timeFormat
     } = _ref,
     allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  const {
+    timeFormat: globalTimeFormat
+  } = useProviderConfig();
   const internalRef = useRef(null);
   const ref = forwardedRef || internalRef;
   const [selectedDropdownValue, setSelectedDropdownValue] = useState(allOtherProps.value || allOtherProps.defaultValue);
@@ -12606,7 +12627,8 @@ const TimeFieldElement = (_ref, forwardedRef) => {
       onInputChange: e => setSelectedDropdownValue(e),
       selectedTimeOption: selectedDropdownValue,
       prefix: prefix,
-      duration: duration
+      duration: duration,
+      timeFormat: timeFormat || globalTimeFormat
     })),
     startTime: startTime,
     onOptionClick: onOptionClick,
@@ -12614,7 +12636,8 @@ const 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
@@ -12632,19 +12655,21 @@ const TimeRangeEnd = ({
   startTime,
   onChange,
   interval,
-  placeholder: _placeholder = '2:00 PM',
+  placeholder,
   duration,
   disabled,
   testId,
   value,
   subtractDuration,
-  calculateDuration
+  calculateDuration,
+  timeFormat
 }) => {
+  const defaultPlaceholder = timeFormat === 'ampm' ? '2:00 PM' : '14:00';
   return React__default.createElement(TimeRangeSelector, {
     name: "end-time",
     startTime: startTime,
     onChange: onChange,
-    placeholder: _placeholder,
+    placeholder: placeholder || defaultPlaceholder,
     interval: interval,
     prefix: React__default.createElement(IconArrowRight, {
       size: "medium",
@@ -12656,7 +12681,8 @@ const TimeRangeEnd = ({
     disabled: disabled,
     value: value,
     subtractDuration: subtractDuration,
-    calculateDuration: calculateDuration
+    calculateDuration: calculateDuration,
+    timeFormat: timeFormat
   });
 };
 
@@ -12664,22 +12690,25 @@ const TimeRangeStart = ({
   startTime,
   onChange,
   interval,
-  placeholder: _placeholder = '9:00 AM',
+  placeholder,
   id,
   disabled,
   testId,
-  value
+  value,
+  timeFormat
 }) => {
+  const defaultPlaceholder = timeFormat === 'ampm' ? '9:00 AM' : '09:00';
   return React__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
   });
 };
 
@@ -12698,8 +12727,12 @@ const TimeRangeField = ({
   disabled,
   testId,
   subtractDuration,
-  calculateDuration
+  calculateDuration,
+  timeFormat: _timeFormat = '24h'
 }) => {
+  const {
+    timeFormat: globalTimeFormat
+  } = useProviderConfig();
   const controllers = useRangeFieldControllers({
     name,
     id: inputId,
@@ -12750,7 +12783,8 @@ const TimeRangeField = ({
     testId: testId,
     id: controllers.id,
     disabled: disabled,
-    value: controllers.value.start
+    value: controllers.value.start,
+    timeFormat: _timeFormat || globalTimeFormat
   }), React__default.createElement(TimeRangeEnd, {
     startTime: start,
     interval: _interval,
@@ -12761,7 +12795,8 @@ const TimeRangeField = ({
     disabled: disabled,
     value: controllers.value.end,
     subtractDuration: subtractDuration,
-    calculateDuration: calculateDuration
+    calculateDuration: calculateDuration,
+    timeFormat: _timeFormat || globalTimeFormat
   })));
 };