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

package/dist/feedback/InlineBanner/InlineBanner.d.ts

@@ -6,7 +6,7 @@ type Props = {
     theme?: InlineBannerTheme;
     title?: string;
     onClose?: () => void;
-    caption?: string;
+    caption?: React.ReactNode;
     primaryButton?: React.ReactElement;
     secondaryButton?: React.ReactElement;
     testId?: string;

package/dist/feedback/InlineBanner/InlineBannerCTA/InlineBannerCTA.d.ts

@@ -3,7 +3,7 @@ import { InlineBannerTheme } from '../types';
 type Props = {
     primaryButton: React.ReactElement;
     secondaryButton?: React.ReactElement;
-    caption?: string;
+    caption?: React.ReactNode;
     multiLine: boolean;
     bannerTheme: InlineBannerTheme;
 };

package/dist/forms/TimeField/TimeField.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Props as TextFieldProps } from '../TextField/TextField';
-import { StartTime, TimeInterval } from '../../utils/date';
+import { StartTime, TimeInterval, TimeRange } from '../../utils/date';
 type Props = TextFieldProps & {
     onClick?: () => void;
     interval?: TimeInterval;
@@ -9,6 +9,7 @@ type Props = TextFieldProps & {
     endField?: boolean;
     duration?: string;
     subtractDuration?: number;
+    calculateDuration?: (e: TimeRange) => string;
 };
 export declare const TimeRangeSelector: React.ForwardRefExoticComponent<{
     autoComplete?: ("on" | "off") | undefined;
@@ -38,11 +39,12 @@ export declare const TimeRangeSelector: React.ForwardRefExoticComponent<{
     endField?: boolean | undefined;
     duration?: string | undefined;
     subtractDuration?: number | undefined;
+    calculateDuration?: ((e: TimeRange) => string) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 /**
  * `TimeField` are like `TextField` but it auto-format the value when the user leaves the field.
  *
  * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
  */
-declare const TimeField: React.ForwardRefExoticComponent<Omit<Props, "prefix" | "suffix" | "subtractDuration"> & React.RefAttributes<HTMLInputElement>>;
+declare const TimeField: React.ForwardRefExoticComponent<Omit<Props, "prefix" | "suffix" | "subtractDuration" | "calculateDuration"> & React.RefAttributes<HTMLInputElement>>;
 export default TimeField;

package/dist/forms/TimeField/TimeFieldDropdown/TimeFieldDropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StartTime, TimeInterval } from '../../../utils/date';
+import { StartTime, TimeInterval, TimeRange } from '../../../utils/date';
 type TimeFieldDropdownProps = {
     trigger: React.ReactElement;
     interval: TimeInterval;
@@ -9,6 +9,7 @@ type TimeFieldDropdownProps = {
     width?: number;
     endField: boolean;
     subtractDuration?: number;
+    calculateDuration?: (e: TimeRange) => string;
 };
-declare const TimeFieldDropdown: ({ trigger, interval, startTime, onOptionClick, inputValue, width, endField, subtractDuration }: TimeFieldDropdownProps) => React.JSX.Element;
+declare const TimeFieldDropdown: ({ trigger, interval, startTime, onOptionClick, inputValue, width, endField, subtractDuration, calculateDuration }: TimeFieldDropdownProps) => React.JSX.Element;
 export default TimeFieldDropdown;

package/dist/forms/TimeRangeField/TimeRangeEnd/TimeRangeEnd.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { TimeRangeInputProps } from '../types';
-declare const TimeRangeEnd: ({ startTime, onChange, interval, placeholder, duration, disabled, testId, value, subtractDuration }: TimeRangeInputProps & {
+import { TimeRange } from '../../../utils/date';
+declare const TimeRangeEnd: ({ startTime, onChange, interval, placeholder, duration, disabled, testId, value, subtractDuration, calculateDuration }: TimeRangeInputProps & {
     duration?: string | undefined;
     subtractDuration?: number | undefined;
+    calculateDuration?: ((e: TimeRange) => string) | undefined;
 }) => React.JSX.Element;
 export default TimeRangeEnd;

package/dist/forms/TimeRangeField/TimeRangeField.d.ts

@@ -17,6 +17,7 @@ type Props = {
     testId?: string;
     /** Subtract this time(in minutes) from total duration*/
     subtractDuration?: number;
+    calculateDuration?: (e: TimeRange) => string;
 };
-declare const TimeRangeField: ({ name, id: inputId, value, interval, startTime, onChange, onBlur, label, caption, error, placeholder, disabled, testId, subtractDuration }: Props) => React.JSX.Element;
+declare const TimeRangeField: ({ name, id: inputId, value, interval, startTime, onChange, onBlur, label, caption, error, placeholder, disabled, testId, subtractDuration, calculateDuration }: Props) => React.JSX.Element;
 export default TimeRangeField;

package/dist/index.css

@@ -2638,6 +2638,7 @@ input:disabled + ._2W10t::after {
   font-weight: var(--p-font-weight-normal);
   color: var(--color-grey-500);
   text-align: center;
+  white-space: pre-line;
 }
 ._3q5OJ {
   display: flex;

package/dist/index.js

@@ -829,7 +829,8 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
   var childrenArr = React.Children.toArray(children);
   var isIconOnly = childrenArr.length === 1 && typeof childrenArr[0] != 'string';
   return React__default.createElement(Tooltip, {
-    overlay: title
+    overlay: title,
+    ref: ref
   }, React__default.createElement(ButtonElement, {
     id: id,
     onClick: onClick,
@@ -7274,7 +7275,7 @@ var Italic = function Italic(_ref) {
   }, children);
 };
 
-var DropdownListItemComponent = function DropdownListItemComponent(_ref, ref) {
+var DropdownListItem = function DropdownListItem(_ref) {
   var _classNames;
   var onClick = _ref.onClick,
     prefix = _ref.prefix,
@@ -7344,11 +7345,9 @@ var DropdownListItemComponent = function DropdownListItemComponent(_ref, ref) {
     },
     onClick: handleClick,
     onKeyPress: handleClick,
-    "data-testid": testId,
-    ref: ref
+    "data-testid": testId
   }, href ? linkItem : childrenContainer);
 };
-var DropdownListItem = React.forwardRef(DropdownListItemComponent);
 
 var canInteractWithItem = function canInteractWithItem(child) {
   var itemType = getItemType(child);
@@ -11766,7 +11765,8 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
     width = _ref.width,
     _ref$endField = _ref.endField,
     endField = _ref$endField === void 0 ? false : _ref$endField,
-    subtractDuration = _ref.subtractDuration;
+    subtractDuration = _ref.subtractDuration,
+    calculateDuration = _ref.calculateDuration;
   var startTimeParsed = startTime ? getDateWithStartTime(startTime) : setToMidnight(new Date());
   var timeOptions = React.useMemo(function () {
     return getTimeOptions(interval, startTimeParsed, endField && !!startTime);
@@ -11790,6 +11790,20 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
   }, React__default.createElement(DropdownList, {
     highlightItemIndex: index
   }, timeOptions.map(function (option) {
+    var duration = function duration() {
+      if (endField && startTime) {
+        if (calculateDuration) {
+          return calculateDuration({
+            start: startTime,
+            end: option
+          });
+        } else {
+          return getDuration(option, startTime, subtractDuration);
+        }
+      } else {
+        return '';
+      }
+    };
     return React__default.createElement(DropdownListItem, {
       key: option,
       onClick: function onClick() {
@@ -11797,11 +11811,11 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
       }
     }, React__default.createElement(Inline, {
       space: 4
-    }, option, endField && startTime && getDuration(option, startTime, subtractDuration)));
+    }, option, duration()));
   })));
 };
 
-var _excluded$2K = ["interval", "startTime", "prefix", "endField", "duration", "subtractDuration"];
+var _excluded$2K = ["interval", "startTime", "prefix", "endField", "duration", "subtractDuration", "calculateDuration"];
 var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
   var _ref$interval = _ref.interval,
     interval = _ref$interval === void 0 ? 15 : _ref$interval,
@@ -11811,6 +11825,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
     endField = _ref$endField === void 0 ? false : _ref$endField,
     duration = _ref.duration,
     subtractDuration = _ref.subtractDuration,
+    calculateDuration = _ref.calculateDuration,
     allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2K);
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
@@ -11856,7 +11871,8 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
     inputValue: selectedDropdownValue,
     width: width,
     endField: endField,
-    subtractDuration: subtractDuration
+    subtractDuration: subtractDuration,
+    calculateDuration: calculateDuration
   });
 };
 var TimeRangeSelector = React.forwardRef(TimeFieldElement);
