@7shifts/sous-chef 2.3.0 → 2.3.3

package/dist/core/DataTable/DataTable.d.ts

@@ -4,7 +4,7 @@ declare type Props<T> = {
     /** Each element represents a row and each key of the object represents a column */
     items: Item<T>[];
     /** For each column element, the `name` property should match the key on `items` */
-    columns: Column[];
+    columns?: Column[];
     /** A custom component for  customizing how the each item is rendered. It pass as props: `item`, `index`, `columnSizes` and `columns` */
     itemComponent?: React.ComponentType<CustomComponent<T>>;
     maxHeight?: number;

package/dist/core/DataTable/DataTableContext.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { Column } from './types';
 export declare type DataTableContextType = {
-    columns: Column[];
+    columns?: Column[];
     showActionMenu?: boolean;
     numberOfRows: number;
     hasVerticalBorders?: boolean;

package/dist/forms/Form/types.d.ts

@@ -1,18 +1,3 @@
-import type { SelectOption } from '../SelectField/types';
-import { DateRange } from '../../utils/date';
-export declare type FormikType = {
-    handleSubmit: (e: Object) => void;
-    setFieldValue: (_: string, __: string | boolean | SelectOption<any> | SelectOption<any>[] | Date | DateRange | null) => void;
-    setFieldTouched: (e: string) => void;
-    values: {
-        [key: string]: any;
-    };
-    touched: {
-        [key: string]: boolean;
-    };
-    errors: {
-        [key: string]: string;
-    };
-    isValid: boolean;
-    dirty: boolean;
-};
+import { FormikState, FormikHelpers, FormikHandlers } from 'formik';
+/** The FormValues are `any` here as in Sous Chef we don't care about the shape of the form. We just need to link form fields with the formik state */
+export declare type FormikType = FormikState<any> & FormikHelpers<any> & FormikHandlers;

package/dist/forms/MultiSelectField/MultiSelectField.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import type { SelectOption, SelectOptions } from '../SelectField/types';
+declare type NoOptionsMessageFunction = (input: {
+    inputValue: string;
+}) => string | null;
 declare type Props<T> = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
@@ -13,11 +16,12 @@ declare type Props<T> = {
     caption?: React.ReactNode;
     error?: string;
     placeholder?: string;
+    noOptionsMessage?: string | NoOptionsMessageFunction;
     disabled?: boolean;
     closeOnSelect?: boolean;
     /** When the user opens the menu, if this prop is `true`, it will scroll the page into to the menu view (if its content falls under a scroll). It is recomended to disable this behaviour when using the `MultiSelectField` inside a modal. */
     menuShouldScrollIntoView?: boolean;
 };
 /** Component to make possible choose from a predefined options. */
-declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, disabled, closeOnSelect, menuShouldScrollIntoView }: Props<T>) => JSX.Element;
+declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, noOptionsMessage, disabled, closeOnSelect, menuShouldScrollIntoView }: Props<T>) => JSX.Element;
 export default MultiSelectField;

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

@@ -1,5 +1,8 @@
 import React from 'react';
 import type { SelectOption, SelectOptions } from './types';
+declare type NoOptionsMessageFunction = (input: {
+    inputValue: string;
+}) => string | null;
 declare type Props<T> = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
@@ -14,6 +17,7 @@ declare type Props<T> = {
     caption?: React.ReactNode;
     error?: string;
     placeholder?: string;
+    noOptionsMessage?: string | NoOptionsMessageFunction;
     disabled?: boolean;
     /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
     prefix?: React.ReactNode;
@@ -22,5 +26,5 @@ declare type Props<T> = {
     menuShouldScrollIntoView?: boolean;
 };
 /** Component to make possible choose from a predefined options. */
-declare const SelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, SelectedOptionPrefix, label, caption, error, placeholder, disabled, prefix, asToolbarFilter, menuShouldScrollIntoView }: Props<T>) => JSX.Element;
+declare const SelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, SelectedOptionPrefix, label, caption, error, placeholder, noOptionsMessage, disabled, prefix, asToolbarFilter, menuShouldScrollIntoView }: Props<T>) => JSX.Element;
 export default SelectField;

