@7shifts/sous-chef 4.6.0-beta.0 → 4.6.1

package/dist/controls/DateFilter/DateFilter.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { WeekStart } from '../../utils/date';
+import { HighlightGroup } from '../../utils/highlight';
 import { DateFilterMode } from './types';
 type Props = {
     mode?: DateFilterMode;
     weekStart?: WeekStart;
     value: Date;
     onChange: (selected: Date) => void;
+    /** Highlight one or more groups of dates below the calendar, each with its
+     *  own shape, colour theme, and legend label. Applies to the day and week
+     *  calendars (not the month picker). */
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     testId?: string;
 };
 declare const DateFilter: React.FC<Props>;

package/dist/forms/ColorField/ColorField.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import type { Props as TextFieldProps } from '../TextField/TextField';
-type Props = Omit<TextFieldProps, 'suffix' | 'prefix' | 'autoComplete' | 'defaultValue' | 'maxLength'>;
-declare const ColorField: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+declare const ColorField: React.ForwardRefExoticComponent<{
+    /** When true, allows the user to select a custom color */
+    allowCustomColor?: boolean | undefined;
+} & Omit<TextFieldProps, "suffix" | "prefix" | "autoComplete" | "defaultValue" | "maxLength"> & React.RefAttributes<HTMLInputElement>>;
 export default ColorField;

package/dist/forms/ColorField/ColorOverlay/ColorOverlay.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
+import { SequentialColor } from '../constants';
 type Props = {
     onClose: () => void;
     triggerRef: React.RefObject<HTMLElement>;
-    selectedColor?: string;
+    selectedColor?: SequentialColor;
     onSelect: (color: string) => void;
+    onCustomColor: () => void;
+    allowCustomColor?: boolean;
 };
 declare const ColorsOverlay: (props: Props) => React.JSX.Element;
 export default ColorsOverlay;

package/dist/forms/ColorField/ColorOverlay/useColorKeyboardNavigation.d.ts

