@7shifts/sous-chef 3.6.0 → 3.7.0

package/dist/index.js

@@ -4502,7 +4502,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
     "data-testid": testId && testId + "-row",
     role: "row",
     ref: ref
-  }), React__default.Children.map(children, function (child, index) {
+  }), React__default.Children.toArray(children).filter(Boolean).map(function (child, index) {
     return renderColumn(child, index);
   }), showActionMenu && React__default.createElement(ActionsCell, {
     actions: actions
@@ -4517,6 +4517,7 @@ var WHITE = '#ffffff';
 var EGGPLANT200 = '#d3dbf4';
 var EGGPLANT300 = '#a7b7ea';
 var EGGPLANT400 = '#6d87dd';
+var EGGPLANT500 = '#6179c6';
 var EGGPLANT600 = '#415184';
 var RADISH400 = '#e76767';
 var GREY100 = '#F3F3F3';
@@ -4838,6 +4839,18 @@ var ModalBody = function ModalBody(_ref) {
 
 var styles$g = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
+var updateButtonProps = function updateButtonProps(button, newProps) {
+  if (!button) {
+    return null;
+  }
+
+  if (button.type !== Button$1) {
+    return button;
+  }
+
+  return React__default.cloneElement(button, _extends({}, newProps));
+};
+
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
       actions = _ref.actions,
@@ -4847,13 +4860,16 @@ var ModalFooter = function ModalFooter(_ref) {
     var _actions$primary, _actions$secondary, _actions$tertiary, _classnames;
 
     var primaryButton = updateButtonProps(actions.primary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$primary = actions.primary) === null || _actions$primary === void 0 ? void 0 : _actions$primary.props.theme) || 'primary'
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$primary = actions.primary) === null || _actions$primary === void 0 ? void 0 : _actions$primary.props.theme) || 'primary',
+      size: BUTTON_SIZES.MIN_WIDTH_100
     });
     var secondaryButton = updateButtonProps(actions.secondary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || 'default'
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || 'default',
+      size: BUTTON_SIZES.MIN_WIDTH_100
     });
     var tertiaryButton = updateButtonProps(actions.tertiary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$tertiary = actions.tertiary) === null || _actions$tertiary === void 0 ? void 0 : _actions$tertiary.props.theme) || 'link-primary'
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$tertiary = actions.tertiary) === null || _actions$tertiary === void 0 ? void 0 : _actions$tertiary.props.theme) || 'link-primary',
+      size: BUTTON_SIZES.MIN_WIDTH_100
     });
     return React__default.createElement(FooterContainer, {
       testId: testId
@@ -4869,20 +4885,6 @@ var ModalFooter = function ModalFooter(_ref) {
   return React__default.createElement(FooterContainer, null, children);
 };
 
-var updateButtonProps = function updateButtonProps(button, newProps) {
-  if (!button) {
-    return null;
-  }
-
-  if (button.type !== Button$1) {
-    return button;
-  }
-
-  return React__default.cloneElement(button, _extends({
-    size: BUTTON_SIZES.MIN_WIDTH_100
-  }, newProps));
-};
-
 var FooterContainer = function FooterContainer(_ref2) {
   var children = _ref2.children,
       testId = _ref2.testId;
@@ -8450,11 +8452,13 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = React.forwardRef(TimeFieldElement);
 
-var _excluded$2p = ["currencySymbol"];
+var _excluded$2p = ["currencySymbol", "step"];
 
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
   var _ref$currencySymbol = _ref.currencySymbol,
-      currencySymbol = _ref$currencySymbol === void 0 ? "$" : _ref$currencySymbol,
+      currencySymbol = _ref$currencySymbol === void 0 ? '$' : _ref$currencySymbol,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 0.01 : _ref$step,
       allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2p);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
@@ -8463,15 +8467,18 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
       inputProps = _useTextField.inputProps,
       fieldProps = _useTextField.fieldProps;
 
+  var isWholeNumber = Number.isInteger(step);
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: currencySymbol
   }, React__default.createElement("input", Object.assign({}, inputProps, {
-    type: 'number',
-    inputMode: 'decimal',
-    step: '0.01',
+    type: "number",
+    inputMode: "decimal",
+    step: step,
     min: 0,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === 'e' || e.key === '-') {
+      var isAddingDecimalsOnWholeNumber = isWholeNumber && (e.key === '.' || e.key === ',');
+
+      if (e.key === 'e' || e.key === '-' || isAddingDecimalsOnWholeNumber) {
         e.preventDefault();
         return;
       }
@@ -8479,7 +8486,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
       inputProps.onKeyDown(e);
     },
     onBlur: function onBlur(e) {
-      e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(2);
+      e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(isWholeNumber ? 0 : 2);
       inputProps.onChange(e);
       inputProps.onBlur(e);
     }
@@ -9126,6 +9133,183 @@ var Italic = function Italic(_ref) {
   }, children);
 };
 
+var EMPTY_STATE_SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+
+var styles$X = {"empty-state-container-stack":"_2B8Vd","empty-state-container-stack__content":"_NBTDp","empty-state-container-stack__content--full-page":"_1UWbP","empty-state-container-stack__content--inline-horizontal":"_2BVOy","empty-state-container-stack__body":"_1LuiZ"};
+
+var styles$Y = {"empty-state-container-cta":"_1Cx9N"};
+
+var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
+  var _actions$primary, _actions$secondary;
+
+  var isPaywall = _ref.isPaywall,
+      actions = _ref.actions;
+  var primaryButton = updateButtonProps(actions.primary, {
+    theme: actions !== null && actions !== void 0 && (_actions$primary = actions.primary) !== null && _actions$primary !== void 0 && _actions$primary.props.theme || isPaywall ? 'upsell' : 'primary',
+    size: BUTTON_SIZES.MIN_WIDTH_100
+  });
+  var secondaryButton = updateButtonProps(actions.secondary, {
+    theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || 'default',
+    size: BUTTON_SIZES.MIN_WIDTH_100
+  });
+  return React__default.createElement("div", {
+    className: styles$Y['empty-state-container-cta']
+  }, primaryButton, secondaryButton);
+};
+
+var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      caption = _ref.caption,
+      _ref$isPaywall = _ref.isPaywall,
+      isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: styles$X['empty-state-container-stack'],
+    "data-testid": testId
+  }, React__default.createElement("img", {
+    src: mediaUrl,
+    alt: String(title),
+    width: "200px"
+  }), React__default.createElement(Stack, {
+    space: 8,
+    alignItems: "center"
+  }, header && React__default.createElement(Text, {
+    as: "h4",
+    color: isPaywall && EGGPLANT500
+  }, header), React__default.createElement(Text, {
+    emphasis: "bold",
+    as: "body"
+  }, title), React__default.createElement("div", {
+    className: styles$X['empty-state-container-stack__body']
+  }, children)), React__default.createElement(Stack, {
+    space: 8,
+    alignItems: "center"
+  }, actions && React__default.createElement(EmptyStateContainerCTA, {
+    actions: actions,
+    isPaywall: isPaywall
+  }), caption && React__default.createElement(Text, {
+    as: "caption"
+  }, caption)));
+};
+
+var styles$Z = {"empty-state-container-inline":"_eMr1V","empty-state-container-inline__content":"_2jreb","empty-state-container-inline__content--full-page":"_3RLfH","empty-state-container-inline__content--inline-horizontal":"_3BMpx","empty-state-container-inline__body":"_2J5vn"};
+
+var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
+  var _classnames;
+
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? EMPTY_STATE_SIZE.LARGE : _ref$size,
+      caption = _ref.caption,
+      _ref$isPaywall = _ref.isPaywall,
+      isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: styles$Z['empty-state-container-inline'],
+    "data-testid": testId
+  }, React__default.createElement("div", {
+    className: classnames(styles$Z['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$Z['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$Z['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
+  }, React__default.createElement(Stack, {
+    space: 8
+  }, header && React__default.createElement(Text, {
+    as: "h4",
+    color: isPaywall && EGGPLANT500
+  }, header), React__default.createElement(Text, {
+    as: "h1"
+  }, title)), React__default.createElement("div", {
+    className: styles$Z['empty-state-container-inline__body']
+  }, children), React__default.createElement(Stack, {
+    space: 8
+  }, actions && React__default.createElement(EmptyStateContainerCTA, {
+    actions: actions,
+    isPaywall: isPaywall
+  }), caption && React__default.createElement(Text, {
+    as: "caption"
+  }, caption))), React__default.createElement("img", {
+    src: mediaUrl,
+    alt: String(title),
+    width: size === EMPTY_STATE_SIZE.LARGE ? '500px' : '333px'
+  }));
+};
+
+var EmptyStateContainer = function EmptyStateContainer(_ref) {
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? EMPTY_STATE_SIZE.LARGE : _ref$size,
+      caption = _ref.caption,
+      _ref$isPaywall = _ref.isPaywall,
+      isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
+      testId = _ref.testId;
+  var isSmallSpot = size === EMPTY_STATE_SIZE.SMALL;
+  var EmptyStateComponent = isSmallSpot ? EmptyStateContainerStack : EmptyStateContainerInline;
+  return React__default.createElement(EmptyStateComponent, {
+    header: header,
+    title: title,
+    children: children,
+    mediaUrl: mediaUrl,
+    actions: actions,
+    size: size,
+    caption: caption,
+    isPaywall: isPaywall,
+    testId: testId
+  });
+};
+
+var Paywall = function Paywall(_ref) {
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      size = _ref.size,
+      caption = _ref.caption,
+      testId = _ref.testId;
+  return React__default.createElement(EmptyStateContainer, {
+    header: header,
+    title: title,
+    mediaUrl: mediaUrl,
+    actions: actions,
+    size: size,
+    caption: caption,
+    isPaywall: true,
+    testId: testId
+  }, children);
+};
+
+var EmptyState = function EmptyState(_ref) {
+  var title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      caption = _ref.caption,
+      size = _ref.size,
+      testId = _ref.testId;
+  return React__default.createElement(EmptyStateContainer, {
+    title: title,
+    mediaUrl: mediaUrl,
+    actions: actions,
+    caption: caption,
+    size: size,
+    testId: testId
+  }, children);
+};
+
 exports.AsyncSelectField = AsyncSelectField;
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
@@ -9146,6 +9330,7 @@ exports.DataTableRow = DataTableRow;
 exports.DateField = DateField;
 exports.DateFilter = DateFilter;
 exports.DateRangeField = DateRangeField;
+exports.EmptyState = EmptyState;
 exports.Form = Form;
 exports.FormFeedback = FormFeedback;
 exports.FormFooter = FormFooter;
@@ -9302,6 +9487,7 @@ exports.MultiSelectField = MultiSelectField;
 exports.Page = Page;
 exports.PaginationControls = PaginationControls;
 exports.PasswordField = PasswordField;
+exports.Paywall = Paywall;
 exports.PercentageField = PercentageField;
 exports.PersistentBanner = PersistentBanner;
 exports.Pill = Pill;