@7shifts/sous-chef 2.2.0 → 2.3.2

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/icons/components/IconGavel.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 IconGavel: {
+    (props: Props): JSX.Element;
+    displayName: string;
+};
+export default IconGavel;

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

@@ -56,6 +56,7 @@ export { default as IconFile } from './IconFile';
 export { default as IconFlag } from './IconFlag';
 export { default as IconFourDotsCircle } from './IconFourDotsCircle';
 export { default as IconFourSquares } from './IconFourSquares';
+export { default as IconGavel } from './IconGavel';
 export { default as IconGift } from './IconGift';
 export { default as IconGrinBeam } from './IconGrinBeam';
 export { default as IconGripVertical } from './IconGripVertical';

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'));
@@ -1785,6 +1786,21 @@ var IconFourSquares = function IconFourSquares(props) {
 
 IconFourSquares.displayName = 'IconFourSquares';
 
+var IconGavel = function IconGavel(props) {
+  return React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 60 60",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "icon-gavel",
+    style: getIconStyles(props)
+  }, props), React__default.createElement("path", {
+    d: "m58.698 21.863-2.418-2.42a4.442 4.442 0 0 0-5.476-.638l-9.61-9.609a4.442 4.442 0 0 0-.638-5.476l-2.418-2.418a4.438 4.438 0 0 0-6.28 0L18.551 14.605a4.446 4.446 0 0 0 0 6.28l2.42 2.42a4.448 4.448 0 0 0 5.475.637l3.48 3.48-6.891 6.89-.947-.946a5.095 5.095 0 0 0-7.198 0l-13.403 13.4a5.095 5.095 0 0 0 0 7.198l4.548 4.548a5.095 5.095 0 0 0 7.197 0l13.401-13.403a5.095 5.095 0 0 0 0-7.198l-.947-.947 6.891-6.89 3.48 3.479a4.449 4.449 0 0 0 .637 5.476l2.42 2.419a4.446 4.446 0 0 0 6.28 0l13.303-13.305a4.439 4.439 0 0 0 0-6.28ZM23.983 42.457l-13.401 13.4a1.34 1.34 0 0 1-1.894 0l-4.546-4.545a1.34 1.34 0 0 1 0-1.894l13.401-13.4a1.34 1.34 0 0 1 1.894 0l4.546 4.545a1.341 1.341 0 0 1 0 1.894Zm32.065-16.966L42.743 38.796a.69.69 0 0 1-.977 0l-2.42-2.42a.691.691 0 0 1 0-.976l1.932-1.93L26.53 18.721l-1.93 1.931a.692.692 0 0 1-.978 0l-2.419-2.419a.692.692 0 0 1 0-.977L34.51 3.952a.691.691 0 0 1 .977 0l2.419 2.42a.691.691 0 0 1 0 .976l-1.93 1.931L50.72 24.026l1.931-1.93a.69.69 0 0 1 .977 0l2.419 2.418a.692.692 0 0 1 0 .977Z",
+    fill: "currentColor"
+  }));
+};
+
+IconGavel.displayName = 'IconGavel';
+
 var IconGift = function IconGift(props) {
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
@@ -4499,7 +4515,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
       return Object.assign({}, base, {
         flex: '1',
         fontFamily: FONT_FAMILY,
-        minWidth: '64px',
+        minWidth: '110px',
         backgroundColor: state.isDisabled && !asToolbarFilter ? GREY100 : WHITE,
         position: 'initial'
       });
@@ -4544,11 +4560,12 @@ var getSelectStyles = function getSelectStyles(_ref) {
       return Object.assign({}, base, {
         color: state.isDisabled ? GREY400 : null,
         marginRight: 0,
-        position: 'static',
+        position: asToolbarFilter ? 'static' : 'absolute',
         transform: 'initial',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        top: !asToolbarFilter && 'auto'
       });
     },
     dropdownIndicator: function dropdownIndicator(base, state) {
@@ -4563,7 +4580,8 @@ var getSelectStyles = function getSelectStyles(_ref) {
         color: state.isDisabled ? GREY400 : state.isSelected ? EGGPLANT700 : GREY500,
         cursor: 'pointer',
         fontFamily: FONT_FAMILY,
-        fontSize: '14px'
+        fontSize: '14px',
+        wordBreak: 'break-word'
       });
     },
     group: function group(base) {
@@ -4622,6 +4640,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,
@@ -4643,12 +4662,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
@@ -4674,7 +4697,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;
     }
   }));
@@ -4781,6 +4805,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,
@@ -4803,6 +4828,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, {
@@ -4811,6 +4839,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
@@ -4839,7 +4868,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;
     }
   })));
@@ -4865,7 +4895,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();
@@ -4878,7 +4908,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);
@@ -5842,6 +5872,7 @@ exports.IconFilePdf = IconFilePdf;
 exports.IconFlag = IconFlag;
 exports.IconFourDotsCircle = IconFourDotsCircle;
 exports.IconFourSquares = IconFourSquares;
+exports.IconGavel = IconGavel;
 exports.IconGift = IconGift;
 exports.IconGrinBeam = IconGrinBeam;
 exports.IconGripVertical = IconGripVertical;