@7shifts/sous-chef 3.76.0-beta.8 → 3.76.0

package/dist/index.js

@@ -6339,7 +6339,7 @@ var SousChefProvider = function SousChefProvider(_ref) {
   }, React__default["default"].createElement(ToastContainer, null), children));
 };
 
-var styles$1d = {"data-table-header":"_F4U3o","data-table-header__item":"_KKljd","data-table-header__item--sortable":"_oKH7a","data-table-header__itemfocus":"_xrDya","data-table-header__item--action":"_RLGaD","data-table-header__item-content":"_3p3fm","data-table-header__item-content--right-align":"_rXid3","data-table-header__sort-icon":"_-xiIl"};
+var styles$1d = {"data-table-header":"_F4U3o","data-table-header__item":"_KKljd","data-table-header__item--sortable":"_oKH7a","data-table-header__itemfocus":"_xrDya","data-table-header__item--action":"_RLGaD","data-table-header__item-content":"_3p3fm","data-table-header__item-content--right-align":"_rXid3","data-table-header__item-content--has-description":"_vgjHE","data-table-header__sort-icon":"_-xiIl"};
 
 var SORT_ORDER = {
   ASC: 'asc',
@@ -6539,10 +6539,11 @@ var DataTableHeader = function DataTableHeader(_ref) {
   }, columns.filter(function (column) {
     return !column.hidden;
   }).map(function (column) {
-    var _classnames, _classnames2;
+    var _classnames, _classnames2, _classnames3;
     var isSortable = column.isSortable;
     var sortDir = column.currentSort;
     var isRightAligned = column.isRightAligned;
+    var hasDescription = !!column.description;
     return React__default["default"].createElement("th", {
       className: classnames__default["default"]((_classnames = {}, _classnames[styles$1d['data-table-header__item']] = true, _classnames[styles$1d['data-table-header__item--sortable']] = isSortable, _classnames)),
       style: {
@@ -6559,8 +6560,8 @@ var DataTableHeader = function DataTableHeader(_ref) {
       role: "columnheader",
       tabIndex: 0
     }, React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$1d['data-table-header__item-content'], (_classnames2 = {}, _classnames2[styles$1d['data-table-header__item-content--right-align']] = isRightAligned, _classnames2))
-    }, column.label, ' ', isSortable && React__default["default"].createElement("span", {
+      className: classnames__default["default"](styles$1d['data-table-header__item-content'], (_classnames2 = {}, _classnames2[styles$1d['data-table-header__item-content--right-align']] = isRightAligned, _classnames2), (_classnames3 = {}, _classnames3[styles$1d['data-table-header__item-content--has-description']] = hasDescription, _classnames3))
+    }, wrapWithTooltip(column), isSortable && React__default["default"].createElement("span", {
       className: styles$1d['data-table-header__sort-icon']
     }, React__default["default"].createElement(HeaderSortIcon, {
       sortDirection: sortDir
@@ -6569,6 +6570,16 @@ var DataTableHeader = function DataTableHeader(_ref) {
     className: classnames__default["default"](styles$1d['data-table-header__item'], styles$1d['data-table-header__item--action'])
   }))));
 };
+var wrapWithTooltip = function wrapWithTooltip(column) {
+  if (column.description && column.label) {
+    return React__default["default"].createElement(Tooltip, {
+      placement: "top",
+      overlay: column.description,
+      theme: "white"
+    }, React__default["default"].createElement("div", null, column.label));
+  }
+  return column.label;
+};
 
 var styles$1c = {"data-table":"_zEfoA","data-table__content":"_v-WNu","data-table__content--with-scroll":"_xI2-r","data-table__background-loading":"_ED7Nm","data-table__table":"_fnq34","data-table__table--no-columns":"_qSrJq","data-table__body":"_1SNLz","data-table__body--no-bottom-radius":"_zCIMD","data-table__footer":"_mp1Ok","data-table__pagination-controls":"_vdEZz"};
 
@@ -6747,7 +6758,6 @@ var InlineBanner = function InlineBanner(_ref) {
     className: classnames__default["default"](styles$1a['banner'], (_classnames = {}, _classnames[styles$1a['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$1a['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$1a['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$1a['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$1a['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$1a['banner--single-line']] = !multiLine, _classnames)),
     style: positionStyles
   }, React__default["default"].createElement(Inline, {
-    alignItems: multiLine ? undefined : 'center',
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default["default"].createElement("div", {
@@ -8123,7 +8133,7 @@ var Page = function Page(_ref) {
 
 var styles$U = {"page-layout":"_Scw7-","page-layout__nav-container":"_v--DF","page-layout__nav-list":"_dJeZe","page-layout__content":"_hHi70","page-layout__side-nav-content":"_vTMjp"};
 
-var styles$T = {"menu-item":"_SebbU","menu-item--active":"_CDEVl"};
+var styles$T = {"menu-item":"_SebbU","menu-item--active":"_CDEVl","menu-item--with-badge":"_VudDE","menu-item__badge":"_vErBS"};
 
 var styles$S = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP"};
 
@@ -8860,19 +8870,27 @@ var BadgeElement = function BadgeElement(_ref, forwardedRef) {
 var Badge = React.forwardRef(BadgeElement);
 
 var MenuItem = function MenuItem(_ref) {
-  var _classNames;
+  var _classNames, _classNames2;
   var menu = _ref.menu;
   return React__default["default"].createElement("li", {
-    className: classnames__default["default"](styles$T['menu-item'])
+    className: classnames__default["default"](styles$T['menu-item'], (_classNames = {}, _classNames[styles$T['menu-item--with-badge']] = !!menu.suffix, _classNames))
   }, menu.reloadDocument ? React__default["default"].createElement("a", {
     href: menu.to,
-    className: classnames__default["default"]((_classNames = {}, _classNames[styles$T['menu-item--active']] = menu.isActive, _classNames))
-  }, menu.label, !!menu.badge && React__default["default"].createElement(Badge, null, menu.badge)) : React__default["default"].createElement(reactRouterDom.NavLink, {
+    className: classnames__default["default"]((_classNames2 = {}, _classNames2[styles$T['menu-item--active']] = menu.isActive, _classNames2))
+  }, menu.label, !!menu.suffix && React__default["default"].createElement("div", {
+    className: styles$T['menu-item__badge']
+  }, React__default["default"].createElement(Badge, null, menu.suffix))) : React__default["default"].createElement(reactRouterDom.NavLink, {
     to: menu.to,
-    // @ts-expect-error
+    // @ts-expect-error This is only available on v5
     activeClassName: styles$T['menu-item--active'],
+    className: function className(_ref2) {
+      var isActive = _ref2.isActive;
+      return isActive ? styles$T['menu-item--active'] : '';
+    },
     exact: true
-  }, menu.label, !!menu.badge && React__default["default"].createElement(Badge, null, menu.badge)));
+  }, menu.label, !!menu.suffix && React__default["default"].createElement("div", {
+    className: styles$T['menu-item__badge']
+  }, React__default["default"].createElement(Badge, null, menu.suffix))));
 };
 
 var PageLayout = function PageLayout(_ref) {
@@ -8888,14 +8906,16 @@ var PageLayout = function PageLayout(_ref) {
     space: 12
   }, React__default["default"].createElement(Text, {
     as: "h5",
-    textWrap: "wrap"
+    textWrap: "wrap",
+    ml: 20,
+    mr: 35
   }, title), React__default["default"].createElement("ul", {
     className: styles$U['page-layout__nav-list']
   }, menu.filter(function (menu) {
     return !('isVisible' in menu) || (menu == null ? void 0 : menu.isVisible) === true;
   }).map(function (menuItem, index) {
     return React__default["default"].createElement(MenuItem, {
-      key: index,
+      key: menuItem.name || index,
       menu: menuItem
     });
   })), sideNavContent && React__default["default"].createElement("div", {
@@ -8929,12 +8949,18 @@ var PersistentBanner = function PersistentBanner(_ref) {
   var BannerContent = function BannerContent() {
     return React__default["default"].createElement(Inline, {
       justifyContent: "center",
-      alignItems: "center"
-    }, children, primaryButton && React__default["default"].cloneElement(primaryButton, _extends({
+      alignItems: "center",
+      flexWrap: "wrap"
+    }, children, (primaryButton || secondaryButton) && React__default["default"].createElement(Inline, {
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: "center",
+      space: 8
+    }, primaryButton && React__default["default"].cloneElement(primaryButton, _extends({
       theme: BUTTON_THEMES.HOLLOW_CONTRAST
     }, primaryButton.props)), secondaryButton && React__default["default"].cloneElement(secondaryButton, _extends({
       theme: BUTTON_THEMES.LINK_CONTRAST
-    }, secondaryButton.props)));
+    }, secondaryButton.props))));
   };
   return React__default["default"].createElement("div", {
     className: classnames__default["default"](styles$K['persistent-banner'], (_classNames = {}, _classNames[styles$K['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$K['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$K['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
@@ -9198,6 +9224,9 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
     testId = _ref.testId;
+  var _useState = React.useState(false),
+    hasFocus = _useState[0],
+    setHasFocus = _useState[1];
   var _useDataTableContext = useDataTableContext(),
     columns = _useDataTableContext.columns,
     numberOfRows = _useDataTableContext.numberOfRows;
@@ -9242,9 +9271,15 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
     disabled: disabled,
     placeholder: placeholder,
     defaultValue: defaultValue,
-    value: controllers.value,
+    value: !hasFocus && type === 'currency' ? Number(controllers.value).toFixed(2) : controllers.value,
     onChange: controllers.onChange,
-    onBlur: controllers.onBlur,
+    onBlur: function onBlur(e) {
+      controllers.onBlur(e);
+      setHasFocus(false);
+    },
+    onFocus: function onFocus() {
+      return setHasFocus(true);
+    },
     ref: ref,
     onWheel: function onWheel(e) {
       e.target.blur();
@@ -9935,7 +9970,7 @@ var ActionList = function ActionList(_ref) {
   }, emptyState == null ? void 0 : emptyState.caption)));
 };
 
-var style = {"action-list-item":"_JnBey","action-list-item--disabled":"_DT13p","action-list-item--interactive":"_G-7Pi","action-list-item__actions":"_xuiNi"};
+var style = {"action-list-item":"_JnBey","action-list-item--with-chevron":"_Rg-qZ","action-list-item--disabled":"_DT13p","action-list-item__chevron-icon":"_So7nD","action-list-item--interactive":"_G-7Pi","action-list-item__actions":"_xuiNi"};
 
 var ActionListItemActions = function ActionListItemActions(_ref) {
   var actions = _ref.actions,
@@ -9993,14 +10028,20 @@ var ActionListItem = function ActionListItem(_ref) {
     }
     return undefined;
   };
-  var bodyClassName = classnames__default["default"](style['action-list-item'], (_classnames = {}, _classnames[style['action-list-item--interactive']] = !disabled && onAction, _classnames[style['action-list-item--disabled']] = disabled, _classnames));
+  var bodyClassName = classnames__default["default"](style['action-list-item'], (_classnames = {}, _classnames[style['action-list-item--interactive']] = !disabled && onAction, _classnames[style['action-list-item--disabled']] = disabled, _classnames[style['action-list-item--with-chevron']] = !!onAction, _classnames));
   return React__default["default"].createElement("button", {
     className: bodyClassName,
     onClick: disabled ? undefined : onAction,
     "data-testid": testId
   }, React__default["default"].createElement(Inline, {
     justifyContent: 'space-between',
-    alignItems: 'center'
+    alignItems: 'center',
+    flexWrap: "wrap",
+    flex: ['150px 1 auto'],
+    space: {
+      column: 0,
+      row: 8
+    }
   }, React__default["default"].createElement(Inline, {
     space: 12,
     alignItems: 'flex-start'
@@ -10012,17 +10053,24 @@ var ActionListItem = function ActionListItem(_ref) {
     emphasis: 'bold'
   }, title), children && React__default["default"].createElement(Text, null, children))), React__default["default"].createElement("div", {
     className: classnames__default["default"](style['action-list-item__actions'])
-  }, React__default["default"].createElement(Inline, {
-    space: 32,
+  }, (suffix || actions) && React__default["default"].createElement(Inline, {
+    space: {
+      row: 8,
+      column: 32
+    },
     flexGrow: 3,
-    alignItems: 'center'
-  }, React__default["default"].createElement(Text, {
-    color: disabled ? 'grey-300' : 'grey-400'
-  }, suffix), onAction && React__default["default"].createElement(IconChevronRight, {
+    alignItems: 'center',
+    flexWrap: "wrap",
+    ml: 30
+  }, suffix && React__default["default"].createElement(Text, {
     color: disabled ? 'grey-300' : 'grey-400'
-  }), actions && React__default["default"].createElement(ActionListItemActions, {
+  }, suffix), actions && React__default["default"].createElement(ActionListItemActions, {
     actions: actions,
     disabled: disabled
+  })), onAction && React__default["default"].createElement("div", {
+    className: classnames__default["default"](style['action-list-item__chevron-icon'])
+  }, React__default["default"].createElement(IconChevronRight, {
+    color: disabled ? 'grey-300' : 'grey-400'
   })))));
 };
 
@@ -14404,7 +14452,9 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }, React__default["default"].createElement("img", {
     src: mediaUrl,
     alt: String(title),
-    width: size === EMPTY_STATE_SIZE.LARGE ? '500px' : '333px'
+    style: {
+      maxWidth: size === EMPTY_STATE_SIZE.LARGE ? '500px' : '333px'
+    }
   })));
 };