@7shifts/sous-chef 2.7.0 → 2.8.0

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/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/index.js

@@ -4581,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);
       }
     });
@@ -5361,7 +5361,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,
@@ -5863,7 +5863,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,
@@ -5909,6 +5909,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) {
@@ -6082,7 +6211,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;
@@ -6090,7 +6219,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;
@@ -6225,6 +6354,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;
@@ -6364,6 +6494,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;