@7shifts/sous-chef 3.35.0-beta.6 → 3.35.0

package/dist/index.css

@@ -1529,7 +1529,7 @@ h5._32amZ {
 }
 ._ORvUI {
   stroke: var(--color-grey-100);
-  fill: var(--color-white);
+  fill: transparent;
 }
 ._2KJMe {
   stroke: var(--color-mint-400);
@@ -1649,7 +1649,7 @@ h5._32amZ {
   word-break: break-word;
   -webkit-hyphens: auto;
           hyphens: auto;
-  background: none;
+  background: var(--color-white);
 }
 ._3Jay_:first-of-type {
   border-left: 1px solid var(--color-grey-200);
@@ -2146,6 +2146,8 @@ input:disabled + ._2W10t::after {
   border-color: var(--color-eggplant-400);
   box-shadow: 0 0 8px var(--color-eggplant-300);
   outline: none;
+  overflow: visible;
+  z-index: var(--z-index-base);
 }
 ._1-1WW input:hover {
   background: var(--color-grey-100);
@@ -2623,6 +2625,7 @@ input:disabled + ._2W10t::after {
   display: flex;
   flex-direction: column;
   min-width: 90px;
+  background-color: var(--color-white);
 }
 ._eyfGn textarea {
   line-height: 22px;
@@ -2781,6 +2784,7 @@ input:focus-visible + ._W4HpY {
   text-align: center;
   height: 100%;
   color: var(--color-grey-400);
+  background: var(--color-white);
 }
 ._1md_9 input {
   border: 0px;
@@ -3067,6 +3071,8 @@ input:disabled + ._1aaPx::after {
   padding-top: 0px;
   display: flex;
   align-items: center;
+  background-color: var(--color-grey-100);
+  background-color: var(--color-white);
 }
 ._3YxJl {
   border-color: var(--color-radish-400) !important;
@@ -3265,12 +3271,16 @@ input:disabled + ._1aaPx::after {
   flex-grow: 1;
   display: flex;
 }
-._1zowl {
+._Fc99X {
+  font-size: 12pt;
+}
+
+input._1zowl {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._Fc99X {
-  font-size: 12pt;
+._2T1pu {
+  background-color: var(--color-white);
 }
 ._2T1pu:not(._1OxwW) > button:focus ._3mUO5 {
   border: 1px solid var(--color-eggplant-400);

package/dist/index.js

@@ -174,14 +174,11 @@ var getPositionProps = function getPositionProps(_ref) {
     otherProps: otherProps
   };
 };
-var getDataProps = function getDataProps(props, removeDataPrefix) {
-  if (removeDataPrefix === void 0) {
-    removeDataPrefix = false;
-  }
+var getDataProps = function getDataProps(props, config) {
   return Object.keys(props).reduce(function (acc, key) {
     if (key.startsWith('data')) {
       var _Object$assign;
-      var newKey = removeDataPrefix ? key.replace('data', '') : key;
+      var newKey = config && config.removeDataPrefix ? key.replace('data', '') : key;
       acc.dataProps = Object.assign((_Object$assign = {}, _Object$assign[kebabize(newKey)] = props[key], _Object$assign), acc.dataProps);
     } else {
       var _Object$assign2;
@@ -4555,9 +4552,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
     var isSortable = column.isSortable;
     var sortDir = column.currentSort;
     var isRightAligned = column.isRightAligned;
-    var _getDataProps = getDataProps(column),
-      dataProps = _getDataProps.dataProps;
-    return React__default.createElement("th", _extends({
+    return React__default.createElement("th", {
       className: classnames((_classnames = {}, _classnames[styles$a['data-table-header__item']] = true, _classnames[styles$a['data-table-header__item--sortable']] = isSortable, _classnames)),
       style: {
         flex: column.size || 1
@@ -4571,7 +4566,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
       },
       role: "columnheader",
       tabIndex: 0
-    }, dataProps), React__default.createElement("div", {
+    }, React__default.createElement("div", {
       className: classnames(styles$a['data-table-header__item-content'], (_classnames2 = {}, _classnames2[styles$a['data-table-header__item-content--right-align']] = isRightAligned, _classnames2))
     }, column.label, ' ', isSortable && React__default.createElement("span", {
       className: styles$a['data-table-header__sort-icon']
@@ -6252,12 +6247,13 @@ var Modal = function Modal(_ref) {
       zIndex: getZIndex(zIndex)
     }
   };
-  var _getDataProps = getDataProps(otherProps, true),
+  var _getDataProps = getDataProps(otherProps, {
+      removeDataPrefix: true
+    }),
     dataProps = _getDataProps.dataProps;
-  console.log(dataProps);
   return React__default.createElement(ReactModal, {
     isOpen: true,
-    testId: testId + 'kkkkk',
+    testId: testId,
     shouldCloseOnEsc: true,
     shouldCloseOnOverlayClick: false,
     shouldReturnFocusAfterClose: shouldReturnFocusAfterClose,
@@ -7170,6 +7166,7 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
   }, children));
 };
 
+var _excluded$2A = ["items", "columns", "itemComponent", "maxHeight", "hasPrevious", "hasNext", "onPreviousClick", "onNextClick", "onSort", "isLoading", "showActionMenu", "footerComponent", "hasVerticalBorders", "testId", "skeletonRowLayout", "stickyColumns"];
 var DataTable = function DataTable(_ref) {
   var _classNames, _classNames2, _classNames3;
   var items = _ref.items,
@@ -7192,7 +7189,10 @@ var DataTable = function DataTable(_ref) {
     hasVerticalBorders = _ref$hasVerticalBorde === void 0 ? false : _ref$hasVerticalBorde,
     testId = _ref.testId,
     skeletonRowLayout = _ref.skeletonRowLayout,
-    stickyColumns = _ref.stickyColumns;
+    stickyColumns = _ref.stickyColumns,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2A);
+  var _getDataProps = getDataProps(otherProps),
+    dataProps = _getDataProps.dataProps;
   var prevItemsRef = React.useRef([]);
   var prevPaginationRef = React.useRef(false);
   var RowItem = itemComponent || DataTableDefaultItemComponent;
@@ -7267,9 +7267,9 @@ var DataTable = function DataTable(_ref) {
     style: conditionalStyles
   }, state === DATA_TABLE_STATES.BACKGROUND_LOADING && React__default.createElement("div", {
     className: styles$b['data-table__background-loading']
-  }, React__default.createElement(Spinner, null)), React__default.createElement("table", {
+  }, React__default.createElement(Spinner, null)), React__default.createElement("table", _extends({
     className: classnames(styles$b['data-table__table'], (_classNames2 = {}, _classNames2[styles$b['data-table__table--no-columns']] = !isShowingColumns, _classNames2))
-  }, columns && isShowingColumns && React__default.createElement(DataTableHeader, {
+  }, dataProps), columns && isShowingColumns && React__default.createElement(DataTableHeader, {
     columns: columns,
     onSort: onSort,
     showActionMenu: showActionMenu
@@ -7377,11 +7377,11 @@ var isReactSelectElement = function isReactSelectElement(element) {
 
 var styles$M = {"custom-control":"_1JTKu"};
 
-var _excluded$2A = ["children"];
+var _excluded$2B = ["children"];
 function CustomControl(_ref) {
   var _props$getValue;
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2B);
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(Select.components.Control, _extends({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
@@ -7398,10 +7398,10 @@ function CustomControl(_ref) {
   }, props)), children)) : children);
 }
 
-var _excluded$2B = ["children"];
+var _excluded$2C = ["children"];
 function CustomOption(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2C);
   var UserCustomOption = props.selectProps.componentsProps.UserCustomOption;
   return React__default.createElement(Select.components.Option, _extends({}, props), React__default.createElement(UserCustomOption, _extends({}, props), children));
 }
@@ -7421,23 +7421,22 @@ var getSelectStyles = function getSelectStyles(_ref) {
         flexWrap: wrapToNextLine ? 'wrap' : 'nowrap'
       });
     },
-    container: function container(base, state) {
+    container: function container(base) {
       return Object.assign({}, base, {
         flex: '1',
         fontFamily: FONT_FAMILY,
         minWidth: '110px',
-        backgroundColor: state.isDisabled ? COLORS['grey-100'] : COLORS['white'],
         position: 'initial',
         borderRadius: '4px'
       });
     },
     control: function control(base, state) {
       return Object.assign({}, base, {
+        backgroundColor: state.isDisabled ? COLORS['grey-100'] : COLORS['white'],
         borderColor: state.isFocused ? COLORS['eggplant-400'] : borderColor,
         color: state.isDisabled ? COLORS['grey-400'] : COLORS['grey-500'],
         boxShadow: state.isFocused ? "0 0 8px " + COLORS['eggplant-300'] : 'none',
         '&:hover': 'none',
-        background: 'none',
         fontSize: '14px',
         cursor: 'pointer',
         width: asToolbarFilter ? 'fit-content' : undefined,
@@ -7555,10 +7554,10 @@ var CustomContainer = function CustomContainer(props) {
 
 var styles$N = {"custom-menu-text-field":"_2bu6-","custom-menu-hr":"_1cgU7","custom-menu-div":"_1khlU"};
 
-var _excluded$2C = ["children"];
+var _excluded$2D = ["children"];
 function CustomMenu(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2D);
   var _props$selectProps$co = props.selectProps.componentsProps,
     creatableButton = _props$selectProps$co.creatableButton,
     onMenuInputFocus = _props$selectProps$co.onMenuInputFocus,
@@ -8277,11 +8276,11 @@ var TextAreaField = function TextAreaField(_ref) {
   }, toolbar)));
 };
 
-var _excluded$2D = ["prefix", "suffix"];
+var _excluded$2E = ["prefix", "suffix"];
 var TextFieldElement = function TextFieldElement(_ref, ref) {
   var prefix = _ref.prefix,
     suffix = _ref.suffix,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2E);
   var _useTextField = useTextField(_extends({}, props, {
       ref: ref
     })),
@@ -8869,12 +8868,12 @@ var MultiSelectField = function MultiSelectField(_ref) {
 
 var styles$11 = {"custom-list":"_12jq3"};
 
-var _excluded$2E = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
+var _excluded$2F = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 var CustomList = function CustomList(_ref) {
   var children = _ref.children,
     hasMoreOptions = _ref.hasMoreOptions,
     hasMoreOptionsFirstLoad = _ref.hasMoreOptionsFirstLoad,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2F);
   var showFooter = hasMoreOptions;
   if (props.selectProps.inputValue === '' && typeof hasMoreOptionsFirstLoad === 'boolean') {
     showFooter = hasMoreOptionsFirstLoad;
@@ -8886,10 +8885,10 @@ var CustomList = function CustomList(_ref) {
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
 
-var _excluded$2F = ["loadOptions"];
+var _excluded$2G = ["loadOptions"];
 var AsyncSelectField = function AsyncSelectField(_ref) {
   var loadOptions = _ref.loadOptions,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2G);
   var _useState = React.useState(false),
     hasMoreOptions = _useState[0],
     setHasMoreOptions = _useState[1];
@@ -9699,7 +9698,7 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
   })));
 };
 
-var _excluded$2G = ["interval", "startTime", "prefix", "endField", "duration"];
+var _excluded$2H = ["interval", "startTime", "prefix", "endField", "duration"];
 var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
   var _ref$interval = _ref.interval,
     interval = _ref$interval === void 0 ? 15 : _ref$interval,
@@ -9708,7 +9707,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
     _ref$endField = _ref.endField,
     endField = _ref$endField === void 0 ? false : _ref$endField,
     duration = _ref.duration,
-    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2G);
+    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2H);
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
   var _useState = React.useState(allOtherProps.defaultValue),
@@ -9892,13 +9891,13 @@ var styles$14 = {"currency-field__mask-display":"_2K8Ob"};
 var CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
 var CURRENCY_DISPLAY_MARGIN_BUFFER = 1;
 
-var _excluded$2H = ["currencySymbol", "step"];
+var _excluded$2I = ["currencySymbol", "step"];
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
   var _ref$currencySymbol = _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$2H);
+    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2I);
   var _useState = React.useState(CURRENCY_DISPLAY_DEFAULT_MARGIN),
     displayPadding = _useState[0],
     setDisplayPadding = _useState[1];
@@ -9962,7 +9961,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
 };
 var CurrencyField = React.forwardRef(CurrencyFieldElement);
 
-var _excluded$2I = ["max", "min", "precision", "stepSize", "prefix"];
+var _excluded$2J = ["max", "min", "precision", "stepSize", "prefix"];
 var PercentageElement = function PercentageElement(_ref, ref) {
   var _ref$max = _ref.max,
     max = _ref$max === void 0 ? 100 : _ref$max,
@@ -9973,7 +9972,7 @@ var PercentageElement = function PercentageElement(_ref, ref) {
     _ref$stepSize = _ref.stepSize,
     stepSize = _ref$stepSize === void 0 ? 1 : _ref$stepSize,
     prefix = _ref.prefix,
-    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2I);
+    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2J);
   var _useTextField = useTextField(_extends({}, allOtherProps, {
       ref: ref
     })),
@@ -10050,7 +10049,7 @@ var FormFeedback = function FormFeedback(_ref) {
   }, children);
 };
 
-var styles$15 = {"phone-field":"_1uJbR","phone-field__input--with-square-borders":"_1zowl","phone-field__flag":"_Fc99X"};
+var styles$15 = {"phone-field":"_1uJbR","phone-field__flag":"_Fc99X","phone-field__input--with-square-borders":"_1zowl"};
 
 var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
   var name = _ref.name,
@@ -10952,12 +10951,12 @@ var CountrySelector = function CountrySelector(_ref) {
   }))));
 };
 
-var _excluded$2J = ["disabledCountry"];
+var _excluded$2K = ["disabledCountry"];
 var PhoneField = function PhoneField(_ref) {
   var _classNames;
   var _ref$disabledCountry = _ref.disabledCountry,
     disabledCountry = _ref$disabledCountry === void 0 ? false : _ref$disabledCountry,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2J);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2K);
   var inputRef = React.useRef(null);
   var _usePhoneField = usePhoneField(_extends({}, props, {
       ref: inputRef
@@ -11042,14 +11041,14 @@ var PhoneField = function PhoneField(_ref) {
 
 var styles$17 = {"badge":"_1QLaK","badge--warning":"_qsFWw","badge--danger":"_359Cc","badge--success":"_2AOEK","badge--info":"_1mLjf"};
 
-var _excluded$2K = ["children", "theme", "title", "testId"];
+var _excluded$2L = ["children", "theme", "title", "testId"];
 var Badge = function Badge(_ref, forwardedRef) {
   var _classnames;
   var children = _ref.children,
     theme = _ref.theme,
     title = _ref.title,
     testId = _ref.testId,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2K);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2L);
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
   React.useLayoutEffect(function () {