@7shifts/sous-chef 2.6.0 → 2.8.1

package/dist/feedback/Spinner/Spinner.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 declare type Props = {
     size?: number;
-    theme?: 'mint' | 'disabled' | 'contrast';
+    theme?: 'mint' | 'disabled' | 'contrast' | 'pride';
     block?: boolean;
 };
 declare const Spinner: React.FC<Props>;

package/dist/forms/CurrencyField/CurrencyField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Props as TextFieldProps } from '../TextField/TextField';
+/**
+ * `CurrencyField` is like `TextField` but it auto-format the value when the user leaves the field.
+ *
+ * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
+ */
+declare const CurrencyField: React.ForwardRefExoticComponent<TextFieldProps & {
+    currencySymbol: string;
+} & Pick<TextFieldProps, "disabled" | "id" | "caption" | "label" | "error" | "onChange" | "name" | "value" | "onBlur" | "placeholder" | "autoFocus" | "onFocus" | "onKeyDown" | "defaultValue" | "autoComplete" | "maxLength"> & React.RefAttributes<HTMLInputElement>>;
+export default CurrencyField;

package/dist/forms/CurrencyField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CurrencyField';

package/dist/forms/PercentageField/PercentageField.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Props as TextFieldProps } from '../TextField/TextField';
+/**
+ * `PercentageField` is an extended `TextField` input with validation and formatting in place to properly display percentage values.
+ * In its default state it only allows integers between 0 and 100, but it can be configured to allow decimals and negative values.
+ */
+declare const PercentageField: React.ForwardRefExoticComponent<{
+    max?: number | undefined;
+    min?: number | undefined;
+    precision?: number | undefined;
+    stepSize?: number | undefined;
+} & Pick<TextFieldProps, "disabled" | "id" | "caption" | "label" | "error" | "onChange" | "name" | "value" | "onBlur" | "placeholder" | "prefix" | "autoFocus" | "onFocus" | "onKeyDown" | "defaultValue" | "autoComplete"> & React.RefAttributes<HTMLInputElement>>;
+export default PercentageField;

package/dist/forms/PercentageField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './PercentageField';

package/dist/forms/SelectField/domain.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This helper method helps to check if the user is scrolling inside the select options so,
+ * it does not close the menu when using the prop menuShouldScrollIntoView
+ **/
+export declare const isScrollingTheSelectMenu: (element: HTMLElement) => boolean;

package/dist/forms/index.d.ts

@@ -13,7 +13,9 @@ import DateField from './DateField';
 import DateRangeField from './DateRangeField';
 import WeekField from './WeekField';
 import TimeField from './TimeField';
-export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, RadioGroupField, RadioGroupOption, PasswordField, MultiSelectField, SelectField, DateField, DateRangeField, WeekField, TimeField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
+import CurrencyField from './CurrencyField';
+import PercentageField from './PercentageField';
+export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, RadioGroupField, RadioGroupOption, PasswordField, MultiSelectField, SelectField, DateField, DateRangeField, WeekField, TimeField, CurrencyField, PercentageField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
 export type { PasswordCriteria } from './PasswordField/types';
 export type { SelectOption, SelectOptions } from './SelectField/types';
 export type { FormikType } from './Form/types';

package/dist/icons/components/IconUniversity.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IconSize } from '../types';
+declare type Props = {
+    size?: IconSize;
+    color?: string;
+} & React.SVGProps<SVGSVGElement>;
+declare const IconUniversity: {
+    (props: Props): JSX.Element;
+    displayName: string;
+};
+export default IconUniversity;

package/dist/icons/components/index.d.ts

@@ -109,6 +109,7 @@ export { default as IconTimes } from './IconTimes';
 export { default as IconTrash } from './IconTrash';
 export { default as IconUnderline } from './IconUnderline';
 export { default as IconUndo } from './IconUndo';
+export { default as IconUniversity } from './IconUniversity';
 export { default as IconUserComputer } from './IconUserComputer';
 export { default as IconUserLight } from './IconUserLight';
 export { default as IconUserPlus } from './IconUserPlus';

package/dist/index.css

@@ -139,6 +139,10 @@ Please ask a designer if you have questions about which colours to use.
   stroke: #fff;
 }
 
+._e0OH1 {
+  stroke: url(#prideGradient);
+}
+
 @-webkit-keyframes _3ZqYM {
   0% {
     stroke-dashoffset: 187;

package/dist/index.js

@@ -163,7 +163,7 @@ var Inline = function Inline(props) {
   }));
 };
 
-var styles$2 = {"spinner":"_2wtfD","rotator":"_2Jprn","spinner--block":"_Jmh8M","path":"_3zucL","dash":"_3ZqYM","path--mint":"_3XYKx","path--disabled":"_1pYbs","path--contrast":"_3ofDF"};
+var styles$2 = {"spinner":"_2wtfD","rotator":"_2Jprn","spinner--block":"_Jmh8M","path":"_3zucL","dash":"_3ZqYM","path--mint":"_3XYKx","path--disabled":"_1pYbs","path--contrast":"_3ofDF","path--pride":"_e0OH1"};
 
 var Spinner = function Spinner(_ref) {
   var _classnames;
@@ -183,7 +183,75 @@ var Spinner = function Spinner(_ref) {
     height: size,
     viewBox: "0 0 66 66",
     "data-testid": "spinner"
-  }, React__default.createElement("circle", {
+  }, React__default.createElement("defs", null, React__default.createElement("linearGradient", {
+    id: "prideGradient"
+  }, React__default.createElement("stop", {
+    offset: "0",
+    stopColor: "#000000"
+  }), React__default.createElement("stop", {
+    offset: "0.0500",
+    stopColor: "#000000"
+  }), React__default.createElement("stop", {
+    offset: "0.0501",
+    stopColor: "#ffafc7"
+  }), React__default.createElement("stop", {
+    offset: "0.15",
+    stopColor: "#ffafc7"
+  }), React__default.createElement("stop", {
+    offset: "0.1501",
+    stopColor: "#73d7ee"
+  }), React__default.createElement("stop", {
+    offset: "0.25",
+    stopColor: "#73d7ee"
+  }), React__default.createElement("stop", {
+    offset: "0.2501",
+    stopColor: "#613915"
+  }), React__default.createElement("stop", {
+    offset: "0.35",
+    stopColor: "#613915"
+  }), React__default.createElement("stop", {
+    offset: "0.3501",
+    stopColor: "#ffffff"
+  }), React__default.createElement("stop", {
+    offset: "0.45",
+    stopColor: "#ffffff"
+  }), React__default.createElement("stop", {
+    offset: "0.4501",
+    stopColor: "#e50000"
+  }), React__default.createElement("stop", {
+    offset: "0.55",
+    stopColor: "#e50000"
+  }), React__default.createElement("stop", {
+    offset: "0.5501",
+    stopColor: "#ff8d00"
+  }), React__default.createElement("stop", {
+    offset: "0.65",
+    stopColor: "#ff8d00"
+  }), React__default.createElement("stop", {
+    offset: "0.6501",
+    stopColor: "#ddee00"
+  }), React__default.createElement("stop", {
+    offset: "0.75",
+    stopColor: "#ddee00"
+  }), React__default.createElement("stop", {
+    offset: "0.7501",
+    stopColor: "#028121"
+  }), React__default.createElement("stop", {
+    offset: "0.85",
+    stopColor: "#028121"
+  }), React__default.createElement("stop", {
+    offset: "0.8501",
+    stopColor: "#004cff"
+  }), React__default.createElement("stop", {
+    offset: "0.95",
+    stopColor: "#004cff"
+  }), React__default.createElement("stop", {
+    offset: "0.9501",
+    stopColor: "#760088"
+  }), React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#760088"
+  }))), React__default.createElement("circle", {
     className: classnames(styles$2['path'], styles$2["path--" + theme]),
     fill: "none",
     strokeWidth: "6",
@@ -2735,6 +2803,28 @@ var IconUndo = function IconUndo(props) {
 
 IconUndo.displayName = 'IconUndo';
 
+var IconUniversity = function IconUniversity(props) {
+  return React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "icon-university",
+    style: getIconStyles(props)
+  }, props), React__default.createElement("g", {
+    clipPath: "url(#icon-university_svg__a)"
+  }, React__default.createElement("path", {
+    d: "M19.375 17.5h-.625v-1.563a.937.937 0 0 0-.938-.937H16.25V8.125H15V15h-2.5V8.125h-1.25V15h-2.5V8.125H7.5V15H5V8.125H3.75V15H2.187a.937.937 0 0 0-.937.938V17.5H.625a.625.625 0 0 0-.625.625v.313a.313.313 0 0 0 .313.312h19.375a.313.313 0 0 0 .312-.313v-.312a.625.625 0 0 0-.625-.625ZM2.5 16.25h15v1.25h-15v-1.25ZM19.698 5.312l-9.105-3.966a1.875 1.875 0 0 0-1.186 0L.302 5.312A.469.469 0 0 0 0 5.752v.343c0 .259.21.468.469.468h.781v.47c0 .258.21.468.469.468H18.28c.26 0 .469-.21.469-.469v-.468h.781c.26 0 .469-.21.469-.47v-.342a.469.469 0 0 0-.302-.439ZM17.5 6.25h-15v-.531L9.842 2.52a.625.625 0 0 1 .316 0L17.5 5.72v.531Z",
+    fill: "currentColor"
+  })), React__default.createElement("defs", null, React__default.createElement("clipPath", {
+    id: "icon-university_svg__a"
+  }, React__default.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h20v20H0z"
+  }))));
+};
+
+IconUniversity.displayName = 'IconUniversity';
+
 var IconUserComputer = function IconUserComputer(props) {
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
@@ -3609,7 +3699,7 @@ var useFieldControllers = function useFieldControllers(_ref) {
         return formik.setFieldValue(name, e.target.value);
       },
       onBlur: _onBlur ? function (e) {
-        controllers.onBlur(e);
+        _onBlur && _onBlur(e.target.value);
         currencyBlur();
       } : function () {
         formik.setFieldTouched(name);
@@ -4491,7 +4581,7 @@ var useRadioGroupFieldControllers = function useRadioGroupFieldControllers(_ref)
       error: error !== undefined ? controllers.error : formikState.error,
       value: value !== undefined ? controllers.value : formikState.value,
       onChange: function onChange(e) {
-        formik.setFieldValue(name, e.target.checked);
+        formik.setFieldValue(name, e.target.value);
         _onChange && _onChange(e.target.value);
       }
     });
