@7shifts/sous-chef 3.46.0-beta.0 → 3.47.0

package/dist/forms/SelectField/SelectField.d.ts

@@ -25,8 +25,6 @@ export type Props<T> = {
     placeholder?: string;
     /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
     prefix?: React.ReactNode;
-    /** Use a suffix for things like (“%”, “Jr.”, “.00”) or icons. */
-    suffix?: React.ReactNode;
     value?: SelectOption<T>;
     defaultValue?: SelectOption<T>;
     CustomOption?: React.ElementType;

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

@@ -15,9 +15,6 @@ type Props = {
     placeholder?: string;
     disabled?: boolean;
     testId?: string;
-    /** Use this function to override the method to calculate durations. Make sure to format the string
-     * correctly based on duration. Example https://github.com/7shifts/sous-chef/blob/current/src/forms/TimeField/domain.ts#L37 */
-    calculateDuration?: (start: string, end: string) => string | undefined;
 };
-declare const TimeRangeField: ({ name, id: inputId, value, interval, startTime, onChange, onBlur, label, caption, error, placeholder, disabled, testId, calculateDuration }: Props) => React.JSX.Element;
+declare const TimeRangeField: ({ name, id: inputId, value, interval, startTime, onChange, onBlur, label, caption, error, placeholder, disabled, testId }: Props) => React.JSX.Element;
 export default TimeRangeField;

package/dist/index.css

@@ -1408,7 +1408,7 @@ Just for future references:
   bottom: 0;
   margin-top: auto;
   margin-bottom: auto;
-  right: 22px;
+  right: 0;
   text-align: right;
 }
 ._1Zl92 svg,

package/dist/index.js

@@ -7153,7 +7153,7 @@ var ALIGNMENTS = {
 var styles$p = {"text":"_32amZ","text__body":"_ayJRy","text__caption":"_3g1gi","text__insight":"_20Phg","text--bold":"_A0AyZ","text--italic":"_3jayQ","text--underline":"_GOcFw","text--monospace":"_3TfGK","text--align-left":"_b8gto","text--align-right":"_ecyH1","text--align-center":"_xBgXc","text--align-justify":"_280D5"};
 
 var _excluded$2v = ["children", "as", "emphasis", "alignment", "color", "testId", "textWrap"];
-var Text = function Text(_ref) {
+var TextComponent = function TextComponent(_ref, ref) {
   var _classnames;
   var children = _ref.children,
     _ref$as = _ref.as,
@@ -7163,20 +7163,27 @@ var Text = function Text(_ref) {
     color = _ref.color,
     testId = _ref.testId,
     textWrap = _ref.textWrap,
-    positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2v);
-  var positionStyles = usePositionStyles(positionProps);
-  var elementProps = {
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2v);
+  var _getPositionProps = getPositionProps(rest),
+    positionProps = _getPositionProps.positionProps,
+    otherProps = _getPositionProps.otherProps;
+  var _getDataProps = getDataProps(otherProps),
+    dataProps = _getDataProps.dataProps;
+  var elementProps = _extends({
     style: _extends({
       color: getColor(color),
       textWrap: textWrap
-    }, positionStyles),
+    }, positionProps),
     className: classnames(styles$p['text'], (_classnames = {}, _classnames[styles$p['text--bold']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$p['text--italic']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$p['text--underline']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$p['text--monospace']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$p['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$p['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$p['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$p['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$p['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$p['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$p['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
     'data-testid': testId
-  };
+  }, dataProps, {
+    ref: ref
+  });
   var pTypes = [TEXT_TYPES.BODY, TEXT_TYPES.CAPTION, TEXT_TYPES.INSIGHT];
   var element = pTypes.includes(as) ? 'p' : as;
   return React__default.createElement(element, elementProps, children);
 };
+var Text = React.forwardRef(TextComponent);
 
 var Bold = function Bold(_ref) {
   var children = _ref.children;
@@ -9634,8 +9641,7 @@ var SelectField$1 = function SelectField(props) {
     fieldProps = _useSelectField.fieldProps,
     selectProps = _useSelectField.selectProps;
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement(AffixContainer, {
-    prefix: props.prefix,
-    suffix: props.suffix
+    prefix: props.prefix
   }, React__default.createElement(Select__default, _extends({}, selectProps))));
 };
 
@@ -11707,8 +11713,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
     error = _ref.error,
     placeholder = _ref.placeholder,
     disabled = _ref.disabled,
-    testId = _ref.testId,
-    calculateDuration = _ref.calculateDuration;
+    testId = _ref.testId;
   var controllers = useRangeFieldControllers({
     name: name,
     id: inputId,
@@ -11740,7 +11745,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
       end: inputValue === '' ? undefined : inputValue
     });
   };
-  var timeRangeDuration = calculateDuration ? calculateDuration(start, end) : getDuration(end, start);
+  var timeRangeDuration = getDuration(end, start);
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
     className: classnames(styles$18['time-range-field'], (_classnames = {}, _classnames[styles$18['time-range-field--invalid']] = hasError, _classnames[styles$18['time-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId