@7shifts/sous-chef 2.11.0 → 2.12.2

package/dist/feedback/InlineBanner/ButtonCTA/ButtonCTA.d.ts

@@ -0,0 +1,10 @@
+import { InlineBannerTheme } from '../types';
+import React from 'react';
+declare type ButtonCTAProps = {
+    button: React.ReactElement;
+    bannerTheme: InlineBannerTheme;
+    primaryCTA?: boolean;
+};
+/** Infers theme prop for Sous Chef Button CTAs if not explicitly passed, default is hollow, primaryCTA is Upsell if banner theme is Upsell*/
+declare const ButtonCTA: ({ button, bannerTheme, primaryCTA }: ButtonCTAProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export default ButtonCTA;

package/dist/feedback/InlineBanner/ButtonCTA/index.d.ts

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

package/dist/feedback/InlineBanner/InlineBanner.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { InlineBannerTheme } from './types';
+declare type Props = {
+    children: React.ReactNode;
+    theme?: InlineBannerTheme;
+    title?: string;
+    onClose?: () => void;
+    caption?: string;
+    primaryButton?: React.ReactElement;
+    secondaryButton?: React.ReactElement;
+};
+declare const InlineBanner: React.FC<Props>;
+export default InlineBanner;

package/dist/feedback/InlineBanner/InlineBannerCTA/InlineBannerCTA.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InlineBannerTheme } from '../types';
+declare type Props = {
+    primaryButton: React.ReactElement;
+    secondaryButton?: React.ReactElement;
+    caption?: string;
+    multiLine: boolean;
+    bannerTheme: InlineBannerTheme;
+};
+declare const InlineBannerCTA: ({ primaryButton, secondaryButton, caption, multiLine, bannerTheme }: Props) => JSX.Element;
+export default InlineBannerCTA;

package/dist/feedback/InlineBanner/InlineBannerCTA/index.d.ts

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

package/dist/feedback/InlineBanner/InlineBannerIcon/InlineBannerIcon.d.ts

@@ -0,0 +1,6 @@
+import { InlineBannerTheme } from '../types';
+declare type BannerIconProps = {
+    theme: InlineBannerTheme;
+};
+declare const InlineBannerIcon: ({ theme }: BannerIconProps) => JSX.Element;
+export default InlineBannerIcon;

package/dist/feedback/InlineBanner/InlineBannerIcon/index.d.ts

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

package/dist/feedback/InlineBanner/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const BANNER_THEME: {
+    INFO: "info";
+    WARNING: "warning";
+    SUCCESS: "success";
+    DANGER: "danger";
+    UPSELL: "upsell";
+};
+export declare const BUTTON_THEME: {
+    HOLLOW: "hollow";
+    UPSELL: "upsell";
+};

package/dist/feedback/InlineBanner/index.d.ts

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

package/dist/feedback/InlineBanner/types.d.ts

@@ -0,0 +1 @@
+export declare type InlineBannerTheme = 'info' | 'warning' | 'success' | 'danger' | 'upsell';

package/dist/feedback/index.d.ts

@@ -1,2 +1,4 @@
 import Spinner from './Spinner';
+import InlineBanner from './InlineBanner';
 export { Spinner };
+export { InlineBanner };

package/dist/forms/AsyncSelectField/AsyncSelectField.d.ts

@@ -0,0 +1,14 @@
+import type { Props as SelectProps } from '../SelectField/SelectField';
+import { AsyncSelectOptions } from './types';
+declare type Props<T> = {
+    /** It is a function that takes the input search as parameter and returns a Promise with all the options and if there are more options to load. If it brings all the options on the first load, it won't call the `loadOptions` to perform the search. */
+    loadOptions: (inputValue: string) => Promise<AsyncSelectOptions<T>>;
+    /** It fires `loadOptions` again if this key value changes. Used when it depends on other fields to load its options */
+    key?: string | number;
+} & Omit<SelectProps<T>, 'options'>;
+/**
+ * Component to make possible choose from async options. It looks exactly as the [SelectField](./?path=/docs/forms-selectfield--default) but, this one handle asynchronous options.
+ * Instead of passing a `options` props, this component requires a `loadOptions` prop.
+ * */
+declare const AsyncSelectField: <T extends unknown>({ loadOptions, ...props }: Props<T>) => JSX.Element;
+export default AsyncSelectField;