@@ -4869,6 +4959,28 @@ function CustomOption(_ref) {
   return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
 }
 
+var isScrollingTheSelectMenu = function isScrollingTheSelectMenu(element) {
+  if (!isReactSelectElement(element)) {
+    var _element$children;
+
+    return isReactSelectElement(element === null || element === void 0 ? void 0 : (_element$children = element.children) === null || _element$children === void 0 ? void 0 : _element$children[0]);
+  }
+
+  return true;
+};
+
+var isReactSelectElement = function isReactSelectElement(element) {
+  var _element$children2;
+
+  var firstOption = element === null || element === void 0 ? void 0 : (_element$children2 = element.children) === null || _element$children2 === void 0 ? void 0 : _element$children2[0];
+
+  if (!firstOption) {
+    return false;
+  }
+
+  return typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
+};
+
 var MultiSelectField = function MultiSelectField(_ref) {
   var name = _ref.name,
       inputId = _ref.id,
@@ -4937,10 +5049,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
         return false;
       }
 
-      var target = e.target;
-      var firstOption = target.children[0];
-      var isScrollingTheMenu = firstOption && typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
-      return !isScrollingTheMenu;
+      return !isScrollingTheSelectMenu(e.target);
     }
   }));
 };
@@ -5030,10 +5139,7 @@ var SelectField = function SelectField(_ref) {
         return false;
       }
 
