@7shifts/sous-chef 2.0.0 → 2.1.0

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/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

@@ -1151,6 +1151,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 ._20YOA:disabled {
   background-color: #f8f8f8;
+  color: #929292;
 }
 
 ._3kUSh {
@@ -1161,6 +1162,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 +1308,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 +1459,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 ._18Rzv:disabled {
   background-color: #f8f8f8;
+  color: #929292;
 }
 
 ._3eD7t {
@@ -1467,6 +1470,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 +1546,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 +1557,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 +2038,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 +2049,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 +2067,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

@@ -2908,7 +2908,6 @@ var GREY200 = '#e0e0e0';
 var GREY300 = '#c1c1c1';
 var GREY400 = '#929292';
 var GREY500 = '#555555';
-var GREY600 = '#464646';
 
 var SORT_ORDER = {
   ASC: 'asc',
@@ -3593,10 +3592,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 +3910,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 +3976,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 +4467,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 +4478,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 +4504,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 +4525,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 +4536,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 +4558,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
         }
       });
     },
@@ -4780,7 +4780,6 @@ var SelectField = function SelectField(_ref) {
     placeholder: placeholder,
     styles: getSelectStyles({
       isInvalid: hasError,
-      hasPrefix: !!prefix,
       asToolbarFilter: asToolbarFilter
     }),
     menuPortalTarget: document.body,
@@ -5042,7 +5041,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 +5172,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 +5211,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 +5851,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;