package/dist/forms/AsyncSelectField/CustomList/CustomList.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import { components } from 'react-select';
+declare type Props = ComponentProps<typeof components.MenuList> & {
+    hasMoreOptions: boolean;
+    hasMoreOptionsFirstLoad: boolean | null | undefined;
+};
+declare const CustomList: ({ children, hasMoreOptions, hasMoreOptionsFirstLoad, ...props }: Props) => JSX.Element;
+export default CustomList;

package/dist/forms/AsyncSelectField/CustomList/index.d.ts

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

package/dist/forms/AsyncSelectField/index.d.ts

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

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

@@ -0,0 +1,5 @@
+import { SelectOptions } from '../SelectField/types';
+export declare type AsyncSelectOptions<T> = {
+    options: SelectOptions<T>;
+    hasMore: boolean;
+};

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

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ControlProps } from 'react-select';
-interface Props<T> extends ControlProps<T, false> {
+import React, { ComponentProps } from 'react';
+import { components } from 'react-select';
+declare type Props = ComponentProps<typeof components.Control> & {
     CustomPrefixComponent: React.ElementType;
-}
-declare function CustomControl<T>({ children, CustomPrefixComponent, ...props }: Props<T>): JSX.Element;
+};
+declare function CustomControl({ children, CustomPrefixComponent, ...props }: Props): JSX.Element;
 export default CustomControl;

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

@@ -1,7 +1,7 @@
-import React from 'react';
-import { OptionProps } from 'react-select';
-interface Props<T> extends OptionProps<T, false> {
+import React, { ComponentProps } from 'react';
+import { components } from 'react-select';
+declare type Props = ComponentProps<typeof components.Option> & {
     CustomComponent: React.ElementType;
-}
-declare function CustomOption<T>({ children, CustomComponent, ...props }: Props<T>): JSX.Element;
+};
+declare function CustomOption({ children, CustomComponent, ...props }: Props): JSX.Element;
 export default CustomOption;

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

@@ -3,7 +3,7 @@ import type { SelectOption, SelectOptions } from './types';
 declare type NoOptionsMessageFunction = (input: {
     inputValue: string;
 }) => string | null;
-declare type Props<T> = {
+export declare type Props<T> = {
     asToolbarFilter?: boolean;
     caption?: React.ReactNode;
     disabled?: boolean;
@@ -27,5 +27,5 @@ declare type Props<T> = {
     SelectedOptionPrefix?: React.ElementType;
 };
 /** Component to make possible choose from a predefined options. */
-declare const SelectField: <T extends unknown>({ asToolbarFilter, caption, disabled, error, id: inputId, isClearable, label, menuShouldScrollIntoView, name, noOptionsMessage, options, onBlur, onChange, placeholder, prefix, value, CustomOption: UserCustomOption, SelectedOptionPrefix }: Props<T>) => JSX.Element;
+declare const SelectField: <T extends unknown>(props: Props<T>) => JSX.Element;
 export default SelectField;

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

@@ -0,0 +1,12 @@
+import React from '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, CustomOption: UserCustomOption, SelectedOptionPrefix }: Props<T>) => {
+    selectProps: Pick<import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>>, 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: React.ReactNode;
+        error: string | undefined;
+        id: string;
+        label: React.ReactNode;
+        name: string;
+    };
+};

package/dist/forms/index.d.ts

@@ -9,13 +9,15 @@ import RadioGroupOption from './RadioGroupOption';
 import PasswordField from './PasswordField';
 import MultiSelectField from './MultiSelectField';
 import SelectField from './SelectField';