-      var target = e.target;
-      var firstOption = target.children[0];
-      var isScrollingTheMenu = firstOption && typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
-      return !isScrollingTheMenu;
+      return !isScrollingTheSelectMenu(e.target);
     },
     components: {
       Option: UserCustomOption ? function (props) {
@@ -5271,7 +5377,7 @@ var DateField = function DateField(_ref) {
     inputProps: {
       name: name,
       id: controllers.id,
-      className: classnames(inputStyles['date-field'], (_classnames = {}, _classnames[inputStyles['date--invalid']] = hasError, _classnames)),
+      className: classnames(inputStyles['date-field'], (_classnames = {}, _classnames[inputStyles['date-field--invalid']] = hasError, _classnames)),
       'data-testid': "date-field-" + name,
       'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
       'aria-invalid': hasError,
@@ -5773,7 +5879,7 @@ var WeekField = function WeekField(_ref) {
     inputProps: {
       name: name,
       id: controllers.id,
-      className: classnames(inputStyles['date-field'], (_classnames = {}, _classnames[inputStyles['date--invalid']] = hasError, _classnames)),
+      className: classnames(inputStyles['date-field'], (_classnames = {}, _classnames[inputStyles['date-field--invalid']] = hasError, _classnames)),
       'data-testid': "week-field-" + name,
       'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
       'aria-invalid': hasError,
@@ -5819,6 +5925,135 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = React.forwardRef(TimeFieldElement);
 
+var _excluded$7 = ["currencySymbol"];
+
+var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
+  var _ref$currencySymbol = _ref.currencySymbol,
+      currencySymbol = _ref$currencySymbol === void 0 ? "$" : _ref$currencySymbol,
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+
+  var _useTextField = useTextField(_extends({}, allOtherProps, {
+    ref: ref
+  })),
+      inputProps = _useTextField.inputProps,
+      fieldProps = _useTextField.fieldProps;
+
+  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',
+    min: 0,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'e' || e.key === '-') {
+        e.preventDefault();
+        return;
+      }
+
+      inputProps.onKeyDown(e);
+    },
+    onBlur: function onBlur(e) {
+      e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(2);
+      inputProps.onChange(e);
+      inputProps.onBlur(e);
+    }
+  }))));
+};
+
+var CurrencyField = React.forwardRef(CurrencyFieldElement);
+
+var _excluded$8 = ["max", "min", "precision", "stepSize"];
+
+var PercentageElement = function PercentageElement(_ref, ref) {
+  var _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 100 : _ref$max,
+      _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 0 : _ref$min,
+      _ref$precision = _ref.precision,
+      precision = _ref$precision === void 0 ? 0 : _ref$precision,
+      _ref$stepSize = _ref.stepSize,
+      stepSize = _ref$stepSize === void 0 ? 1 : _ref$stepSize,
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+
+  var _useTextField = useTextField(_extends({}, allOtherProps, {
+    ref: ref
+  })),
+      inputProps = _useTextField.inputProps,
+      fieldProps = _useTextField.fieldProps;
+
+  var inputMode = precision > 0 ? 'decimal' : 'numeric';
+
+  var decimalDigitsCount = function decimalDigitsCount(input) {
+    var decimalIndex = input.indexOf('.');
+    return decimalIndex === -1 ? 0 : input.length - decimalIndex - 1;
+  };
+
+  var inputIsValid = function inputIsValid(valueAsString) {
+    if (valueAsString.startsWith('00')) {
+      return false;
+    }
+
+    if (valueAsString === '-' || valueAsString === '.') {
+      return true;
+    }
+
+    if (valueAsString.indexOf('-') > 0) {
+      return false;
+    }
+
+    return decimalDigitsCount(valueAsString) <= precision;
+  };
+
+  var keyPressIsValid = function keyPressIsValid(keyPress, value) {
+    if (keyPress == 'e' || keyPress == '+' || keyPress == '-' && min >= 0) {
+      return false;
+    }
+
+    if (keyPress == '.' && (precision == 0 || Number(value) == max)) {
+      return false;
+    }
+
+    return true;
+  };
+
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
+    suffix: '%'
+  }, React__default.createElement("input", Object.assign({}, inputProps, {
+    type: 'number',
+    inputMode: inputMode,
+    step: stepSize,
+    max: max,
+    min: min,
+    onKeyDown: function onKeyDown(e) {
+      var value = e.currentTarget.value + e.key;
+
+      if (e.key.length === 1 && (!keyPressIsValid(e.key, value) || !inputIsValid(value))) {
+        e.preventDefault();
+        return;
+      }
+
+      inputProps.onKeyDown(e);
+    },
+    onChange: function onChange(e) {
+      var number = Number(e.target.value);
+
+      if (number > max) {
+        e.target.value = String(max);
+      }
+
+      if (number < min) {
+        e.target.value = String(min);
+      }
+
+      inputProps.onChange(e);
+      inputProps.onBlur(e);
+    }
+  }))));
+};
+
+var PercentageField = React.forwardRef(PercentageElement);
+
 var styles$u = {"caption":"_1QDLF","label":"_2wiMV","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
 
 var Toggle = function Toggle(_ref) {
@@ -5992,7 +6227,7 @@ var FooterContainer = function FooterContainer(_ref2) {
 
 var styles$z = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
-var _excluded$7 = ["children", "theme", "title"];
+var _excluded$9 = ["children", "theme", "title"];
 
 var Badge = function Badge(_ref, forwardedRef) {
   var _classnames;
@@ -6000,7 +6235,7 @@ var Badge = function Badge(_ref, forwardedRef) {
   var children = _ref.children,
       theme = _ref.theme,
       title = _ref.title,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
@@ -6135,6 +6370,7 @@ exports.Avatar = Avatar;
 exports.Badge = Badge$1;
 exports.Button = Button$1;
 exports.CheckboxField = CheckboxField;
+exports.CurrencyField = CurrencyField;
 exports.DataTable = DataTable;
 exports.DataTableCell = DataTableCell;
 exports.DataTableEditableCell = DataTableEditableCell;
@@ -6254,6 +6490,7 @@ exports.IconTimesOctagon = IconTimesOctagon;
 exports.IconTrash = IconTrash;
 exports.IconUnderline = IconUnderline;
 exports.IconUndo = IconUndo;
+exports.IconUniversity = IconUniversity;
 exports.IconUserComputer = IconUserComputer;
 exports.IconUserLight = IconUserLight;
 exports.IconUserPlus = IconUserPlus;
@@ -6273,6 +6510,7 @@ exports.ModalFooter = ModalFooter;
 exports.MultiSelectField = MultiSelectField;
 exports.PaginationControls = PaginationControls;
 exports.PasswordField = PasswordField;
+exports.PercentageField = PercentageField;
 exports.PillSelectField = PillSelectField;
 exports.RadioGroupField = RadioGroupField;
 exports.RadioGroupOption = RadioGroupOption;