@7shifts/sous-chef 3.87.2-beta.0 → 3.88.0

package/dist/empty_states/EmptyStateContainer/helpers/helpers.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Helper function to check if content is already a React element
+ */
+export declare const isReactElement: (content: React.ReactNode) => content is React.ReactElement<any, string | React.JSXElementConstructor<any>>;

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

@@ -27,7 +27,8 @@ type Props<T> = {
     /** 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;
+    /** Callback when creating a new option. For grouped options, the groupLabel parameter will be provided. For non-grouped options, groupLabel will be undefined. */
+    onCreate?: (option: string, groupLabel?: string) => void;
     isClearable?: boolean;
 };
 /** Component to make possible choose from a predefined options. */

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import Button from '../../../actions/Button';
+type Props = {
+    creatableButton: React.ReactNode;
+    onClick: () => void;
+    inputValue?: string;
+    onInputValueChange?: (value: string) => void;
+    alignLeft?: boolean;
+};
+/**
+ * Shared creatable button component used in CustomMenu and CustomGroupWithCreate.
+ * Handles both string labels and custom Button elements.
+ */
+declare const CreatableButton: ({ creatableButton, onClick, inputValue, onInputValueChange, alignLeft }: Props) => React.ReactElement<typeof Button>;
+export default CreatableButton;

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+type Props = {
+    textFieldRef: React.RefObject<HTMLInputElement>;
+    onMenuInputFocus: (isFocused: boolean) => void;
+    onSubmit: () => void;
+    defaultValue?: string;
+    wrapperClassName?: string;
+    inputClassName?: string;
+    testId: string;
+};
+/**
+ * Shared input form component used in CustomMenu and CustomGroupWithCreate.
+ * Provides text input + submit button for creating new options.
+ */
+declare const CreateInputForm: ({ textFieldRef, onMenuInputFocus, onSubmit, defaultValue, wrapperClassName, inputClassName, testId }: Props) => React.JSX.Element;
+export default CreateInputForm;

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

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

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

@@ -0,0 +1,7 @@
+import React, { ComponentProps } from 'react';
+import { components } from 'react-select';
+type Props = ComponentProps<typeof components.Group> & {
+    selectProps: any;
+};
+declare function CustomGroupWithCreate(props: Props): React.JSX.Element;
+export default CustomGroupWithCreate;

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

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

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