@@ -1,4 +1,5 @@
-export declare const useColorKeyboardNavigation: (selectedColor: string) => {
+export declare const CUSTOM_COLOR_INDEX: 20;
+export declare const useColorKeyboardNavigation: (selectedColor: string, allowCustomColor?: boolean) => {
     selectedColorIndex: number | null;
     setSelectedColorIndex: import("react").Dispatch<import("react").SetStateAction<number | null>>;
 };

package/dist/forms/ColorField/CustomColorPicker/CustomColorPicker.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type CustomColorPickerHandle = {
+    /** Open the native color picker at the field's current color. */
+    open: () => void;
+};
+type Props = {
+    /** The current field color; the picker opens seeded with this value. */
+    color?: string;
+    /** Called with the committed hex once the user closes the picker. */
+    onSelect: (color: string) => void;
+};
+/**
+ * A visually hidden native color input. It is kept mounted on the field (not
+ * inside the swatch overlay) so the browser's picker survives the overlay
+ * closing, and it is opened imperatively via the `open` handle.
+ */
+declare const CustomColorPicker: React.ForwardRefExoticComponent<Props & React.RefAttributes<CustomColorPickerHandle>>;
+export default CustomColorPicker;

package/dist/forms/ColorField/CustomColorPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CustomColorPicker';
+export type { CustomColorPickerHandle } from './CustomColorPicker';

package/dist/forms/ColorField/constants.d.ts

@@ -1 +1,2 @@
 export declare const SEQUENTIAL_COLORS: readonly ["seq-18", "seq-4", "seq-7", "seq-16", "seq-12", "seq-6", "seq-9", "seq-3", "seq-11", "seq-1", "seq-13", "seq-10", "seq-14", "seq-8", "seq-19", "seq-20", "seq-2", "seq-17", "seq-15", "seq-5"];
+export type SequentialColor = (typeof SEQUENTIAL_COLORS)[number];

package/dist/forms/ColorField/domain.d.ts

@@ -0,0 +1,14 @@
+import { SequentialColor } from './constants';
+export declare const isSeqToken: (value: string) => value is "seq-18" | "seq-4" | "seq-7" | "seq-16" | "seq-12" | "seq-6" | "seq-9" | "seq-3" | "seq-11" | "seq-1" | "seq-13" | "seq-10" | "seq-14" | "seq-8" | "seq-19" | "seq-20" | "seq-2" | "seq-17" | "seq-15" | "seq-5";
+/**
+ * Whether a value is a 6-digit hex color, which is the only format the native
+ * color picker accepts.
+ */
+export declare const isHexColor: (value: string | undefined) => value is string;
+/**
+ * Resolves a stored field value to the sequential color token it represents.
+ * Accepts both a token name directly (e.g. `seq-1`) and a hex color string so
+ * that fields migrated from hex storage continue to resolve correctly.
+ */
+export declare const findSeqToken: (value: string | undefined) => SequentialColor | undefined;
+export declare const findSeqTokenByHex: (value: string | undefined) => SequentialColor | undefined;

package/dist/forms/DateField/DateField.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { WeekStart } from '../../utils/date';
+import { HighlightGroup } from '../../utils/highlight';
 type Props = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
     id?: string;
     value?: Date;
     disabledDays?: (day: Date) => boolean;
+    /** Highlight one or more groups of dates below the calendar, each with its
+     *  own shape, colour theme, and legend label. Example use cases: pay days,
+     *  holidays, blackout periods. */
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
     format?: string;
     initialMonth?: Date;

package/dist/forms/DateRangeField/DateRangeCalendar/DateRangeCalendar.d.ts

@@ -1,5 +1,6 @@
 import React, { MutableRefObject } from 'react';
 import { BlockedDays, WeekStart } from '../../../utils/date';
+import { HighlightGroup } from '../../../utils/highlight';
 type Props = {
     weekStart?: WeekStart;
     start?: Date;
@@ -12,6 +13,9 @@ type Props = {
      * [doc](https://react-day-picker-v7.netlify.app/api/DayPicker#disabledDays) to see what
      * values you can use. */
     disabledDays?: BlockedDays;
+    /** Highlight one or more groups of dates, each with its own shape, colour
+     *  theme, and legend label, e.g. pay days or holidays. */
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     anchorRef: MutableRefObject<HTMLElement | null>;
     testId?: string;
     onMonthChange?: (month: Date) => void;

package/dist/forms/DateRangeField/DateRangeField.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WeekStart, DateRange, BlockedDays, DisabledDays } from '../../utils/date';
+import { HighlightGroup } from '../../utils/highlight';
 type Props = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
@@ -7,6 +8,11 @@ type Props = {
     value?: DateRange;
     /** It disable some dates so the user can't click on them. Refer to this [doc](https://react-day-picker.js.org/api/types/matcher) to see what values you can use. */
     disabledDays?: DisabledDays | BlockedDays;
+    /** Highlight one or more groups of dates below the calendar, each with its
+     *  own shape, colour theme, and legend label. Each group's `dates` accepts
+     *  the same Matcher types as `disabledDays` (plus the pattern helpers).
+     *  Example use cases: pay days, holidays, blackout periods. */
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
     format?: string;
     onChange?: (e: DateRange) => void;

package/dist/forms/DateRangeField/FromDate/FromDate.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import { WeekStart, BlockedDays } from '../../../utils/date';
+import { HighlightGroup } from '../../../utils/highlight';
 type Props = {
     name: string;
     id: string;
     format: string;
     disabledDays?: BlockedDays;
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     start?: Date;
     end?: Date;
     placeholder: string;
@@ -16,5 +18,5 @@ type Props = {
     onDayClick: () => void;
     testId?: string;
 };
-declare const FromDate: ({ name, id, format, disabledDays, start, end, placeholder, weekStart, maxDays, disabled, readOnly, onChange, onDayClick, testId }: Props) => React.JSX.Element;
+declare const FromDate: ({ name, id, format, disabledDays, highlightedDays, start, end, placeholder, weekStart, maxDays, disabled, readOnly, onChange, onDayClick, testId }: Props) => React.JSX.Element;
 export default FromDate;

package/dist/forms/DateRangeField/ToDate/ToDate.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { WeekStart, BlockedDays } from '../../../utils/date';
+import { HighlightGroup } from '../../../utils/highlight';
 type Props = {
     name: string;
     format: string;
     disabledDays?: BlockedDays;
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     start?: Date;
     end?: Date;
     placeholder: string;

package/dist/forms/WeekField/WeekField.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { WeekStart } from '../../utils/date';
+import { HighlightGroup } from '../../utils/highlight';
 type Props = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
     id?: string;
     value?: Date;
     disabledDays?: (day: Date) => boolean;
+    /** Highlight one or more groups of dates below the calendar, each with its
+     *  own shape, colour theme, and legend label. Example use cases: pay days,
+     *  holidays, blackout periods. */
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
     format?: string;
     initialMonth?: Date;

package/dist/forms/index.d.ts

@@ -31,4 +31,8 @@ export type { PillSelectOption } from './PillSelectField/types';
 export type { AsyncSelectOptions } from './AsyncSelectField/types';
 export type { FormikType } from './Form/types';
 export type { PhoneFieldCountryCode } from './PhoneField/types';
+export type { HighlightGroup, HighlightShape, HighlightTheme } from '../utils/highlight';
+export { HIGHLIGHT_SHAPE } from '../utils/highlight';
+export type { Weekday } from '../utils/highlight-patterns';
+export { nthWeekdayOfMonth, everyOtherWeekday, firstOfMonth, lastOfMonth } from '../utils/highlight-patterns';
 export { isValidPhoneNumber } from './validations';

package/dist/foundation/tokens/color/color-codes.d.ts

@@ -82,3 +82,49 @@ export declare const COLOR_CODES: {
     readonly 'seq-19': " #2f80ed";
     readonly 'seq-20': " #be3434";
 };
+export declare const SEQUENTIAL_COLOR_CODES: {
+    readonly light: {
+        readonly 'seq-1': "#00b5d8";
+        readonly 'seq-2': "#f9922b";
+        readonly 'seq-3': "#28cc6d";
+        readonly 'seq-4': "#d83f87";
+        readonly 'seq-5': "#4359ce";
+        readonly 'seq-6': "#ff6f61";
+        readonly 'seq-7': "#35e5c6";
+        readonly 'seq-8': "#a966e7";
+        readonly 'seq-9': "#905642";
+        readonly 'seq-10': "#ffb300";
+        readonly 'seq-11': "#708238";
+        readonly 'seq-12': "#4fc3f7";
+        readonly 'seq-13': "#e94057";
+        readonly 'seq-14': "#00a896";
+        readonly 'seq-15': "#6a4c93";
+        readonly 'seq-16': "#a3cb38";
+        readonly 'seq-17': "#546e7a";
+        readonly 'seq-18': "#fc9999";
+        readonly 'seq-19': "#2f80ed";
+        readonly 'seq-20': "#be3434";
+    };
+    readonly dark: {
+        readonly 'seq-1': "#28d2f3";
+        readonly 'seq-2': "#f9ad61";
+        readonly 'seq-3': "#31e17b";
+        readonly 'seq-4': "#ef5ca1";
+        readonly 'seq-5': "#7288ff";
+        readonly 'seq-6': "#ff867a";
+        readonly 'seq-7': "#43f2d3";
+        readonly 'seq-8': "#cb93ff";
+        readonly 'seq-9': "#b66d54";
+        readonly 'seq-10': "#ffc437";
+        readonly 'seq-11': "#8a9c52";
+        readonly 'seq-12': "#8adbff";
+        readonly 'seq-13': "#fa5c71";
+        readonly 'seq-14': "#15c7b4";
+        readonly 'seq-15': "#a978ec";
+        readonly 'seq-16': "#aed83e";
+        readonly 'seq-17': "#82adc0";
+        readonly 'seq-18': "#ffa9a9";
+        readonly 'seq-19': "#4594ff";
+        readonly 'seq-20': "#e45555";
+    };
+};

package/dist/i18n/locales/en.json

@@ -62,5 +62,8 @@
     },
     "PhoneField": {
         "malformedPhoneNumber": "Please enter a valid phone number."
+    },
+    "ColorField": {
+        "customColorButtonLabel": "Custom color"
     }
 }

package/dist/i18n/locales/es.json

@@ -62,5 +62,8 @@
     },
     "PhoneField": {
         "malformedPhoneNumber": "Por favor, ingresa un número de teléfono válido."
+    },
+    "ColorField": {
+        "customColorButtonLabel": "Color personalizado"
     }
 }

package/dist/i18n/locales/fr.json

@@ -62,5 +62,8 @@
     },
     "PhoneField": {
         "malformedPhoneNumber": "Veuillez entrer un numéro de téléphone valide."
+    },
+    "ColorField": {
+        "customColorButtonLabel": "Couleur personnalisée"
     }
 }