@7shifts/sous-chef 3.35.0-beta.0 → 3.35.0-beta.2

package/dist/forms/CheckboxField/CheckboxField.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { DataProps } from '../../foundation/types';
 type Props = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
@@ -12,7 +13,7 @@ type Props = {
     disabled?: boolean;
     /** This is used for setting the data-testid */
     testId?: string;
-};
+} & DataProps;
 /** CheckboxField form element. */
 declare const CheckboxField: React.FC<Props>;
 export default CheckboxField;

package/dist/index.js

@@ -136,7 +136,61 @@ var usePositionStyles = function usePositionStyles(_ref) {
   return positionStyles;
 };
 
-var _excluded = ["children", "space", "flex", "alignItems", "justifyContent", "inlineFlex", "direction", "flexItems", "flexWrap", "flexGrow", "testId", "extraClass"];
+var capitalizeFirstLetter = function capitalizeFirstLetter(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+};
+var kebabize = function kebabize(str) {
+  return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, function ($, ofs) {
+    return (ofs ? '-' : '') + $.toLowerCase();
+  });
+};
+
+var _excluded = ["m", "margin", "mt", "marginTop", "mr", "marginRight", "mb", "marginBottom", "ml", "marginLeft"];
+var getPositionProps = function getPositionProps(_ref) {
+  var m = _ref.m,
+    margin = _ref.margin,
+    mt = _ref.mt,
+    marginTop = _ref.marginTop,
+    mr = _ref.mr,
+    marginRight = _ref.marginRight,
+    mb = _ref.mb,
+    marginBottom = _ref.marginBottom,
+    ml = _ref.ml,
+    marginLeft = _ref.marginLeft,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return {
+    positionProps: {
+      m: m,
+      margin: margin,
+      mt: mt,
+      marginTop: marginTop,
+      mr: mr,
+      marginRight: marginRight,
+      mb: mb,
+      marginBottom: marginBottom,
+      ml: ml,
+      marginLeft: marginLeft
+    },
+    otherProps: otherProps
+  };
+};
+var getDataProps = function getDataProps(props) {
+  return Object.keys(props).reduce(function (acc, key) {
+    if (key.startsWith('data')) {
+      var _Object$assign;
+      acc.dataProps = Object.assign((_Object$assign = {}, _Object$assign[kebabize(key)] = props[key], _Object$assign), acc.dataProps);
+    } else {
+      var _Object$assign2;
+      acc.otherProps = Object.assign((_Object$assign2 = {}, _Object$assign2[key] = props[key], _Object$assign2), acc.otherProps);
+    }
+    return acc;
+  }, {
+    dataProps: {},
+    otherProps: {}
+  });
+};
+
+var _excluded$1 = ["children", "space", "flex", "alignItems", "justifyContent", "inlineFlex", "direction", "flexItems", "flexWrap", "flexGrow", "testId", "extraClass"];
 var Flex = function Flex(_ref) {
   var _classNames;
   var children = _ref.children,
@@ -158,12 +212,17 @@ var Flex = function Flex(_ref) {
     flexGrow = _ref.flexGrow,
     testId = _ref.testId,
     extraClass = _ref.extraClass,
-    positionProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var _getPositionProps = getPositionProps(rest),
+    positionProps = _getPositionProps.positionProps,
+    otherProps = _getPositionProps.otherProps;
+  var _getDataProps = getDataProps(otherProps),
+    dataProps = _getDataProps.dataProps;
   var positionStyles = usePositionStyles(positionProps);
   var className = classnames(styles['flex'], extraClass, (_classNames = {}, _classNames[styles['align-start']] = alignItems === 'flex-start', _classNames[styles['align-end']] = alignItems === 'flex-end', _classNames[styles['align-center']] = alignItems === 'center', _classNames[styles['justify-start']] = justifyContent === 'start', _classNames[styles['justify-end']] = justifyContent === 'end', _classNames[styles['justify-center']] = justifyContent === 'center', _classNames[styles['justify-space-between']] = justifyContent === 'space-between', _classNames[styles['inline-flex']] = inlineFlex, _classNames));
   var items = React__default.Children.toArray(children).filter(Boolean);
   var gap = typeof space === 'object' ? space.row + "px " + space.column + "px" : space;
-  return React__default.createElement("div", {
+  return React__default.createElement("div", _extends({
     className: className,
     style: _extends({
       flexDirection: direction,
@@ -172,7 +231,7 @@ var Flex = function Flex(_ref) {
       flexGrow: flexGrow
     }, positionStyles),
     "data-testid": testId
-  }, items.map(function (child, i) {
+  }, dataProps), items.map(function (child, i) {
     var _classNames2;
     return React__default.createElement("div", {
       key: i,
@@ -184,11 +243,11 @@ var Flex = function Flex(_ref) {
   }));
 };
 
-var _excluded$1 = ["alignItems"];
+var _excluded$2 = ["alignItems"];
 var Stack = function Stack(_ref) {
   var _ref$alignItems = _ref.alignItems,
     alignItems = _ref$alignItems === void 0 ? 'stretch' : _ref$alignItems,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return React.createElement(Flex, _extends({}, props, {
     alignItems: alignItems,
     direction: "column"
@@ -197,60 +256,6 @@ var Stack = function Stack(_ref) {
 
 var styles$1 = {"caption":"_3s_-x","label":"_29W-o","label--truncate":"_10hPY","toggle":"_3VC9U","toggle__label":"_LbMlH","toggle__caption":"_15FwS","toggle__switch":"_lHlzh"};
 
-var capitalizeFirstLetter = function capitalizeFirstLetter(text) {
-  return text.charAt(0).toUpperCase() + text.slice(1);
-};
-var kebabize = function kebabize(str) {
-  return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, function ($, ofs) {
-    return (ofs ? '-' : '') + $.toLowerCase();
-  });
-};
-
-var _excluded$2 = ["m", "margin", "mt", "marginTop", "mr", "marginRight", "mb", "marginBottom", "ml", "marginLeft"];
-var getPositionProps = function getPositionProps(_ref) {
-  var m = _ref.m,
-    margin = _ref.margin,
-    mt = _ref.mt,
-    marginTop = _ref.marginTop,
-    mr = _ref.mr,
-    marginRight = _ref.marginRight,
-    mb = _ref.mb,
-    marginBottom = _ref.marginBottom,
-    ml = _ref.ml,
-    marginLeft = _ref.marginLeft,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  return {
-    positionProps: {
-      m: m,
-      margin: margin,
-      mt: mt,
-      marginTop: marginTop,
-      mr: mr,
-      marginRight: marginRight,
-      mb: mb,
-      marginBottom: marginBottom,
-      ml: ml,
-      marginLeft: marginLeft
-    },
-    otherProps: otherProps
-  };
-};
-var getDataProps = function getDataProps(props) {
-  return Object.keys(props).reduce(function (acc, key) {
-    if (key.startsWith('data')) {
-      var _Object$assign;
-      acc.dataProps = Object.assign((_Object$assign = {}, _Object$assign[kebabize(key)] = props[key], _Object$assign), acc.dataProps);
-    } else {
-      var _Object$assign2;
-      acc.otherProps = Object.assign((_Object$assign2 = {}, _Object$assign2[key] = props[key], _Object$assign2), acc.otherProps);
-    }
-    return acc;
-  }, {
-    dataProps: {},
-    otherProps: {}
-  });
-};
-
 var _excluded$3 = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
 var Toggle = function Toggle(_ref) {
   var checked = _ref.checked,
@@ -4546,7 +4551,9 @@ var DataTableHeader = function DataTableHeader(_ref) {
     var isSortable = column.isSortable;
     var sortDir = column.currentSort;
     var isRightAligned = column.isRightAligned;
-    return React__default.createElement("th", {
+    var _getDataProps = getDataProps(column),
+      dataProps = _getDataProps.dataProps;
+    return React__default.createElement("th", _extends({
       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
@@ -4560,7 +4567,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
       },
       role: "columnheader",
       tabIndex: 0
-    }, React__default.createElement("div", {
+    }, dataProps), 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']
@@ -6618,6 +6625,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
 
 var styles$H = {"check-box-field":"_2Rbk6","check-box-field__caption":"_1GW-E","check-box-field__custom-input":"_2W10t"};
 
+var _excluded$2u = ["name", "id", "checked", "onChange", "onBlur", "label", "caption", "error", "disabled", "testId"];
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
     inputId = _ref.id,
@@ -6628,7 +6636,8 @@ var CheckboxField = function CheckboxField(_ref) {
     caption = _ref.caption,
     error = _ref.error,
     disabled = _ref.disabled,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2u);
   var controllers = useCheckBoxFieldControllers({
     name: name,
     id: inputId,
@@ -6640,12 +6649,12 @@ var CheckboxField = function CheckboxField(_ref) {
   var hasError = !!controllers.error;
   return React__default.createElement(Stack, {
     space: 8
-  }, React__default.createElement(Flex, {
+  }, React__default.createElement(Flex, _extends({
     space: 8,
     alignItems: "center",
     flexItems: true,
     flex: ['0 0 auto']
-  }, React__default.createElement("div", {
+  }, otherProps), React__default.createElement("div", {
     className: styles$H['check-box-field']
   }, React__default.createElement("input", {
     name: name,
@@ -6697,7 +6706,7 @@ var useLocalStorage = function useLocalStorage(key, initialValue) {
 
 var styles$I = {"hint-modal":"_1b47y","hint-modal--after-open":"_2MB4p","hint-modal--before-close":"_3VYQo","hint-modal__overlay":"_3Enme","hint-modal__image":"_2Nn7v","hint-modal__body":"_bzN9e","hint-modal__close-button":"_3xbis"};
 
-var _excluded$2u = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "testId"];
+var _excluded$2v = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "testId"];
 var HintModal = function HintModal(_ref) {
   var header = _ref.header,
     children = _ref.children,
@@ -6706,7 +6715,7 @@ var HintModal = function HintModal(_ref) {
     modalId = _ref.modalId,
     primaryButton = _ref.primaryButton,
     testId = _ref.testId,
-    positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2u);
+    positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2v);
   var _useState = React.useState(false),
     doNotShowAgain = _useState[0],
     setDoNotShowAgain = _useState[1];
@@ -6930,7 +6939,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
 };
 var DataTableEditableCell = React.forwardRef(DataTableEditableCellElement);
 
-var _excluded$2v = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding", "hasDefaultCell", "testId"];
+var _excluded$2w = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding", "hasDefaultCell", "testId"];
 var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
   var _classnames;
   var children = _ref.children,
@@ -6942,7 +6951,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
     _ref$hasDefaultCell = _ref.hasDefaultCell,
     hasDefaultCell = _ref$hasDefaultCell === void 0 ? true : _ref$hasDefaultCell,
     testId = _ref.testId,
-    nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$2v);
+    nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$2w);
   var _useDataTableContext = useDataTableContext(),
     showActionMenu = _useDataTableContext.showActionMenu;
   var styleNames = classnames(styles$z['item'], (_classnames = {}, _classnames[styles$z['clickable']] = onClick, _classnames[styles$z['selected']] = isSelected, _classnames));
@@ -7354,11 +7363,11 @@ var isReactSelectElement = function isReactSelectElement(element) {
 
 var styles$M = {"custom-control":"_1JTKu"};
 
-var _excluded$2w = ["children"];
+var _excluded$2x = ["children"];
 function CustomControl(_ref) {
   var _props$getValue;
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2x);
   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", {
@@ -7375,10 +7384,10 @@ function CustomControl(_ref) {
   }, props)), children)) : children);
 }
 
-var _excluded$2x = ["children"];
+var _excluded$2y = ["children"];
 function CustomOption(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2y);
   var UserCustomOption = props.selectProps.componentsProps.UserCustomOption;
   return React__default.createElement(Select.components.Option, _extends({}, props), React__default.createElement(UserCustomOption, _extends({}, props), children));
 }
@@ -7532,10 +7541,10 @@ var CustomContainer = function CustomContainer(props) {
 
 var styles$N = {"custom-menu-text-field":"_2bu6-","custom-menu-hr":"_1cgU7","custom-menu-div":"_1khlU"};
 
-var _excluded$2y = ["children"];
+var _excluded$2z = ["children"];
 function CustomMenu(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2z);
   var _props$selectProps$co = props.selectProps.componentsProps,
     creatableButton = _props$selectProps$co.creatableButton,
     onMenuInputFocus = _props$selectProps$co.onMenuInputFocus,
@@ -8254,11 +8263,11 @@ var TextAreaField = function TextAreaField(_ref) {
   }, toolbar)));
 };
 
-var _excluded$2z = ["prefix", "suffix"];
+var _excluded$2A = ["prefix", "suffix"];
 var TextFieldElement = function TextFieldElement(_ref, ref) {
   var prefix = _ref.prefix,
     suffix = _ref.suffix,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2A);
   var _useTextField = useTextField(_extends({}, props, {
       ref: ref
     })),
@@ -8846,12 +8855,12 @@ var MultiSelectField = function MultiSelectField(_ref) {
 
 var styles$11 = {"custom-list":"_12jq3"};
 
-var _excluded$2A = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
+var _excluded$2B = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 var CustomList = function CustomList(_ref) {
   var children = _ref.children,
     hasMoreOptions = _ref.hasMoreOptions,
     hasMoreOptionsFirstLoad = _ref.hasMoreOptionsFirstLoad,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2B);
   var showFooter = hasMoreOptions;
   if (props.selectProps.inputValue === '' && typeof hasMoreOptionsFirstLoad === 'boolean') {
     showFooter = hasMoreOptionsFirstLoad;
@@ -8863,10 +8872,10 @@ var CustomList = function CustomList(_ref) {
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
 
-var _excluded$2B = ["loadOptions"];
+var _excluded$2C = ["loadOptions"];
 var AsyncSelectField = function AsyncSelectField(_ref) {
   var loadOptions = _ref.loadOptions,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2C);
   var _useState = React.useState(false),
     hasMoreOptions = _useState[0],
     setHasMoreOptions = _useState[1];
@@ -9676,7 +9685,7 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
   })));
 };
 
-var _excluded$2C = ["interval", "startTime", "prefix", "endField", "duration"];
+var _excluded$2D = ["interval", "startTime", "prefix", "endField", "duration"];
 var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
   var _ref$interval = _ref.interval,
     interval = _ref$interval === void 0 ? 15 : _ref$interval,
@@ -9685,7 +9694,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$2C);
+    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2D);
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
   var _useState = React.useState(allOtherProps.defaultValue),
@@ -9869,13 +9878,13 @@ var styles$14 = {"currency-field__mask-display":"_2K8Ob"};
 var CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
 var CURRENCY_DISPLAY_MARGIN_BUFFER = 1;
 
-var _excluded$2D = ["currencySymbol", "step"];
+var _excluded$2E = ["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$2D);
+    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2E);
   var _useState = React.useState(CURRENCY_DISPLAY_DEFAULT_MARGIN),
     displayPadding = _useState[0],
     setDisplayPadding = _useState[1];
@@ -9939,7 +9948,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
 };
 var CurrencyField = React.forwardRef(CurrencyFieldElement);
 
-var _excluded$2E = ["max", "min", "precision", "stepSize", "prefix"];
+var _excluded$2F = ["max", "min", "precision", "stepSize", "prefix"];
 var PercentageElement = function PercentageElement(_ref, ref) {
   var _ref$max = _ref.max,
     max = _ref$max === void 0 ? 100 : _ref$max,
@@ -9950,7 +9959,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$2E);
+    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2F);
   var _useTextField = useTextField(_extends({}, allOtherProps, {
       ref: ref
     })),
@@ -10929,12 +10938,12 @@ var CountrySelector = function CountrySelector(_ref) {
   }))));
 };
 
-var _excluded$2F = ["disabledCountry"];
+var _excluded$2G = ["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$2F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2G);
   var inputRef = React.useRef(null);
   var _usePhoneField = usePhoneField(_extends({}, props, {
       ref: inputRef
@@ -11019,14 +11028,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$2G = ["children", "theme", "title", "testId"];
+var _excluded$2H = ["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$2G);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2H);
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
   React.useLayoutEffect(function () {