package/dist/index.css

@@ -598,7 +598,7 @@ Please ask a designer if you have questions about which colours to use.
   border: 1px solid #fff;
   border-bottom: 1px solid #e0e0e0;
 }
-._3DlpO:last-child {
+._3DlpO:last-child:not(._NS-B9) {
   border-bottom: 1px solid #fff;
 }
 
@@ -621,11 +621,20 @@ Please ask a designer if you have questions about which colours to use.
   box-shadow: 0 0 8px #a7b7ea;
 }
 ._NS-B9:first-child {
-  border-radius: 8px 8px 0 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+._NS-B9:first-child:not(:last-child) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 ._NS-B9:last-child {
-  border-radius: 0 0 8px 8px;
-  border-bottom: 1px solid #6d87dd;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+._NS-B9:last-child:not(:first-child) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 ._3ENNn {
@@ -664,6 +673,7 @@ Please ask a designer if you have questions about which colours to use.
 ._3-nHz {
   display: flex;
   align-items: center;
+  line-height: 21px;
 }
 ._2Rh0i {
   cursor: pointer;
@@ -682,6 +692,7 @@ Please ask a designer if you have questions about which colours to use.
 ._W7CnY {
   display: inline-block;
   padding: 0 8px;
+  line-height: 1em;
 }
 
 ._2ygIH {
@@ -734,7 +745,7 @@ Please ask a designer if you have questions about which colours to use.
 ._1d8Ci {
   display: flex;
 }
-._1d8Ci:not(:last-child) {
+._1d8Ci:not(:last-child):not(._3tb7U) {
   border-bottom: 1px solid #e0e0e0;
 }
 
@@ -757,11 +768,20 @@ Please ask a designer if you have questions about which colours to use.
   box-shadow: 0 0 8px #a7b7ea;
 }
 ._3tb7U:first-child {
-  border-radius: 8px 8px 0 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+._3tb7U:first-child:not(:last-child) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 ._3tb7U:last-child {
-  border-radius: 0 0 8px 8px;
-  border-bottom: 1px solid #6d87dd;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+._3tb7U:last-child:not(:first-child) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 ._OTcMc {
@@ -809,6 +829,7 @@ Please ask a designer if you have questions about which colours to use.
 ._27x4v {
   display: flex;
   align-items: center;
+  line-height: 21px;
 }
 ._27x4v:not(._27x4v:first-child) {
   padding-left: 16px;
@@ -837,6 +858,7 @@ Please ask a designer if you have questions about which colours to use.
 ._3VjFP {
   display: inline-block;
   padding: 0 8px;
+  line-height: 1em;
 }
 
 ._1bTmd {

package/dist/index.js

@@ -7,6 +7,7 @@ var ReactDOM = _interopDefault(require('react-dom'));
 var Select = require('react-select');
 var Select__default = _interopDefault(Select);
 var DayPickerInput = _interopDefault(require('react-day-picker/DayPickerInput'));
+var dateFns = require('date-fns');
 var reactDayPicker = require('react-day-picker');
 var dateFnsFormat = _interopDefault(require('date-fns/format'));
 var dateFnsParse = _interopDefault(require('date-fns/parse'));
@@ -392,7 +393,9 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
   }, []);
   var tooltipRectPosition = tooltipRef === null || tooltipRef === void 0 ? void 0 : (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.getBoundingClientRect();
   var position = calculatePosition(placement, anchorPosition, tooltipRectPosition);
-  return React__default.createElement(Portal, null, React__default.createElement("div", null, React__default.createElement("div", {
+  return React__default.createElement(Portal, null, React__default.createElement("div", {
+    role: "tooltip"
+  }, React__default.createElement("div", {
     ref: tooltipRef,
     style: _extends({}, position.overlay, {
       zIndex: Z_INDEX_LAYERS.TOOLTIP
@@ -428,6 +431,7 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
       header = _ref.header,
       extraClass = _ref.extraClass,
       onClose = _ref.onClose,
+      onVisibleChange = _ref.onVisibleChange,
       children = _ref.children;
   var checkIsMounted = useIsMounted();
   var internalRef = React.useRef(null);
@@ -446,6 +450,10 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
     if (!shouldShow) {
       onClose === null || onClose === void 0 ? void 0 : onClose();
     }
+
+    if (onVisibleChange) {
+      onVisibleChange(shouldShow);
+    }
   };
 
   var onAnchorFocusIn = function onAnchorFocusIn() {
@@ -2860,7 +2868,7 @@ var IconWrench = function IconWrench(props) {
 
 IconWrench.displayName = 'IconWrench';
 
-var styles$6 = {"item":"_3DlpO","clickable":"_2jPpF","selected":"_NS-B9","item-column":"_3ENNn","actions":"_1FTaE"};
+var styles$6 = {"item":"_3DlpO","selected":"_NS-B9","clickable":"_2jPpF","item-column":"_3ENNn","actions":"_1FTaE"};
 
 var ResourceTableRow = function ResourceTableRow(_ref) {
   var _classnames;
@@ -3177,7 +3185,7 @@ var useDataTableContext = function useDataTableContext() {
   return context;
 };
 
-var styles$9 = {"item":"_1d8Ci","clickable":"_thFcO","selected":"_3tb7U","item-column":"_OTcMc","item-column--default-padding":"_lNHQ8","item-column--right-align":"_13YLe","item-column--vertical-border":"_1rrRr","actions":"_azbIG"};
+var styles$9 = {"item":"_1d8Ci","selected":"_3tb7U","clickable":"_thFcO","item-column":"_OTcMc","item-column--default-padding":"_lNHQ8","item-column--right-align":"_13YLe","item-column--vertical-border":"_1rrRr","actions":"_azbIG"};
 
 var DataTableRow = function DataTableRow(_ref) {
   var _classnames;
@@ -3365,7 +3373,7 @@ var DataTable = function DataTable(_ref) {
       numberOfRows: numberOfRows,
       hasVerticalBorders: hasVerticalBorders
     }
-  }, React__default.createElement("div", null, React__default.createElement(DataTableHeader, {
+  }, React__default.createElement("div", null, columns && React__default.createElement(DataTableHeader, {
     columns: columns,
     onSort: onSort,
     showActionMenu: showActionMenu
@@ -3425,7 +3433,7 @@ var DataTableCell = function DataTableCell(_ref) {
   var _useDataTableContext = useDataTableContext(),
       columns = _useDataTableContext.columns;
 
-  var column = (_columns$columnIndex = columns[columnIndex]) != null ? _columns$columnIndex : null;
+  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
   var isRightAligned = column ? column.isRightAligned : false;
   return React__default.createElement("div", {
     className: classnames((_classnames = {}, _classnames[styles$b['data-table-cell--right-aligned']] = isRightAligned, _classnames), styles$b['data-table-cell'])
@@ -3452,49 +3460,33 @@ var getFormikState = function getFormikState(name, formik) {
     return null;
   }
 
-  if (Object.keys(formik.values).includes(name)) {
-    return {
-      error: formik.touched[name] ? formik.errors[name] : undefined,
-      value: formik.values[name]
-    };
-  }
+  var formikPath = getFormikArrayPath(name);
 
-  var formikArray = getFormikArrayPath(name);
+  if (formikPath.length === 0) {
+    return null;
+  }
 
-  if (formikArray) {
-    var _formik$touched, _formik$touched$array, _formik$touched$array2, _formik$errors, _formik$errors$arrayN, _formik$errors$arrayN2, _formik$values, _formik$values$arrayN, _formik$values$arrayN2;
+  var formikLatestLevel = formikPath.reduce(function (acc, path) {
+    var _acc$touched, _acc$error, _acc$value;
 
-    var arrayName = formikArray.arrayName,
-        itemIndex = formikArray.itemIndex,
-        fieldName = formikArray.fieldName;
     return {
-      error: (_formik$touched = formik.touched) !== null && _formik$touched !== void 0 && (_formik$touched$array = _formik$touched[arrayName]) !== null && _formik$touched$array !== void 0 && (_formik$touched$array2 = _formik$touched$array[itemIndex]) !== null && _formik$touched$array2 !== void 0 && _formik$touched$array2[fieldName] ? (_formik$errors = formik.errors) === null || _formik$errors === void 0 ? void 0 : (_formik$errors$arrayN = _formik$errors[arrayName]) === null || _formik$errors$arrayN === void 0 ? void 0 : (_formik$errors$arrayN2 = _formik$errors$arrayN[itemIndex]) === null || _formik$errors$arrayN2 === void 0 ? void 0 : _formik$errors$arrayN2[fieldName] : undefined,
-      value: (_formik$values = formik.values) === null || _formik$values === void 0 ? void 0 : (_formik$values$arrayN = _formik$values[arrayName]) === null || _formik$values$arrayN === void 0 ? void 0 : (_formik$values$arrayN2 = _formik$values$arrayN[itemIndex]) === null || _formik$values$arrayN2 === void 0 ? void 0 : _formik$values$arrayN2[fieldName]
+      touched: (_acc$touched = acc.touched) === null || _acc$touched === void 0 ? void 0 : _acc$touched[path],
+      error: (_acc$error = acc.error) === null || _acc$error === void 0 ? void 0 : _acc$error[path],
+      value: (_acc$value = acc.value) === null || _acc$value === void 0 ? void 0 : _acc$value[path]
     };
-  }
-
-  return null;
-};
-
-var getFormikArrayPath = function getFormikArrayPath(name) {
-  if (!name.includes('[')) {
-    return false;
-  }
-
-  var _name$split = name.split('['),
-      arrayName = _name$split[0],
-      missingSplit = _name$split[1];
-
-  var _missingSplit$split = missingSplit.split('].'),
-      itemIndex = _missingSplit$split[0],
-      fieldName = _missingSplit$split[1];
-
+  }, {
+    touched: formik.touched,
+    error: formik.errors,
+    value: formik.values
+  });
   return {
-    arrayName: arrayName,
-    itemIndex: itemIndex,
-    fieldName: fieldName
+    error: formikLatestLevel.touched ? formikLatestLevel.error : undefined,
+    value: formikLatestLevel.value
   };
 };
+var getFormikArrayPath = function getFormikArrayPath(name) {
+  return name.split(/[^a-zA-Z0-9]/).filter(Boolean);
+};
 
 var useFieldControllers = function useFieldControllers(_ref) {
   var name = _ref.name,
@@ -3694,9 +3686,9 @@ var DataTableEditableCell = function DataTableEditableCell(_ref) {
       columns = _useDataTableContext.columns,
       numberOfRows = _useDataTableContext.numberOfRows;
 
-  var column = (_columns$columnIndex = columns[columnIndex]) != null ? _columns$columnIndex : null;
+  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
   var isRightAligned = column ? column.isRightAligned : false;
-  var numberOfColumns = columns === null || columns === void 0 ? void 0 : columns.length;
+  var numberOfColumns = (columns === null || columns === void 0 ? void 0 : columns.length) || 0;
   var isTopLeftCell = columnIndex === 0 && rowIndex === 0;
   var isTopRightCell = columnIndex === numberOfColumns - 1 && rowIndex === 0;
   var isBottomLeftCell = columnIndex === 0 && rowIndex === numberOfRows - 1;
@@ -4639,6 +4631,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
       caption = _ref.caption,
       error = _ref.error,
       placeholder = _ref.placeholder,
+      noOptionsMessage = _ref.noOptionsMessage,
       disabled = _ref.disabled,
       _ref$closeOnSelect = _ref.closeOnSelect,
       closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect,
@@ -4660,12 +4653,16 @@ var MultiSelectField = function MultiSelectField(_ref) {
     caption: caption,
     error: controllers.error
   };
+  var defaultNoOptionsMessage = noOptionsMessage && typeof noOptionsMessage === 'string' ? function () {
+    return noOptionsMessage;
+  } : undefined;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(Select__default, {
     inputId: controllers.id,
     options: options,
     isDisabled: disabled,
     value: controllers.value,
     placeholder: placeholder,
+    noOptionsMessage: typeof noOptionsMessage === 'function' ? noOptionsMessage : defaultNoOptionsMessage,
     styles: getSelectStyles({
       isInvalid: hasError,
       wrapToNextLine: true
@@ -4691,7 +4688,8 @@ var MultiSelectField = function MultiSelectField(_ref) {
       }
 
       var target = e.target;
-      var isScrollingTheMenu = typeof target.className === 'string' && target.className.includes('MenuList');
+      var firstOption = target.children[0];
+      var isScrollingTheMenu = firstOption && typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
       return !isScrollingTheMenu;
     }
   }));
@@ -4798,6 +4796,7 @@ var SelectField = function SelectField(_ref) {
       caption = _ref.caption,
       error = _ref.error,
       placeholder = _ref.placeholder,
+      noOptionsMessage = _ref.noOptionsMessage,
       disabled = _ref.disabled,
       prefix = _ref.prefix,
       _ref$asToolbarFilter = _ref.asToolbarFilter,
@@ -4820,6 +4819,9 @@ var SelectField = function SelectField(_ref) {
     caption: caption,
     error: controllers.error
   };
+  var defaultNoOptionsMessage = noOptionsMessage && typeof noOptionsMessage === 'string' ? function () {
+    return noOptionsMessage;
+  } : undefined;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: prefix
   }, React__default.createElement(Select__default, {
@@ -4828,6 +4830,7 @@ var SelectField = function SelectField(_ref) {
     isDisabled: disabled,
     value: controllers.value,
     placeholder: placeholder,
+    noOptionsMessage: typeof noOptionsMessage === 'function' ? noOptionsMessage : defaultNoOptionsMessage,
     styles: getSelectStyles({
       isInvalid: hasError,
       asToolbarFilter: asToolbarFilter
@@ -4856,7 +4859,8 @@ var SelectField = function SelectField(_ref) {
       }
 
       var target = e.target;
-      var isScrollingTheMenu = typeof target.className === 'string' && target.className.includes('MenuList');
+      var firstOption = target.children[0];
+      var isScrollingTheMenu = firstOption && typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
       return !isScrollingTheMenu;
     }
   })));
@@ -4882,7 +4886,7 @@ var useDateFieldControllers = function useDateFieldControllers(_ref) {
     error: error,
     value: value,
     onChange: function onChange(newValue) {
-      return _onChange && _onChange(newValue);
+      return _onChange && _onChange(dateFns.isDate(newValue) ? dateFns.startOfDay(newValue) : newValue);
     },
     onBlur: function onBlur() {
       return _onBlur && _onBlur();
@@ -4895,7 +4899,7 @@ var useDateFieldControllers = function useDateFieldControllers(_ref) {
       error: error !== undefined ? controllers.error : formikState.error,
       value: value !== undefined ? controllers.value : formikState.value,
       onChange: _onChange ? controllers.onChange : function (newValue) {
-        formik.setFieldValue(name, newValue === undefined ? null : newValue);
+        formik.setFieldValue(name, newValue === undefined ? null : dateFns.startOfDay(newValue));
       },
       onBlur: _onBlur ? controllers.onBlur : function () {
         return formik.setFieldTouched(name);