@7shifts/sous-chef 3.27.0 → 3.28.0

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

@@ -24,7 +24,9 @@ declare type Props<T> = {
     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;
+    creatableButton?: React.ReactNode;
+    onCreate?: (option: string) => void;
 };
 /** 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, isSearchable }: 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, creatableButton, onCreate }: Props<T>) => JSX.Element;
 export default MultiSelectField;

package/dist/index.css

@@ -1481,6 +1481,17 @@ h5._3CIA3 {
 ._3FZlB {
   pointer-events: none;
 }
+._2qNmx {
+  position: absolute;
+  width: 38px;
+  height: 38px;
+  top: 8px;
+  right: 8px;
+}
+
+._2z7qG {
+  text-transform: uppercase;
+}
 ._XFvYB {
   display: flex;
   gap: 8px;
@@ -1756,11 +1767,12 @@ h5._3CIA3 {
   background: var(--color-white);
   overflow: auto;
   outline: none;
-  padding: 32px;
+  padding: 32px 24px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-  min-height: 200px;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+  min-height: 266px;
 }
 ._wQQ_2 > form {
   display: contents;
@@ -1779,11 +1791,13 @@ h5._3CIA3 {
   color: var(--color-grey-500);
   font-weight: 600;
   font-family: "Proxima Nova", sans-serif;
+  padding: 0;
 }
 ._2zYre {
   display: flex;
   justify-content: end;
   margin-bottom: -20px;
+  margin-right: 8px;
   z-index: calc(var(--z-index-base) + 2);
 }
 
@@ -1804,8 +1818,8 @@ h5._3CIA3 {
   font-size: 14px;
   line-height: 16px;
   position: relative;
+  padding: 0 8px 0 8px;
 }
-
 ._2ErCP {
   z-index: var(--z-index-base);
   background: #fff no-repeat;
@@ -1826,12 +1840,15 @@ h5._3CIA3 {
   margin: -30px 0 0;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%, #fff);
 }
+._3NET7 {
+  padding-bottom: 8px;
+}
 ._LKOr5 {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-top: 40px;
+  padding: 32px 8px 0 8px;
 }
 
 ._Qktd- {
@@ -2210,6 +2227,266 @@ input:disabled + ._2mA8e::after {
 ._3Mm-v._3Mm-v {
   border-bottom-right-radius: 8px;
 }
+@-webkit-keyframes _3FIb5 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes _3FIb5 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+._25lPo {
+  position: relative;
+  overflow: auto;
+  white-space: nowrap;
+}
+._25lPo table {
+  table-layout: auto;
+}
+._2S3Jq:not(._RfN1H) table tr > td:first-of-type {
+  transform-style: preserve-3d;
+}
+._2S3Jq:not(._RfN1H) table tr > td:first-of-type::before {
+  content: "";
+  width: 10px;
+  height: 100%;
+  position: absolute;
+  z-index: 0;
+  transform: translateZ(-1px);
+  top: 0;
+  -webkit-animation: _3FIb5 1s;
+          animation: _3FIb5 1s;
+  box-shadow: -7px 12px 11px 3px #888;
+  right: 0;
+}
+._2S3Jq._RfN1H table tr > td:first-of-type {
+  border-right: 4px solid var(--color-grey-200);
+}
+._1Jszb table thead tr th:first-of-type {
+  position: sticky;
+  left: 0;
+  background-color: var(--color-white);
+}
+._1Jszb table tbody tr td:first-of-type {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background-color: var(--color-white);
+}
+._1Jszb table tfoot tr td:first-of-type {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+._1Jszb table tbody tr:first-of-type > td:first-of-type::after {
+  content: "";
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  background: var(--color-white);
+  transform: translateZ(-1px);
+  left: -1px;
+  top: -1px;
+}
+._Zq6VQ:not(._RfN1H) table tr > td:last-of-type {
+  transform-style: preserve-3d;
+}
+._Zq6VQ:not(._RfN1H) table tr > td:last-of-type::before {
+  content: "";
+  width: 10px;
+  height: 100%;
+  position: absolute;
+  z-index: 0;
+  transform: translateZ(-1px);
+  top: 0;
+  -webkit-animation: _3FIb5 1s;
+          animation: _3FIb5 1s;
+  box-shadow: 7px 12px 11px 3px #888;
+  left: 0;
+}
+._Zq6VQ._RfN1H table tr > td:last-of-type {
+  border-left: 4px solid var(--color-grey-200);
+}
+._2riDu table thead tr th:last-of-type {
+  position: sticky;
+  right: 0;
+  background-color: var(--color-white);
+}
+._2riDu table tbody tr td:last-of-type {
+  position: sticky;
+  right: 0;
+  z-index: 1;
+  background-color: var(--color-white);
+}
+._2riDu table tfoot tr td:last-of-type {
+  position: sticky;
+  right: 0;
+  z-index: 1;
+}
+._2riDu table tbody tr:first-of-type > td:last-of-type::after {
+  content: "";
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  background: var(--color-white);
+  transform: translateZ(-1px);
+  right: -1px;
+  top: -1px;
+}
+._2riDu:not(._1735l) table tbody tr:last-of-type > td:last-of-type::after {
+  content: "";
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  background: var(--color-white);
+  transform: translateZ(-1px);
+  right: -1px;
+  bottom: -1px;
+}
+._1Jszb:not(._1735l) table tbody tr:last-of-type > td:first-of-type::after {
+  content: "";
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  background: var(--color-white);
+  transform: translateZ(-1px);
+  left: -1px;
+  bottom: -1px;
+}
+._1735l._2riDu table tfoot tr:last-of-type > td:last-of-type::after {
+  content: "";
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  background: var(--color-white);
+  transform: translateZ(-1px);
+  right: -1px;
+  bottom: -1px;
+}
+._1735l._1Jszb table tfoot tr:last-of-type > td:first-of-type::after {
+  content: "";
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  background: var(--color-white);
+  transform: translateZ(-1px);
+  left: -1px;
+  bottom: -1px;
+}
+@-webkit-keyframes _22OAU {
+  from {
+    box-shadow: inset 5px 0px 0px -5px #88888830;
+  }
+  to {
+    box-shadow: inset 5px 0px 9px -5px #88888830;
+  }
+}
+@keyframes _22OAU {
+  from {
+    box-shadow: inset 5px 0px 0px -5px #88888830;
+  }
+  to {
+    box-shadow: inset 5px 0px 9px -5px #88888830;
+  }
+}
+@-webkit-keyframes _2i_F1 {
+  from {
+    box-shadow: inset -5px 0px 0px -5px #88888830;
+  }
+  to {
+    box-shadow: inset -5px 0px 9px -5px #88888830;
+  }
+}
+@keyframes _2i_F1 {
+  from {
+    box-shadow: inset -5px 0px 0px -5px #88888830;
+  }
+  to {
+    box-shadow: inset -5px 0px 9px -5px #88888830;
+  }
+}
+._3S_6c {
+  height: calc(100% - 28px);
+  width: 20px;
+  position: absolute;
+  display: block;
+  transform-style: preserve-3d;
+  z-index: 2;
+  box-sizing: border-box;
+}
+._3Z4CV {
+  height: 100%;
+}
+._2Ww7z {
+  border: 1px solid var(--color-grey-200);
+  border-right: 0;
+  border-bottom-left-radius: 8px;
+  border-top-left-radius: 8px;
+  left: 0;
+  bottom: 0;
+  box-shadow: inset 5px 0px 9px -5px #88888830;
+  -webkit-animation: _22OAU 1s;
+          animation: _22OAU 1s;
+}
+._2Ww7z::after {
+  content: "";
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  background: var(--color-white);
+  transform: translateZ(-1px);
+  left: -1px;
+  top: -1px;
+}
+._2Ww7z::before {
+  content: "";
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  background: var(--color-white);
+  transform: translateZ(-1px);
+  left: -1px;
+  bottom: -1px;
+}
+._3UwN8 {
+  border: 1px solid var(--color-grey-200);
+  border-left: 0;
+  border-bottom-right-radius: 8px;
+  border-top-right-radius: 8px;
+  right: 0;
+  bottom: 0;
+  box-shadow: inset -5px 0px 9px -5px #88888830;
+  -webkit-animation: _2i_F1 1s;
+          animation: _2i_F1 1s;
+}
+._3UwN8::after {
+  content: "";
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  background: var(--color-white);
+  transform: translateZ(-1px);
+  right: -1px;
+  top: -1px;
+}
+._3UwN8::before {
+  content: "";
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  background: var(--color-white);
+  transform: translateZ(-1px);
+  right: -1px;
+  bottom: -1px;
+}
 ._1cDCR {
   flex: 1;
   display: "flex";