@@ -11874,7 +11890,8 @@ var TimeRangeEnd = function TimeRangeEnd(_ref) {
     disabled = _ref.disabled,
     testId = _ref.testId,
     value = _ref.value,
-    subtractDuration = _ref.subtractDuration;
+    subtractDuration = _ref.subtractDuration,
+    calculateDuration = _ref.calculateDuration;
   return React__default.createElement(TimeRangeSelector, {
     name: "end-time",
     startTime: startTime,
@@ -11890,7 +11907,8 @@ var TimeRangeEnd = function TimeRangeEnd(_ref) {
     testId: testId && testId + "-end-time",
     disabled: disabled,
     value: value,
-    subtractDuration: subtractDuration
+    subtractDuration: subtractDuration,
+    calculateDuration: calculateDuration
   });
 };
 
@@ -11933,7 +11951,8 @@ var TimeRangeField = function TimeRangeField(_ref) {
     placeholder = _ref.placeholder,
     disabled = _ref.disabled,
     testId = _ref.testId,
-    subtractDuration = _ref.subtractDuration;
+    subtractDuration = _ref.subtractDuration,
+    calculateDuration = _ref.calculateDuration;
   var controllers = useRangeFieldControllers({
     name: name,
     id: inputId,
@@ -11965,7 +11984,10 @@ var TimeRangeField = function TimeRangeField(_ref) {
       end: inputValue === '' ? undefined : inputValue
     });
   };
-  var timeRangeDuration = getDuration(end, start, subtractDuration);
+  var timeRangeDuration = calculateDuration ? calculateDuration({
+    start: start,
+    end: end
+  }) : getDuration(end, start, subtractDuration);
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
     className: classnames(styles$1a['time-range-field'], (_classnames = {}, _classnames[styles$1a['time-range-field--invalid']] = hasError, _classnames[styles$1a['time-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
@@ -11991,7 +12013,8 @@ var TimeRangeField = function TimeRangeField(_ref) {
     testId: testId,
     disabled: disabled,
     value: controllers.value.end,
-    subtractDuration: subtractDuration
+    subtractDuration: subtractDuration,
+    calculateDuration: calculateDuration
   })));
 };