@7shifts/sous-chef 3.5.0 → 3.6.0

package/dist/index.css

@@ -938,9 +938,21 @@ Just for future references:
 }
 ._2Ybjx {
   padding: 16px;
+  align-items: center;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
 }
 ._1cXj6 {
-  text-align: right;
+  width: 100%;
+  justify-content: flex-end;
+}
+._D73Vx {
+  border-color: var(--color-radish-400);
+  background: var(--color-radish-100);
+  color: var(--color-radish-400);
+  justify-content: space-between;
 }
 ._2puqJ {
   position: fixed;

package/dist/index.js

@@ -4710,136 +4710,7 @@ var DefaultItemComponent = function DefaultItemComponent(_ref2) {
   }));
 };
 
-var styles$c = {"data-table-cell":"_2Ybjx","data-table-cell--right-aligned":"_1cXj6"};
-
-var DataTableCell = function DataTableCell(_ref) {
-  var _columns$columnIndex, _classnames;
-
-  var children = _ref.children,
-      columnIndex = _ref.columnIndex;
-
-  var _useDataTableContext = useDataTableContext(),
-      columns = _useDataTableContext.columns;
-
-  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
-  var isRightAligned = column ? column.isRightAligned : false;
-  return React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$c['data-table-cell--right-aligned']] = isRightAligned, _classnames), styles$c['data-table-cell'])
-  }, children);
-};
-
-var Context$1 = React.createContext({});
-var useFormContext = function useFormContext() {
-  var context = React.useContext(Context$1);
-  return context || {};
-};
-
-var useFieldId = function useFieldId(_ref) {
-  var name = _ref.name,
-      inputId = _ref.id;
-  var id = React.useMemo(function () {
-    return inputId ? inputId : name + "-" + Math.random();
-  }, [inputId, name]);
-  return id;
-};
-
-var getFormikState = function getFormikState(name, formik) {
-  if (formik === undefined) {
-    return null;
-  }
-
-  var formikPath = getFormikArrayPath(name);
-
-  if (formikPath.length === 0) {
-    return null;
-  }
-
-  var formikLatestLevel = formikPath.reduce(function (acc, path) {
-    var _acc$touched, _acc$error, _acc$value;
-
-    return {
-      touched: (_acc$touched = acc.touched) === null || _acc$touched === void 0 ? void 0 : _acc$touched[path],
-      error: (_acc$error = acc.error) === null || _acc$error === void 0 ? void 0 : _acc$error[path],
-      value: (_acc$value = acc.value) === null || _acc$value === void 0 ? void 0 : _acc$value[path]
-    };
-  }, {
-    touched: formik.touched,
-    error: formik.errors,
-    value: formik.values
-  });
-  return {
-    error: formikLatestLevel.touched ? formikLatestLevel.error : undefined,
-    value: formikLatestLevel.value
-  };
-};
-var getFormikArrayPath = function getFormikArrayPath(name) {
-  return name.split(/[^a-zA-Z0-9]/).filter(Boolean);
-};
-
-var useFieldControllers = function useFieldControllers(_ref) {
-  var name = _ref.name,
-      inputId = _ref.id,
-      value = _ref.value,
-      _onChange = _ref.onChange,
-      _onBlur = _ref.onBlur,
-      _onFocus = _ref.onFocus,
-      _onKeyDown = _ref.onKeyDown,
-      error = _ref.error,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type;
-
-  var _useFormContext = useFormContext(),
-      formik = _useFormContext.formik;
-
-  var id = useFieldId({
-    name: name,
-    id: inputId
-  });
-  var controllers = {
-    id: id,
-    error: error,
-    value: value,
-    onChange: function onChange(e) {
-      return _onChange && _onChange(e.target.value);
-    },
-    onBlur: function onBlur(e) {
-      return _onBlur && _onBlur(e.target.value);
-    },
-    onFocus: function onFocus(e) {
-      return _onFocus && _onFocus(e.target.value);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown && _onKeyDown(e.key);
-    }
-  };
-  var formikState = getFormikState(name, formik);
-
-  if (formik && formikState) {
-    var currencyBlur = function currencyBlur() {
-      if (type === 'currency') {
-        formik.setFieldValue(name, Number(value).toFixed(2));
-      }
-    };
-
-    controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikState.error,
-      value: value !== undefined ? controllers.value : formikState.value,
-      onChange: _onChange ? controllers.onChange : function (e) {
-        return formik.setFieldValue(name, e.target.value);
-      },
-      onBlur: _onBlur ? function (e) {
-        _onBlur && _onBlur(e.target.value);
-        formik.setFieldTouched(name);
-        currencyBlur();
-      } : function () {
-        formik.setFieldTouched(name);
-        currencyBlur();
-      }
-    });
-  }
-
-  return controllers;
-};
+var styles$c = {"data-table-cell":"_2Ybjx","data-table-cell--right-aligned":"_1cXj6","data-table-cell--invalid":"_D73Vx"};
 
 var styles$d = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
 
