@7shifts/sous-chef 2.0.0 → 2.1.2

package/dist/controls/ToolbarSelect/ToolbarSelect.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { SelectOption, SelectOptions } from '../../forms/SelectField/types';
+declare type Props<T> = {
+    name: string;
+    value?: SelectOption<T>;
+    placeholder?: string;
+    options: SelectOptions<T>;
+    onChange?: (e: SelectOption<T>) => void;
+    onBlur?: (e: SelectOption<T>) => void;
+    disabled?: boolean;
+    /** Use a prefix for things like icons or symbols (“$”, “¥”, “£”). */
+    prefix: React.ReactNode;
+};
+/** Toolbar component to make a possible selection from predefined options. */
+declare const ToolbarSelect: <T extends unknown>({ name, value, options, onChange, onBlur, placeholder, disabled, prefix, }: Props<T>) => JSX.Element;
+export default ToolbarSelect;

package/dist/controls/ToolbarSelect/ToolbarSelect.styles.d.ts

@@ -0,0 +1,5 @@
+declare type GetSelectStylesControls = {
+    wrapToNextLine?: boolean;
+};
+export declare const getSelectStyles: ({ wrapToNextLine }: GetSelectStylesControls) => Object;
+export {};

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

@@ -15,7 +15,9 @@ declare type Props<T> = {
     placeholder?: string;
     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 }: Props<T>) => JSX.Element;
+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;
 export default MultiSelectField;

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

@@ -18,7 +18,9 @@ declare type Props<T> = {
     /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
     prefix?: React.ReactNode;
     asToolbarFilter?: 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 `SelectField` inside a modal. */
+    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 }: Props<T>) => JSX.Element;
+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;
 export default SelectField;

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

@@ -1,8 +1,7 @@
 declare type GetSelectStylesControls = {
     isInvalid: boolean;
-    hasPrefix?: boolean;
     asToolbarFilter?: boolean;
     wrapToNextLine?: boolean;
 };
-export declare const getSelectStyles: ({ isInvalid, hasPrefix, asToolbarFilter, wrapToNextLine }: GetSelectStylesControls) => Object;
+export declare const getSelectStyles: ({ isInvalid, asToolbarFilter, wrapToNextLine }: GetSelectStylesControls) => Object;
 export {};

package/dist/forms/TextField/TextField.d.ts

@@ -23,5 +23,5 @@ declare type Props = {
     suffix?: React.ReactNode;
     value?: string;
 };
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
-export default _default;
+declare const TextField: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export default TextField;

package/dist/index.css

