@7shifts/sous-chef 3.76.1-beta.0 → 3.76.2

package/dist/index.modern.js

@@ -6479,7 +6479,7 @@ const SousChefProvider = ({
   }, React__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"};
 
 const SORT_ORDER = {
   ASC: 'asc',
@@ -6673,6 +6673,7 @@ const DataTableHeader = ({
     const isSortable = column.isSortable;
     const sortDir = column.currentSort;
     const isRightAligned = column.isRightAligned;
+    const hasDescription = !!column.description;
     return React__default.createElement("th", {
       className: classnames({
         [styles$1d['data-table-header__item']]: true,
@@ -6690,8 +6691,10 @@ const DataTableHeader = ({
     }, React__default.createElement("div", {
       className: classnames(styles$1d['data-table-header__item-content'], {
         [styles$1d['data-table-header__item-content--right-align']]: isRightAligned
+      }, {
+        [styles$1d['data-table-header__item-content--has-description']]: hasDescription
       })
-    }, column.label, ' ', isSortable && React__default.createElement("span", {
+    }, wrapWithTooltip(column), isSortable && React__default.createElement("span", {
       className: styles$1d['data-table-header__sort-icon']
     }, React__default.createElement(HeaderSortIcon, {
       sortDirection: sortDir
@@ -6700,6 +6703,16 @@ const DataTableHeader = ({
     className: classnames(styles$1d['data-table-header__item'], styles$1d['data-table-header__item--action'])
   }))));
 };
+const wrapWithTooltip = column => {
+  if (column.description && column.label) {
+    return React__default.createElement(Tooltip, {
+      placement: "top",
+      overlay: column.description,
+      theme: "white"
+    }, React__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"};
 
@@ -6791,7 +6804,7 @@ const BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$1a = {"banner":"_omAUf","banner__title":"_8xIYW","banner__body":"_oA2J6","banner__body--multilineCTA":"_PLG8Z","banner--info":"_CRmFE","banner__icon":"_T80if","banner--success":"_PgpTw","banner--danger":"_O-lNW","banner--warning":"_fICdJ","banner--upsell":"_kUB2k","banner__close":"_P6nbA","banner--single-line":"_w-zAz"};
+var styles$1a = {"banner":"_omAUf","banner__title":"_8xIYW","banner__body":"_oA2J6","banner__body--multilineCTA":"_PLG8Z","banner--info":"_CRmFE","banner__icon":"_T80if","banner__icon--multiline":"_uJl2Y","banner--success":"_PgpTw","banner--danger":"_O-lNW","banner--warning":"_fICdJ","banner--upsell":"_kUB2k","banner__close":"_P6nbA","banner--single-line":"_w-zAz"};
 
 /** Infers theme prop for Sous Chef Button CTAs if not explicitly passed, default is hollow, primaryCTA is Upsell if banner theme is Upsell*/
 const ButtonCTA = ({
@@ -6894,11 +6907,12 @@ const InlineBanner = _ref => {
     }),
     style: positionStyles
   }, React__default.createElement(Inline, {
-    alignItems: multiLine ? undefined : 'center',
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default.createElement("div", {
-    className: styles$1a['banner__icon']
+    className: classnames(styles$1a['banner__icon'], {
+      [styles$1a['banner__icon--multiline']]: multiLine
+    })
   }, React__default.createElement(InlineBannerIcon, {
     theme: theme
   })), React__default.createElement(Layout, {
@@ -9108,12 +9122,18 @@ const PersistentBanner = ({
   }, []);
   const BannerContent = () => React__default.createElement(Inline, {
     justifyContent: "center",
-    alignItems: "center"
-  }, children, primaryButton && React__default.cloneElement(primaryButton, _extends({
+    alignItems: "center",
+    flexWrap: "wrap"
+  }, children, (primaryButton || secondaryButton) && React__default.createElement(Inline, {
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "center",
+    space: 8
+  }, primaryButton && React__default.cloneElement(primaryButton, _extends({
     theme: BUTTON_THEMES.HOLLOW_CONTRAST
   }, primaryButton.props)), secondaryButton && React__default.cloneElement(secondaryButton, _extends({
     theme: BUTTON_THEMES.LINK_CONTRAST
-  }, secondaryButton.props)));
+  }, secondaryButton.props))));
   return React__default.createElement("div", {
     className: classnames(styles$K['persistent-banner'], {
       [styles$K['persistent-banner--info']]: _theme === PERSISTENT_BANNER_THEME.INFO,
@@ -9449,7 +9469,7 @@ const DataTableEditableCellElement = ({
     disabled: disabled,
     placeholder: placeholder,
     defaultValue: defaultValue,
-    value: !hasFocus && _type === 'currency' ? Number(controllers.value).toFixed(2).toString() : controllers.value,
+    value: !hasFocus && _type === 'currency' ? Number(controllers.value).toFixed(2) : controllers.value,
     onChange: controllers.onChange,
     onBlur: e => {
       controllers.onBlur(e);
@@ -10157,7 +10177,7 @@ const ActionList = ({
   }, 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"};
 
 const ActionListItemActions = ({
   actions,
@@ -10210,7 +10230,8 @@ const ActionListItem = ({
   };
   const bodyClassName = classnames(style['action-list-item'], {
     [style['action-list-item--interactive']]: !_disabled && onAction,
-    [style['action-list-item--disabled']]: _disabled
+    [style['action-list-item--disabled']]: _disabled,
+    [style['action-list-item--with-chevron']]: !!onAction
   });
   return React__default.createElement("button", {
     className: bodyClassName,
@@ -10218,7 +10239,13 @@ const ActionListItem = ({
     "data-testid": testId
   }, React__default.createElement(Inline, {
     justifyContent: 'space-between',
-    alignItems: 'center'
+    alignItems: 'center',
+    flexWrap: "wrap",
+    flex: ['150px 1 auto'],
+    space: {
+      column: 0,
+      row: 8
+    }
   }, React__default.createElement(Inline, {
     space: 12,
     alignItems: 'flex-start'
@@ -10230,17 +10257,24 @@ const ActionListItem = ({
     emphasis: 'bold'
   }, title), children && React__default.createElement(Text, null, children))), React__default.createElement("div", {
     className: classnames(style['action-list-item__actions'])
-  }, React__default.createElement(Inline, {
-    space: 32,
+  }, (suffix || actions) && React__default.createElement(Inline, {
+    space: {
+      row: 8,
+      column: 32
+    },
     flexGrow: 3,
-    alignItems: 'center'
-  }, React__default.createElement(Text, {
-    color: _disabled ? 'grey-300' : 'grey-400'
-  }, suffix), onAction && React__default.createElement(IconChevronRight, {
+    alignItems: 'center',
+    flexWrap: "wrap",
+    ml: 30
+  }, suffix && React__default.createElement(Text, {
     color: _disabled ? 'grey-300' : 'grey-400'
-  }), actions && React__default.createElement(ActionListItemActions, {
+  }, suffix), actions && React__default.createElement(ActionListItemActions, {
     actions: actions,
     disabled: _disabled
+  })), onAction && React__default.createElement("div", {
+    className: classnames(style['action-list-item__chevron-icon'])
+  }, React__default.createElement(IconChevronRight, {
+    color: _disabled ? 'grey-300' : 'grey-400'
   })))));
 };
 
@@ -14518,7 +14552,10 @@ const EmptyStateContainerInline = ({
   }, React__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',
+      minWidth: '320px'
+    }
   })));
 };