@7shifts/sous-chef 3.7.0 → 3.9.0

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

@@ -22,7 +22,9 @@ declare type Props<T> = {
     /** 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;
     testId?: string;
+    /** This is to allow disable the seach functionality. Use it just in some edge-cases, for example in touch devices when the user clicks on the field it opens a virtual keyboard to search, sometimes that virtual keyboard taks much space then passing `isSearchable={false}` prevents opening it. */
+    isSearchable?: 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, noOptionsMessage, disabled, closeOnSelect, menuShouldScrollIntoView, testId }: 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, testId, isSearchable }: Props<T>) => JSX.Element;
 export default MultiSelectField;

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

@@ -30,6 +30,8 @@ export declare type Props<T> = {
     testId?: string;
     creatableButton?: React.ReactNode;
     onCreate?: (option: string) => void;
+    /** This is to allow disable the seach functionality. Use it just in some edge-cases, for example in touch devices when the user clicks on the field it opens a virtual keyboard to search, sometimes that virtual keyboard taks much space then passing `isSearchable={false}` prevents opening it. */
+    isSearchable?: boolean;
 };
 /** Component to make possible choose from a predefined options. */
 declare const SelectField: <T extends unknown>(props: Props<T>) => JSX.Element;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Props } from './SelectField';
-export declare const useSelectField: <T extends unknown>({ asToolbarFilter, caption, disabled, error, id, isClearable, label, menuShouldScrollIntoView, name, noOptionsMessage, options, onBlur, onChange, placeholder, value, defaultValue, CustomOption: UserCustomOption, SelectedOptionPrefix, testId, creatableButton, onCreate }: Props<T>) => {
+export declare const useSelectField: <T extends unknown>({ asToolbarFilter, caption, disabled, error, id, isClearable, label, menuShouldScrollIntoView, name, noOptionsMessage, options, onBlur, onChange, placeholder, value, defaultValue, CustomOption: UserCustomOption, SelectedOptionPrefix, testId, creatableButton, onCreate, isSearchable }: Props<T>) => {
     selectProps: Pick<import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>>, import("react").ReactText> & import("react-select/src/stateManager").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>> & import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>>;
     fieldProps: {
         caption: import("react").ReactNode;

package/dist/index.css

@@ -784,13 +784,6 @@ Just for future references:
 ._3EHwm {
   padding-left: 20px;
 }
-._2GGMG {
-  display: flex;
-}
-._2GGMG:not(:last-child):not(._1ZCir) {
-  border-bottom: 1px solid var(--color-grey-200);
-}
-
 ._2GGMG:focus:not(:focus-visible) {
   /* Remove the focus indicator on mouse-focus for browsers
      that do support :focus-visible */
@@ -804,50 +797,17 @@ Just for future references:
   background-color: var(--color-grey-100);
 }
 
-._1ZCir {
-  border: 1px solid var(--color-eggplant-400);
-  box-sizing: border-box;
-  box-shadow: 0 0 8px var(--color-eggplant-300);
-}
-._1ZCir:first-child {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-._1ZCir:first-child:not(:last-child) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-._1ZCir:last-child {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
-._1ZCir:last-child:not(:first-child) {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+._2GGMG:first-of-type > td {
+  border-top: 1px solid var(--color-grey-200);
 }
 
-._kcNkt {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  position: relative;
-}
-._2obax {
-  padding: 16px;
-}
-._bLVPl {
-  flex-direction: unset;
-  justify-content: flex-end;
-}
-._3PWfD:not(:last-child) {
-  border-right: 1px solid var(--color-grey-200);
+._1ZCir td {
+  background-color: var(--color-eggplant-100);
 }
-
-._1IGwu {
-  width: 40px;
-  padding: 16px;
-  box-sizing: content-box;
-  flex-flow: row nowrap;
+._3Iab2 {
+  white-space: nowrap;
+  width: 100%;
+  display: flex;
   justify-content: flex-end;
 }
 ._v0AEt {
@@ -876,84 +836,51 @@ Just for future references:
 ._IRJ4j:hover {
   background: var(--color-grey-100);
 }
-._2ZgmC {
-  display: flex;
-  font-size: 12px;
-  font-weight: 600;
-  font-family: "Proxima Nova", sans-serif;
-  color: var(--color-grey-500);
-  padding: 0px 17px 8px 17px;
-}
-
-._3slLU {
-  display: flex;
-  align-items: center;
-  line-height: 21px;
-}
-._3slLU:not(._3slLU:first-child) {
-  padding-left: 16px;
-}
-._3slLU:not(._3slLU:last-child) {
-  padding-right: 16px;
-}
-._1-26z {
-  cursor: pointer;
-}
-._1vCLo {
-  justify-content: flex-end;
+._2Ybjx {
+  position: relative;
+  border-bottom: 1px solid var(--color-grey-200);
+  padding: 16px;
+  word-break: break-word;
+  -webkit-hyphens: auto;
+      -ms-hyphens: auto;
+          hyphens: auto;
 }
-
-._3slLU:focus:not(:focus-visible) {
-  /* Remove the focus indicator on mouse-focus for browsers
-     that do support :focus-visible */
-  outline: none;
+._2Ybjx:first-of-type {
+  border-left: 1px solid var(--color-grey-200);
 }
-
-._2i1wY {
-  width: 40px;
-  box-sizing: content-box;
-}
-
-._BLrNe {
-  display: inline-block;
-  padding: 0 8px;
-  line-height: 1em;
+._2Ybjx:last-of-type {
+  border-right: 1px solid var(--color-grey-200);
 }
-
-._CT4Lp {
-  border: 1px solid var(--color-grey-200);
-  border-radius: 8px;
-  font-family: "Proxima Nova", sans-serif;
-  font-size: 14px;
+._5KXHH {
+  padding: 0;
 }
-
-._398L3 {
-  background: var(--color-grey-100);
-  font-weight: 600;
+._2-I0j:not(:last-child) {
+  border-right: 1px solid var(--color-grey-200);
 }
-
-._2smmY {
-  margin-top: 20px;
-  font-family: "Proxima Nova", sans-serif;
+._D73Vx {
+  background: var(--color-radish-100);
+  color: var(--color-radish-400);
 }
-._2Ybjx {
-  padding: 16px;
-  align-items: center;
-  display: flex;
-  width: 100%;
+._3A9-M {
   height: 100%;
-  box-sizing: border-box;
+  display: flex;
+  align-items: center;
 }
-._1cXj6 {
-  width: 100%;
+._17Km7 {
   justify-content: flex-end;
 }
-._D73Vx {
-  border-color: var(--color-radish-400);
-  background: var(--color-radish-100);
-  color: var(--color-radish-400);
+._2c6KQ {
   justify-content: space-between;
 }
+._2hIl3 {
+  width: 16px;
+}
+._8Uhyd {
+  margin-left: 4px;
+}
+._3X51R {
+  margin-right: 4px;
+}
 ._2puqJ {
   position: fixed;
   top: 0px;
@@ -1679,6 +1606,215 @@ Just for future references:
 ._3Mm-v._3Mm-v {
   border-bottom-right-radius: 8px;
 }
+._3qoNq {
+  position: relative;
+}
+
+._2HcDV {
+  position: relative;
+}
+._3dowz > table > thead, ._3dowz > table > tfoot {
+  position: sticky;
+  background-color: white;
+  z-index: 1;
+}
+._3dowz > table > thead {
+  top: 0;
+}
+._3dowz > table > tfoot {
+  bottom: 0;
+}
+
+._tGpUv {
+  width: 100%;
+  height: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+  border: 0;
+}
+._3VePT {
+  table-layout: fixed;
+}
+
+._2ZgmC {
+  text-align: left;
+}
+
+._3slLU {
+  line-height: 20px;
+  padding: 0 16px 8px 16px;
+  background-color: unset;
+  color: var(--color-grey-500);
+  font-size: 12px;
+  font-weight: 600;
+  font-family: "Proxima Nova", sans-serif;
+  border: 0;
+}
+._1jb-H {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+._2Np60 {
+  justify-content: flex-end;
+}
+._1-26z {
+  cursor: pointer;
+}
+
+._3slLU:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+     that do support :focus-visible */
+  outline: none;
+}
+
+._2i1wY {
+  box-sizing: content-box;
+}
+
+._BLrNe {
+  display: inline-block;
+  padding-left: 8px;
+  line-height: 1em;
+}
+
+._CT4Lp {
+  border: 1px solid var(--color-grey-200);
+  border-radius: 8px;
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 14px;
+}
+._CT4Lp tr:first-of-type > td:first-of-type {
+  border-top-left-radius: 8px;
+}
+._CT4Lp tr:first-of-type > td:last-of-type {
+  border-top-right-radius: 8px;
+}
+._CT4Lp tr:last-of-type > td:first-of-type {
+  border-bottom-left-radius: 8px;
+}
+._CT4Lp tr:last-of-type > td:last-of-type {
+  border-bottom-right-radius: 8px;
+}
+._1wU1R tr:last-of-type > td:first-of-type {
+  border-bottom-left-radius: 0;
+}
+._1wU1R tr:last-of-type > td:last-of-type {
+  border-bottom-right-radius: 0;
+}
+
+._398L3 {
+  font-weight: 600;
+  font-size: 14px;
+}
+._398L3 tr td {
+  background: var(--color-grey-100);
+}
+._398L3 tr td:first-of-type {
+  border-left: 1px solid var(--color-grey-200);
+}
+._398L3 tr td:last-of-type {
+  border-right: 1px solid var(--color-grey-200);
+}
+._398L3 tr:first-of-type td {
+  border-top: 0;
+}
+._398L3 tr:last-of-type td:first-of-type {
+  border-bottom-left-radius: 8px;
+}
+._398L3 tr:last-of-type td:last-of-type {
+  border-bottom-right-radius: 8px;
+}
+
+._2smmY {
+  margin-top: 20px;
+  font-family: "Proxima Nova", sans-serif;
+}
+._1zw4R {
+  width: 100%;
+  height: 20px;
+  border: 1px solid var(--color-grey-200);
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+}
+._2vWl5 {
+  top: 28px;
+  border-bottom: 0;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+}
+._397Yd {
+  bottom: 0;
+  border-top: 0;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+._AGTVL {
+  width: 8px;
+  height: 8px;
+  overflow: hidden;
+  position: absolute;
+  left: -1px;
+}
+._AGTVL::before {
+  content: "";
+  display: block;
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  border-radius: 50%;
+  left: 0;
+}
+._3wzKK {
+  top: -1px;
+}
+._3wzKK::before {
+  top: 0;
+  box-shadow: -6px -6px 0 0 white;
+}
+._2pJrs {
+  bottom: -1px;
+}
+._2pJrs::before {
+  bottom: 0;
+  box-shadow: -6px 6px 0 0 white;
+}
+._vh4go {
+  width: 8px;
+  height: 8px;
+  overflow: hidden;
+  position: absolute;
+  right: -1px;
+}
+._vh4go::before {
+  content: "";
+  display: block;
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  border-radius: 50%;
+  right: 0;
+}
+._2sj0a {
+  top: -1px;
+}
+._2sj0a::before {
+  top: 0;
+  box-shadow: 6px -6px 0 0 white;
+}
+._1s8kO {
+  bottom: -1px;
+}
+._1s8kO::before {
+  bottom: 0;
+  box-shadow: 6px 6px 0 0 white;
+}
+._94pbt > td {
+  border: 1px solid var(--color-grey-200);
+}
 ._2X-yg {
   width: 272px;
 }
@@ -3204,6 +3340,7 @@ input:disabled + ._1tMq-::after {
   max-width: fit-content;
   display: inline-block;
   text-align: center;
+  white-space: nowrap;
 }
 ._23q4Y::first-letter {
   text-transform: capitalize;