@@ -784,6 +784,7 @@ Please ask a designer if you have questions about which colours to use.
 ._azbIG {
   width: 40px;
   padding: 16px;
+  box-sizing: content-box;
 }
 /*********************************
 For new colours, see _colors.scss.
@@ -830,6 +831,7 @@ Please ask a designer if you have questions about which colours to use.
 
 ._LoIvx {
   width: 40px;
+  box-sizing: content-box;
 }
 
 ._3VjFP {
@@ -1151,6 +1153,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 ._20YOA:disabled {
   background-color: #f8f8f8;
+  color: #929292;
 }
 
 ._3kUSh {
@@ -1161,6 +1164,7 @@ Please ask a designer if you have questions about which colours to use.
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
+  color: #929292;
 }
 
 ._QXJOD {
@@ -1306,7 +1310,7 @@ input:checked ~ ._1i2AX {
 input:disabled + ._1i2AX {
   background-color: #f8f8f8;
   border-color: #f8f8f8;
-  color: #c1c1c1;
+  color: #929292;
 }
 input:disabled:checked + ._1i2AX {
   background-color: #e16840;
@@ -1457,6 +1461,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 ._18Rzv:disabled {
   background-color: #f8f8f8;
+  color: #929292;
 }
 
 ._3eD7t {
@@ -1467,6 +1472,7 @@ Please ask a designer if you have questions about which colours to use.
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
+  color: #929292;
 }
 
 ._-MgeO {
@@ -1542,6 +1548,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 ._1btTx:disabled, ._1Sc9D:disabled {
   background-color: #f8f8f8;
+  color: #929292;
 }
 
 ._2feYp, ._2SNat {
@@ -1552,6 +1559,7 @@ Please ask a designer if you have questions about which colours to use.
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
+  color: #929292;
 }
 
 ._27J43, ._3eTNi {
@@ -2032,6 +2040,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 ._25rf7:disabled, ._3qVhi input:disabled, ._3qVhi:disabled {
   background-color: #f8f8f8;
+  color: #929292;
 }
 
 ._2M9Ud {
@@ -2042,6 +2051,7 @@ Please ask a designer if you have questions about which colours to use.
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
+  color: #929292;
 }
 
 ._foqL0 {
@@ -2059,6 +2069,9 @@ Please ask a designer if you have questions about which colours to use.
 ._3df9R {
   border-color: #e76767 !important;
 }
+._2Nkht {
+  background-color: #f8f8f8;
+}
 ._3qVhi input {
   border: none;
   min-width: 20px;

package/dist/index.js

@@ -1807,9 +1807,6 @@ var IconGrinBeam = function IconGrinBeam(props) {
     "data-testid": "icon-grin-beam",
     style: getIconStyles(props)
   }, props), React__default.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h20v20H0z"
-  }), React__default.createElement("path", {
     d: "M4.746 9.676a.335.335 0 0 0 .375-.145l.383-.664c.31-.535.774-.844 1.27-.844s.96.309 1.27.844l.383.664c.085.145.25.184.375.145a.314.314 0 0 0 .23-.324c-.133-1.645-1.298-2.79-2.258-2.79S4.65 7.707 4.516 9.352a.317.317 0 0 0 .23.324Zm6.452 0a.335.335 0 0 0 .375-.145l.383-.664c.31-.535.774-.844 1.27-.844s.96.309 1.27.844l.383.664c.085.145.25.184.375.145a.314.314 0 0 0 .23-.324c-.133-1.645-1.299-2.79-2.258-2.79-.96 0-2.125 1.145-2.258 2.79a.317.317 0 0 0 .23.324Zm3.766 2.855c-1.218.38-3.029.594-4.964.594-1.935 0-3.746-.215-4.964-.594a.662.662 0 0 0-.617.121.62.62 0 0 0-.213.579c.37 2.148 3.354 3.644 5.798 3.644s5.423-1.496 5.798-3.645a.624.624 0 0 0-.213-.578.66.66 0 0 0-.625-.12ZM10 15.625c-1.411 0-3.105-.637-3.972-1.574 2.319.422 5.63.422 7.948 0-.871.937-2.565 1.574-3.976 1.574ZM10 .312C4.476.313 0 4.649 0 10s4.476 9.688 10 9.688S20 15.351 20 10 15.524.312 10 .312Zm0 18.125c-4.802 0-8.71-3.785-8.71-8.437 0-4.652 3.908-8.438 8.71-8.438 4.802 0 8.71 3.786 8.71 8.438 0 4.652-3.908 8.438-8.71 8.438Z",
     fill: "currentColor"
   }));
@@ -2908,7 +2905,6 @@ var GREY200 = '#e0e0e0';
 var GREY300 = '#c1c1c1';
 var GREY400 = '#929292';
 var GREY500 = '#555555';
-var GREY600 = '#464646';
 
 var SORT_ORDER = {
   ASC: 'asc',
@@ -3593,10 +3589,11 @@ var Field = function Field(_ref) {
       caption = _ref.caption,
       error = _ref.error,
       children = _ref.children;
+  var shouldRenderLabel = label || typeof label === 'string';
   return React__default.createElement(Stack, {
     space: 8,
     flexItems: true
-  }, label !== undefined && React__default.createElement(Label, {
+  }, shouldRenderLabel && React__default.createElement(Label, {
     htmlFor: id
   }, label), children, caption && React__default.createElement(Caption, {
     fieldId: id
@@ -3910,7 +3907,7 @@ var TextAreaField = function TextAreaField(_ref) {
 
 var styles$j = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
 
-var TextField = function TextField(_ref, ref) {
+var TextFieldElement = function TextFieldElement(_ref, ref) {
   var _classnames;
 
   var autoComplete = _ref.autoComplete,
@@ -3976,7 +3973,7 @@ var TextField = function TextField(_ref, ref) {
   })));
 };
 
-var TextField$1 = React.forwardRef(TextField);
+var TextField = React.forwardRef(TextFieldElement);
 
 var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   var name = _ref.name,
@@ -4467,8 +4464,6 @@ var PasswordField = function PasswordField(_ref) {
 
 var getSelectStyles = function getSelectStyles(_ref) {
   var isInvalid = _ref.isInvalid,
-      _ref$hasPrefix = _ref.hasPrefix,
-      hasPrefix = _ref$hasPrefix === void 0 ? false : _ref$hasPrefix,
       _ref$asToolbarFilter = _ref.asToolbarFilter,
       asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
       _ref$wrapToNextLine = _ref.wrapToNextLine,
@@ -4480,23 +4475,24 @@ var getSelectStyles = function getSelectStyles(_ref) {
         flexWrap: wrapToNextLine ? 'wrap' : 'nowrap'
       });
     },
-    container: function container(base) {
+    container: function container(base, state) {
       return Object.assign({}, base, {
         flex: '1',
         fontFamily: FONT_FAMILY,
-        minWidth: '64px'
+        minWidth: '64px',
+        backgroundColor: state.isDisabled && !asToolbarFilter ? GREY100 : WHITE,
+        position: 'initial'
       });
     },
     control: function control(base, state) {
       return Object.assign({}, base, {
         borderColor: state.isFocused ? EGGPLANT400 : borderColor,
-        color: state.isDisabled ? GREY200 : GREY500,
+        color: state.isDisabled ? GREY400 : GREY500,
         boxShadow: state.isFocused ? "0 0 8px " + EGGPLANT300 : 'none',
         '&:hover': 'none',
-        backgroundColor: state.isDisabled ? GREY100 : state.isFocused ? WHITE : WHITE,
+        background: 'none',
         fontSize: '14px',
         cursor: 'pointer',
-        background: hasPrefix && 'transparent',
         border: asToolbarFilter && 'none'
       });
     },
@@ -4505,9 +4501,9 @@ var getSelectStyles = function getSelectStyles(_ref) {
         display: 'none'
       };
     },
-    placeholder: function placeholder(base) {
+    placeholder: function placeholder(base, state) {
       return _extends({}, base, {
-        color: GREY300,
+        color: state.isDisabled && asToolbarFilter ? GREY300 : GREY400,
         marginRight: 0,
         position: 'static',
         transform: 'initial',
@@ -4526,7 +4522,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     singleValue: function singleValue(base, state) {
       return Object.assign({}, base, {
-        color: state.isDisabled ? GREY300 : null,
+        color: state.isDisabled ? GREY400 : null,
         marginRight: 0,
         position: 'static',
         transform: 'initial',
@@ -4537,14 +4533,14 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     dropdownIndicator: function dropdownIndicator(base, state) {
       return Object.assign({}, base, {
-        color: state.isDisabled ? GREY200 : GREY400,
+        color: state.isDisabled ? GREY300 : GREY400,
         padding: '8px'
       });
     },
     option: function option(base, state) {
       return Object.assign({}, base, {
         backgroundColor: state.isDisabled ? null : state.isSelected ? EGGPLANT200 : state.isFocused ? GREY100 : WHITE,
-        color: state.isDisabled ? GREY300 : state.isSelected ? EGGPLANT700 : GREY500,
+        color: state.isDisabled ? GREY400 : state.isSelected ? EGGPLANT700 : GREY500,
         cursor: 'pointer',
         fontFamily: FONT_FAMILY,
         fontSize: '14px'
@@ -4559,14 +4555,15 @@ var getSelectStyles = function getSelectStyles(_ref) {
       return Object.assign({}, base, {
         ':hover': {
           backgroundColor: 'none',
-          color: GREY600
+          color: GREY500
         }
       });
     },
     clearIndicator: function clearIndicator(base) {
       return Object.assign({}, base, {
+        color: GREY400,
         ':hover': {
-          color: GREY600
+          color: GREY500
         }
       });
     },
@@ -4607,7 +4604,9 @@ var MultiSelectField = function MultiSelectField(_ref) {
       placeholder = _ref.placeholder,
       disabled = _ref.disabled,
       _ref$closeOnSelect = _ref.closeOnSelect,
-      closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect;
+      closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect,
+      _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
+      menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll;
   var controllers = useMultiSelectFieldControllers({
     name: name,
     id: inputId,
@@ -4645,6 +4644,18 @@ var MultiSelectField = function MultiSelectField(_ref) {
           CustomComponent: UserCustomOption
         }, props));
       } : Select.components.Option
+    },
+    menuShouldScrollIntoView: menuShouldScrollIntoView,
+    menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
+    menuPosition: menuShouldScrollIntoView ? 'absolute' : 'fixed',
+    closeMenuOnScroll: function closeMenuOnScroll(e) {
+      if (menuShouldScrollIntoView || !e.target) {
+        return false;
+      }
+
+      var target = e.target;
+      var isScrollingTheMenu = typeof target.className === 'string' && target.className.includes('MenuList');
+      return !isScrollingTheMenu;
     }
   }));
 };
@@ -4753,7 +4764,9 @@ var SelectField = function SelectField(_ref) {
       disabled = _ref.disabled,
       prefix = _ref.prefix,
       _ref$asToolbarFilter = _ref.asToolbarFilter,
-      asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter;
+      asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
+      _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
+      menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll;
   var controllers = useSelectFieldControllers({
     name: name,
     id: inputId,
@@ -4780,7 +4793,6 @@ var SelectField = function SelectField(_ref) {
     placeholder: placeholder,
     styles: getSelectStyles({
       isInvalid: hasError,
-      hasPrefix: !!prefix,
       asToolbarFilter: asToolbarFilter
     }),
     menuPortalTarget: document.body,
@@ -4797,6 +4809,18 @@ var SelectField = function SelectField(_ref) {
           CustomPrefixComponent: SelectedOptionPrefix
         }, props));
       } : Select.components.Control
+    },
+    menuShouldScrollIntoView: menuShouldScrollIntoView,
+    menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
+    menuPosition: menuShouldScrollIntoView ? 'absolute' : 'fixed',
+    closeMenuOnScroll: function closeMenuOnScroll(e) {
+      if (menuShouldScrollIntoView || !e.target) {
+        return false;
+      }
+
+      var target = e.target;
+      var isScrollingTheMenu = typeof target.className === 'string' && target.className.includes('MenuList');
+      return !isScrollingTheMenu;
     }
   })));
 };
@@ -5042,7 +5066,7 @@ var useRangeFieldControllers = function useRangeFieldControllers(_ref) {
   return initialControllers;
 };
 
-var styles$s = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R"};
+var styles$s = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
 
 var FromDate = function FromDate(_ref) {
   var name = _ref.name,
@@ -5173,7 +5197,7 @@ var ToDate = function ToDate(_ref, ref) {
 var ToDate$1 = React.forwardRef(ToDate);
 
 var DateRangeField = function DateRangeField(_ref) {
-  var _classnames;
+  var _classnames, _classnames2;
 
   var name = _ref.name,
       inputId = _ref.id,
@@ -5212,7 +5236,7 @@ var DateRangeField = function DateRangeField(_ref) {
       start = _controllers$value.start,
       end = _controllers$value.end;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$s['date-range-field'], (_classnames = {}, _classnames[styles$s['date-range-field--invalid']] = hasError, _classnames))
+    className: classnames(styles$s['date-range-field'], (_classnames = {}, _classnames[styles$s['date-range-field--invalid']] = hasError, _classnames), (_classnames2 = {}, _classnames2[styles$s['date-range-field--disabled']] = disabled, _classnames2))
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
     color: GREY400
@@ -5852,7 +5876,7 @@ exports.SelectField = SelectField;
 exports.Spinner = Spinner;
 exports.Stack = Stack;
 exports.TextAreaField = TextAreaField;
-exports.TextField = TextField$1;
+exports.TextField = TextField;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip$1;
 exports.WeekField = WeekField;