@@ -5227,6 +5098,157 @@ var Calendar = function Calendar(_ref) {
   }))));
 };
 
+var DataTableCellElement = function DataTableCellElement(_ref) {
+  var _columns$columnIndex, _classnames;
+
+  var children = _ref.children,
+      columnIndex = _ref.columnIndex,
+      error = _ref.error,
+      _ref$delayOnCloseErro = _ref.delayOnCloseError,
+      delayOnCloseError = _ref$delayOnCloseErro === void 0 ? false : _ref$delayOnCloseErro;
+
+  var _useDataTableContext = useDataTableContext(),
+      columns = _useDataTableContext.columns;
+
+  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
+  var isRightAligned = column ? column.isRightAligned : false;
+  var hasError = !!error;
+  var errorMessage = error;
+  var icon = hasError && React__default.createElement(IconTimesOctagon, {
+    size: "medium",
+    color: RADISH400
+  });
+  var TableCell = React__default.createElement("div", {
+    className: classnames((_classnames = {}, _classnames[styles$c['data-table-cell--right-aligned']] = isRightAligned, _classnames[styles$c['data-table-cell--invalid']] = hasError, _classnames), styles$c['data-table-cell'])
+  }, isRightAligned && icon, children, !isRightAligned && icon);
+
+  if (hasError) {
+    return React__default.createElement(Tooltip$1, {
+      overlay: errorMessage,
+      delayOnClose: delayOnCloseError,
+      placement: "top",
+      theme: "white"
+    }, TableCell);
+  }
+
+  return TableCell;
+};
+
+var DataTableCell = React.forwardRef(DataTableCellElement);
+
+var Context$1 = React.createContext({});
+var useFormContext = function useFormContext() {
+  var context = React.useContext(Context$1);
+  return context || {};
+};
+
+var useFieldId = function useFieldId(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id;
+  var id = React.useMemo(function () {
+    return inputId ? inputId : name + "-" + Math.random();
+  }, [inputId, name]);
+  return id;
+};
+
+var getFormikState = function getFormikState(name, formik) {
+  if (formik === undefined) {
+    return null;
+  }
+
+  var formikPath = getFormikArrayPath(name);
+
+  if (formikPath.length === 0) {
+    return null;
+  }
+
+  var formikLatestLevel = formikPath.reduce(function (acc, path) {
+    var _acc$touched, _acc$error, _acc$value;
+
+    return {
+      touched: (_acc$touched = acc.touched) === null || _acc$touched === void 0 ? void 0 : _acc$touched[path],
+      error: (_acc$error = acc.error) === null || _acc$error === void 0 ? void 0 : _acc$error[path],
+      value: (_acc$value = acc.value) === null || _acc$value === void 0 ? void 0 : _acc$value[path]
+    };
+  }, {
+    touched: formik.touched,
+    error: formik.errors,
+    value: formik.values
+  });
+  return {
+    error: formikLatestLevel.touched ? formikLatestLevel.error : undefined,
+    value: formikLatestLevel.value
+  };
+};
+var getFormikArrayPath = function getFormikArrayPath(name) {
+  return name.split(/[^a-zA-Z0-9]/).filter(Boolean);
+};
+
+var useFieldControllers = function useFieldControllers(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      _onBlur = _ref.onBlur,
+      _onFocus = _ref.onFocus,
+      _onKeyDown = _ref.onKeyDown,
+      error = _ref.error,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type;
+
+  var _useFormContext = useFormContext(),
+      formik = _useFormContext.formik;
+
+  var id = useFieldId({
+    name: name,
+    id: inputId
+  });
+  var controllers = {
+    id: id,
+    error: error,
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange && _onChange(e.target.value);
+    },
+    onBlur: function onBlur(e) {
+      return _onBlur && _onBlur(e.target.value);
+    },
+    onFocus: function onFocus(e) {
+      return _onFocus && _onFocus(e.target.value);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown && _onKeyDown(e.key);
+    }
+  };
+  var formikState = getFormikState(name, formik);
+
+  if (formik && formikState) {
+    var currencyBlur = function currencyBlur() {
+      if (type === 'currency') {
+        formik.setFieldValue(name, Number(value).toFixed(2));
+      }
+    };
+
+    controllers = _extends({}, controllers, {
+      error: error !== undefined ? controllers.error : formikState.error,
+      value: value !== undefined ? controllers.value : formikState.value,
+      onChange: _onChange ? controllers.onChange : function (e) {
+        return formik.setFieldValue(name, e.target.value);
+      },
+      onBlur: _onBlur ? function (e) {
+        _onBlur && _onBlur(e.target.value);
+        formik.setFieldTouched(name);
+        currencyBlur();
+      } : function () {
+        formik.setFieldTouched(name);
+        currencyBlur();
+      }
+    });
+  }
+
+  return controllers;
+};
+
 var styles$j = {"label":"_h724f","label--truncate":"_1VUoF"};
 
 var isEllipsisActive = function isEllipsisActive(e) {