@@ -35,7 +35,8 @@ export type Props<T> = {
     /** This is used for setting the data-testid */
     testId?: string;
     creatableButton?: React.ReactNode;
-    onCreate?: (option: string) => void;
+    /** Callback when creating a new option. For grouped options, the groupLabel parameter will be provided. For non-grouped options, groupLabel will be undefined. */
+    onCreate?: (option: string, groupLabel?: 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;
     autoFocus?: boolean;

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

@@ -26,5 +26,5 @@ export type CustomComponentsExtraProps = {
     SelectedOptionPrefix?: React.ElementType;
     creatableButton?: ReactNode;
     onMenuInputFocus: (isFocused: boolean) => void;
-    onCreate?: (option: string) => void;
+    onCreate?: (option: string, groupLabel?: string) => void;
 };

package/dist/hooks/useBackgroundColorCheck.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+type Params = {
+    ref: RefObject<HTMLElement>;
+    shouldCheck: boolean;
+};
+/**
+ * This hook checks the background color of the container element
+ * and determines if it's dark or light. It climbs up the DOM tree
+ * to find the first ancestor with a non-transparent background color.
+ *
+ * NOTE: Use this hook only when necessary, as it involves DOM access
+ * and may impact performance.
+ */
+export declare const useContainerBackgroundColorCheck: ({ ref, shouldCheck }: Params) => "dark" | "light" | undefined;
+export {};

package/dist/i18n/locales/locales/en.json

@@ -35,7 +35,19 @@
         "september": "September",
         "october": "October",
         "november": "November",
-        "december": "December"
+        "december": "December",
+        "januaryShort": "Jan",
+        "februaryShort": "Feb",
+        "marchShort": "Mar",
+        "aprilShort": "Apr",
+        "mayShort": "May",
+        "juneShort": "Jun",
+        "julyShort": "Jul",
+        "augustShort": "Aug",
+        "septemberShort": "Sep",
+        "octoberShort": "Oct",
+        "novemberShort": "Nov",
+        "decemberShort": "Dec"
     },
     "Card": {
         "dismiss": "Dismiss"

package/dist/index.css

@@ -896,13 +896,13 @@ Just for future references:
 }
 ._obtsl:disabled {
   background: transparent;
-  border-color: var(--color-outline);
-  color: var(--color-surface-on-color-disabled);
+  border-color: var(--color-surface-on-inverse-disabled);
+  color: var(--color-surface-on-inverse-disabled);
 }
 ._obtsl[aria-disabled=true] {
   background: transparent;
-  border-color: var(--color-outline);
-  color: var(--color-surface-on-color-disabled);
+  border-color: var(--color-surface-on-inverse-disabled);
+  color: var(--color-surface-on-inverse-disabled);
 }
 
 ._00jK4 {
@@ -921,13 +921,13 @@ Just for future references:
 }
 ._00jK4:disabled {
   background: transparent;
-  border-color: transparent;
-  color: var(--color-surface-on-color-disabled);
+  border-color: var(--color-surface-on-inverse-disabled);
+  color: var(--color-surface-on-inverse-disabled);
 }
 ._00jK4[aria-disabled=true] {
   background: transparent;
-  border-color: transparent;
-  color: var(--color-surface-on-color-disabled);
+  border-color: var(--color-surface-on-inverse-disabled);
+  color: var(--color-surface-on-inverse-disabled);
 }
 
 ._JPwJ7 {
@@ -1110,6 +1110,9 @@ Just for future references:
   color: var(--color-surface-on-color);
   text-decoration: underline;
 }
+._weJDR {
+  color: var(--color-surface-on-inverse);
+}
 ._sp-pT {
   position: absolute;
   list-style: none;
@@ -2093,6 +2096,9 @@ input:checked ~ ._kmvBP::after {
 input:focus-visible + ._kmvBP {
   outline: var(--color-primary-color) solid 1px;
 }
+._Id4qm input:disabled {
+  cursor: default;
+}
 input:disabled + ._kmvBP {
   background-color: var(--color-surface-container-disabled);
   border: 1px solid var(--color-outline);
@@ -3258,6 +3264,28 @@ input:disabled + ._kmvBP::after {
 ._1XpI4 {
   padding: 8px 4px 8px 4px;
 }
+._Qw267 button {
+  justify-content: flex-start;
+}
+._f9V5D button:active {
+  transform: none;
+}
+._JZG4r {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+._04fIM {
+  margin: 0;
+}
+
+._oJzDV {
+  padding: 0 4px 0 4px;
+}
+
+._hLu2D {
+  padding: 0;
+}
 ._vqC1M {
   margin-right: 28px;
 }
@@ -3321,6 +3349,42 @@ input:disabled + ._kmvBP::after {
   border-radius: 0px var(--border-radius-400) var(--border-radius-400) 0px;
   border-left: 0;
 }
+._KJp1e {
+  width: 260px;
+  padding: 12px;
+  box-sizing: border-box;
+}
+._Mn-1P {
+  font-weight: var(--p-font-weight-bold);
+  font-size: var(--font-size-normal);
+  border: none;
+  background-color: transparent;
+  color: var(--color-surface-on-color);
+  border-radius: var(--border-radius-400);
+}
+._Mn-1P:focus {
+  box-shadow: 0 0 8px 0 var(--color-shadow-active);
+  outline: none;
+}
+._5TJrn {
+  width: 52px;
+  text-align: center;
+  padding: 8px;
+  border-radius: var(--border-radius-600);
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  color: var(--color-surface-on-color);
+}
+._QxJjU {
+  color: var(--color-primary-color);
+}
+._TqBVI {
+  background-color: var(--color-primary-container);
+}
+._5TJrn:hover {
+  background-color: var(--color-primary-container);
+}
 ._RezMY {
   display: inline-flex;
   gap: 2px;
@@ -3743,6 +3807,9 @@ input:checked ~ ._Yfxkl::after {
 input:focus-visible + ._Yfxkl {
   outline: var(--color-primary-color) solid 1px;
 }
+._7fVpn input:disabled {
+  cursor: default;
+}
 input:disabled + ._Yfxkl {
   background-color: var(--color-surface-container-disabled);
   border: 1px solid var(--color-outline);