+import AsyncSelectField from './AsyncSelectField';
 import DateField from './DateField';
 import DateRangeField from './DateRangeField';
 import WeekField from './WeekField';
 import TimeField from './TimeField';
 import CurrencyField from './CurrencyField';
 import PercentageField from './PercentageField';
-export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, RadioGroupField, RadioGroupOption, PasswordField, MultiSelectField, SelectField, DateField, DateRangeField, WeekField, TimeField, CurrencyField, PercentageField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
+export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, RadioGroupField, RadioGroupOption, PasswordField, MultiSelectField, SelectField, AsyncSelectField, DateField, DateRangeField, WeekField, TimeField, CurrencyField, PercentageField, 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 } from './SelectField/types';
+export type { AsyncSelectOptions } from './AsyncSelectField/types';
 export type { FormikType } from './Form/types';

package/dist/index.css

@@ -1706,6 +1706,27 @@ The smaller the number the lighter the color. So $eggplant-100 would be light pu
 The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
 Please ask a designer if you have questions about which colours to use.
 */
+._uC4zU {
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 16px;
+  font-size: 14px;
+  color: #929292;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 8px 12px;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
+Please ask a designer if you have questions about which colours to use.
+*/
 ._1btTx, ._1Sc9D {
   padding: 7px;
   line-height: 22px;
@@ -2569,6 +2590,121 @@ The smaller the number the lighter the color. So $eggplant-100 would be light pu
 The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
 Please ask a designer if you have questions about which colours to use.
 */
+._vgLin {
+  padding: 16px 12px 16px 12px;
+  background: #f8f8f8;
+  margin-left: 1px;
+  margin-right: 1px;
+  position: relative;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);
+}
+
+._63TwY {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+  color: #555;
+}
+
+._3n6S7 {
+  font-size: 14px;
+  line-height: 16px;
+  flex-grow: 1;
+  color: #555;
+}
+
+._2pMYs {
+  margin-bottom: 4px;
+}
+
+._ON6Eg {
+  background: #f6fdff;
+  box-shadow: 0 0 0 1px rgba(81, 172, 199, 0.15), 0 1px 3px 0 rgba(81, 172, 199, 0.25);
+}
+._ON6Eg ._1-D-E {
+  color: #51acc7;
+}
+
+._1FFZh {
+  background: #ecfaf8;
+  box-shadow: 0 0 0 1px rgba(53, 172, 154, 0.15), 0 1px 3px 0 rgba(53, 172, 154, 0.25);
+}
+._1FFZh ._1-D-E {
+  color: #35ac9a;
+}
+
+._2R34O {
+  background: #fcf0f0;
+  box-shadow: 0 0 0 1px rgba(207, 92, 92, 0.15), 0 1px 3px 0 rgba(207, 92, 92, 0.25);
+}
+._2R34O ._1-D-E {
+  color: #cf5c5c;
+}
+
+._3Cfhe {
+  background: #fff9ed;
+  box-shadow: 0 0 0 1px rgba(229, 178, 66, 0.15), 0 1px 3px 0 rgba(229, 178, 66, 0.25);
+}
+._3Cfhe ._1-D-E {
+  color: #e5b242;
+}
+
+._1SIOw {
+  background: #f0f3fb;
+  box-shadow: 0 0 0 1px rgba(97, 121, 198, 0.15), 0 1px 3px 0 rgba(97, 121, 198, 0.25);
+}
+._1SIOw ._1-D-E {
+  color: #6179c6;
+}
+
+._3SNQ1 {
+  position: absolute;
+  width: 38px;
+  height: 38px;
+  top: 4px;
+  right: 4px;
+}
+
+._3nLTI {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+._3nLTI ._3SNQ1 {
+  position: static;
+}
+._3nLTI ._3n6S7 {
+  display: flex;
+  align-items: center;
+  min-height: 38px;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
+Please ask a designer if you have questions about which colours to use.
+*/
+._1jqm8 {
+  font-size: 12px;
+  line-height: 12px;
+  color: #555;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
+Please ask a designer if you have questions about which colours to use.
+*/
 ._2puqJ {
   position: fixed;
   inset: 0px;