@7shifts/sous-chef 3.68.0 → 3.69.0

package/dist/forms/PillSelectField/CreatableOption/CreatableOption.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    name: string;
+    createOptionLabel: React.ReactNode;
+    onCreate?: (optionLabel: string) => void;
+    /** This is used for setting the data-testid */
+    testId?: string;
+};
+/** CreatableOption element for PillSelectField. */
+declare const CreatableOption: ({ name, createOptionLabel, onCreate, testId }: Props) => React.JSX.Element;
+export default CreatableOption;

package/dist/forms/PillSelectField/CreatableOption/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CreatableOption';

package/dist/forms/PillSelectField/PillSelectField.d.ts

@@ -1,19 +1,22 @@
 import React from 'react';
-import type { SelectOption } from '../SelectField/types';
+import type { PillSelectOption } from './types';
 type Props<T> = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the pill select input */
     id?: string;
-    value?: SelectOption<T>[];
-    options: SelectOption<T>[];
-    onChange?: (e: SelectOption<T>[]) => void;
+    value?: PillSelectOption<T>[];
+    options: PillSelectOption<T>[];
+    onChange?: (e: PillSelectOption<T>[]) => void;
     label?: React.ReactNode;
     caption?: React.ReactNode;
     error?: React.ReactNode;
     disabled?: boolean;
     /** This is used for setting the data-testid */
     testId?: string;
+    onCreate?: (optionLabel: string) => void;
+    onRemoveOption?: (remainingOptions: PillSelectOption<T>[]) => void;
+    createOptionLabel?: React.ReactNode;
 };
 /** PillSelectField form element. */
-declare const PillSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, label, caption, error, disabled, testId }: Props<T>) => React.JSX.Element;
+declare const PillSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, label, caption, error, disabled, testId, onCreate, onRemoveOption, createOptionLabel }: Props<T>) => React.JSX.Element;
 export default PillSelectField;

package/dist/forms/PillSelectField/types.d.ts

@@ -0,0 +1,4 @@
+import type { SelectOption } from '../SelectField/types';
+export type PillSelectOption<T> = SelectOption<T> & {
+    isRemovable?: boolean;
+};

package/dist/forms/index.d.ts

@@ -26,6 +26,7 @@ import NumberField from './NumberField';
 export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, RadioGroupField, RadioGroupOption, RadioGroupBoxOption, PasswordField, MultiSelectField, SelectField, AsyncSelectField, DateField, DateRangeField, WeekField, TimeField, TimeRangeField, CurrencyField, PercentageField, FormSection, FormFooter, FormFeedback, PhoneField, NumberField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
 export type { PasswordCriteria } from './PasswordField/types';
 export type { SelectOption, SelectOptions, GroupOption, CustomOptionProps, SelectedOptionPrefixProps } from './SelectField/types';
+export type { PillSelectOption } from './PillSelectField/types';
 export type { AsyncSelectOptions } from './AsyncSelectField/types';
 export type { FormikType } from './Form/types';
 export type { PhoneFieldCountryCode } from './PhoneField/types';

package/dist/i18n/locales/en.json

@@ -10,6 +10,9 @@
         "createOption": "Create option",
         "createButton": "Create"
     },
+    "PillSelectField": {
+        "enterOption": "Enter an option"
+    },
     "HintModal": {
         "dontShowAgainLabel": "Don't remind me again"
     },

package/dist/i18n/locales/es.json

@@ -10,6 +10,9 @@
         "createOption": "Crear opción",
         "createButton": "Crear"
     },
+    "PillSelectField": {
+        "enterOption": "Introduce una opción"
+    },
     "HintModal": {
         "dontShowAgainLabel": "No mostrar esto otra vez"
     },

package/dist/i18n/locales/fr.json

@@ -10,6 +10,9 @@
         "createOption": "Créer une option",
         "createButton": "Créer"
     },
+    "PillSelectField": {
+        "enterOption": "Entrez une option"
+    },
     "HintModal": {
         "dontShowAgainLabel": "Ne plus afficher ce message"
     },

package/dist/index.css

@@ -3018,7 +3018,20 @@ input:disabled + ._kmvBP::after {
 ._Yti6k input:hover:not(:disabled) {
   cursor: pointer;
 }
-._JXakU {
+._Yti6k input._dw-VP {
+  opacity: unset;
+  right: unset;
+  width: calc(100% - 32px + 2px);
+  height: 18px;
+  margin: 10px 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+._Yti6k input._dw-VP:focus, ._Yti6k input._dw-VP:focus-visible {
+  outline: none;
+}
+._JXakU, ._MsKVV, ._ZxEwG {
   font-family: var(--font-family-body);
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
@@ -3028,9 +3041,9 @@ input:disabled + ._kmvBP::after {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-white);
-  padding: 8px;
-  border: 1px solid var(--color-grey-200);
+  background-color: var(--color-grey-100);
+  padding: 8px 16px;
+  border: 1px solid var(--color-grey-100);
   border-radius: 25px;
   min-height: 38px;
   min-width: 60px;
@@ -3042,31 +3055,56 @@ input:disabled + ._kmvBP::after {
   transition: background-color 0.2s, color 0.2s;
   text-transform: capitalize;
   box-sizing: border-box;
+  gap: 8px;
+}
+._MsKVV, ._ZxEwG {
+  text-transform: none;
+}
+._ZxEwG {
+  color: transparent;
+  border-color: var(--color-blackberry-400);
+}
+._Odw1V {
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  z-index: inherit;
+  z-index: calc(var(--z-index-base) + 1);
+  color: var(--color-grey-500);
 }
-input:hover ~ ._JXakU {
+._Yti6k:hover > input ~ ._JXakU, ._Yti6k:hover > input ~ ._MsKVV {
   background-color: var(--color-grey-200);
   border-color: var(--color-grey-200);
 }
-input:checked:hover ~ ._JXakU {
-  background-color: var(--color-blackberry-500);
+._Yti6k:hover > input:checked ~ ._JXakU {
+  background-color: var(--color-blackberry-100);
   border-color: var(--color-blackberry-500);
+  color: var(--color-blackberry-500);
+}
+._Yti6k:hover > input:checked ~ ._JXakU ._Odw1V {
+  color: var(--color-blackberry-500);
 }
 input:checked ~ ._JXakU {
-  background-color: var(--color-blackberry-400);
+  background-color: var(--color-blackberry-100);
   border-color: var(--color-blackberry-400);
-  color: var(--color-white);
+  color: var(--color-blackberry-400);
+}
+input:checked ~ ._JXakU ._Odw1V {
+  color: var(--color-blackberry-400);
 }
 input:disabled + ._JXakU {
   background-color: var(--color-grey-100);
   border-color: var(--color-grey-100);
-  color: var(--color-grey-400);
+  color: var(--color-grey-300);
 }
 input:disabled:checked + ._JXakU {
-  background-color: var(--color-tangerine-500);
-  border-color: var(--color-tangerine-500);
-  color: var(--color-white);
+  background-color: var(--color-blackberry-100);
+  border-color: var(--color-blackberry-300);
+  color: var(--color-blackberry-300);
 }
-input:focus-visible + ._JXakU {
+input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
   border: 1px solid var(--color-blackberry-400);
   box-shadow: 0 0 8px var(--color-blackberry-300);
   outline: none;