@7shifts/sous-chef 4.3.0 → 4.4.0

package/dist/controls/ToolbarSelect/ToolbarSelect.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 import { Props } from '../../forms/SelectField/SelectField';
 import { DataProps } from '../../foundation/types';
 type ToolbarSelectProps<T> = Omit<Props<T>, 'asToolbarFilter' | 'caption' | 'error' | 'id' | 'isClearable' | 'label' | 'noOptionMessage' | 'CustomOption' | 'SelectedOptionPrefix' | 'isSearchable'> & DataProps;
-/** Toolbar component to make a possible selection from predefined options. */
+/** ToolbarSelect is a compact dropdown filter for use in toolbars. It lets a user narrow page content or a paired component content by selecting from a predefined list of options. */
 declare const ToolbarSelect: <T extends unknown>({ name, value, options, onChange, onBlur, placeholder, defaultValue, menuShouldScrollIntoView, disabled, prefix, testId, creatableButton, onCreate, ...rest }: ToolbarSelectProps<T>) => React.JSX.Element;
 export default ToolbarSelect;

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

@@ -8,7 +8,7 @@ type Props<T> = {
     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 handles asynchronous options.
+ * A variation of select field that loads a dynamic list of options from a source rather than a fixed set of options. Use when you need to select from a dynamic list that can change such as roles, employees, locations, etc.
  * Instead of passing a `options` props, this component requires a `loadOptions` prop.
  * */
 declare const AsyncSelectField: <T extends unknown>({ loadOptions, ...props }: Props<T>) => React.JSX.Element;

package/dist/forms/CheckboxField/CheckboxField.d.ts

@@ -14,6 +14,6 @@ type Props = {
     /** This is used for setting the data-testid */
     testId?: string;
 } & DataProps;
-/** CheckboxField form element. */
+/** A simple check box with an option beside it. Allows the user to confirm a statement or enable an option with a simple boolean action. Use for things like agreeing to terms, or enabling one or more options in a list (where multiple selections are allowed). */
 declare const CheckboxField: React.FC<Props>;
 export default CheckboxField;

package/dist/forms/CurrencyField/CurrencyField.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { Props as TextFieldProps } from '../TextField/TextField';
 /**
- * `CurrencyField` is like `TextField` but it auto-format the value when the user leaves the field.
+ * A variation of a TextField, but it only accepts numbers, and will auto format the number into a currency format when the user leaves the field. Use anytime the user must enter a currency value and nothing else.
  *
- * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
+ * **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
  */
 declare const CurrencyField: React.ForwardRefExoticComponent<{
     autoComplete?: ("off" | "on") | undefined;

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

@@ -22,6 +22,6 @@ type Props = {
     testId?: string;
     weekStart?: WeekStart;
 };
-/** DateField form element. */
+/** A dropdown style field for selecting a single specific date. It will load a calendar widget when activated allowing the user to find and pick a day. */
 declare const DateField: React.FC<Props>;
 export default DateField;

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

@@ -21,6 +21,6 @@ type Props = {
     maxDays?: number;
     testId?: string;
 };
-/** DateRangeField form element. */
+/** A dropdown style field with 2 inputs. It allows the user to select a specific start date and end date separately to create a range of dates. . */
 declare const DateRangeField: React.FC<Props>;
 export default DateRangeField;

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

@@ -31,6 +31,6 @@ type Props<T> = {
     onCreate?: (option: string, groupLabel?: string) => void;
     isClearable?: boolean;
 };
-/** Component to make possible choose from a predefined options. */
+/** A dropdown style field that lets you select and input more than one option within the field. Uses removable chips to represent selected items.  */
 declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, prefix, noOptionsMessage, disabled, closeOnSelect, menuShouldScrollIntoView, testId, isSearchable, creatableButton, onCreate, isClearable }: Props<T>) => React.JSX.Element;
 export default MultiSelectField;

package/dist/forms/NumberField/NumberField.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { Props as TextFieldProps } from '../TextField/TextField';
 /**
- * `NumberField` is an extended `TextField` input with validation and formatting in place to properly display number values.
- * In its default state it only allows whole numbers, but it can be configured to allow decimals and negative values.
+ * A special text input field that only accepts numbers. It has validation and formatting in place to properly display number values. In its default state it only allows whole numbers, but it can be configured to allow decimals and negative values.
  */
 declare const NumberField: React.ForwardRefExoticComponent<{
     max?: number | undefined;

package/dist/forms/PasswordField/PasswordField.d.ts

@@ -15,6 +15,6 @@ type Props = {
     criterias?: PasswordCriteria[];
     testId?: string;
 };
-/** It allows show and hide the password as well as displaying the criteria. */
+/** A field used for passwords. It obfuscates the input by default, but has the option to reveal the input. Can also include required password criteria. */
 declare const PasswordField: React.FC<Props>;
 export default PasswordField;

package/dist/forms/PercentageField/PercentageField.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { Props as TextFieldProps } from '../TextField/TextField';
 /**
- * `PercentageField` is an extended `TextField` input with validation and formatting in place to properly display percentage values.
- * In its default state it only allows integers between 0 and 100, but it can be configured to allow decimals and negative values.
+ * A special text input field that only accepts numbers. Comes with validation and formatting in place to properly display percentage values. In its default state it only allows integers between 0 and 100, but it can be configured to allow decimals and negative values.
  */
 declare const PercentageField: React.ForwardRefExoticComponent<{
     max?: number | undefined;

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

@@ -17,6 +17,6 @@ type Props<T> = {
     onRemoveOption?: (remainingOptions: PillSelectOption<T>[]) => void;
     createOptionLabel?: React.ReactNode;
 };
-/** PillSelectField form element. */
+/** A field where the user can select one or more from a vertical line of pills. Can also be made fully reactive allowing users to add and delete their own options.  Use this to select from a more visual list with a limited number of options, like selecting the day of the week.  */
 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/RadioGroupField/RadioGroupField.d.ts

@@ -23,6 +23,6 @@ type Props = {
     /** It states the radio options will be inline and defines how many columns it will have */
     columns?: 2 | 3 | 4;
 };
-/** RadioGroupField form element. */
+/** A list of radio options appearing either as an input or box. Use when the user can only select one option from a visual list and the user needs to be able to see all the options to make an informed decision. */
 declare const RadioGroupField: ({ name, value, onChange, label, caption, error, space, inline, disabled, children, testId, columns }: Props) => React.JSX.Element;
 export default RadioGroupField;

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

@@ -41,6 +41,6 @@ export type Props<T> = {
     isSearchable?: boolean;
     autoFocus?: boolean;
 } & DataProps;
-/** Component to make possible choose from a predefined options. */
+/** Simple dropdown field where the user chooses one option from a predefined list. */
 declare const SelectField: <T extends unknown>(props: Props<T>) => React.JSX.Element;
 export default SelectField;

package/dist/forms/TextAreaField/TextAreaField.d.ts

@@ -24,5 +24,6 @@ type Props = {
     testId?: string;
     maxLength?: number;
 };
+/**  A basic open input field used to get text from the user, with options to add a prefix or suffix element if necessary. Accepts any characters, so do not use it if you want to limit the format of the input to numbers only.  */
 declare const TextAreaField: React.FC<Props>;
 export default TextAreaField;

package/dist/forms/TextField/TextField.d.ts

@@ -25,6 +25,7 @@ export type Props = {
     value?: string;
     testId?: string;
 } & DataProps;
+/** A basic open input field used to get text from the user, with options to add a prefix or suffix element if necessary. Accepts any characters, so do not use it if you want to limit the format of the input to numbers only.  */
 declare const TextField: React.ForwardRefExoticComponent<{
     autoComplete?: AutoCompleteType | undefined;
     autoFocus?: boolean | undefined;

package/dist/forms/TimeField/TimeField.d.ts

@@ -45,9 +45,9 @@ export declare const TimeRangeSelector: React.ForwardRefExoticComponent<{
     timeFormat?: TimeFormat | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 /**
- * `TimeField` are like `TextField` but it auto-format the value when the user leaves the field.
+ * A special field design for selecting a specific time of the day. Users can choose from a dropdown of preset time intervals, or type directly into the field. When the user leaves the field, the input is automatically formatted into either AM/PM time or 24h time.
  *
- * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
+ * **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
  */
 declare const TimeField: React.ForwardRefExoticComponent<Omit<Props, "prefix" | "subtractDuration" | "calculateDuration" | "suffix"> & React.RefAttributes<HTMLInputElement>>;
 export default TimeField;

package/dist/forms/TimeRangeField/TimeRangeField.d.ts

@@ -21,5 +21,6 @@ type Props = {
     calculateDuration?: (e: TimeRange) => string;
     timeFormat?: TimeFormat;
 };
+/** A special input field for selecting a time range. Comprised of 2 individual time fields, the user selects a start time and an end time individually to. */
 declare const TimeRangeField: ({ name, id: inputId, value, interval, startTime, onChange, onBlur, label, caption, error, placeholder, disabled, testId, subtractDuration, calculateDuration, timeFormat }: Props) => React.JSX.Element;
 export default TimeRangeField;

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

@@ -21,6 +21,6 @@ type Props = {
     weekStart?: WeekStart;
     testId?: string;
 };
-/** WeekField form element. */
+/** A special dropdown style field used to select a single week from a calendar widget. Selections must always be 7 consecutive days, but you may customize the day of the week the selectable range starts on. */
 declare const WeekField: React.FC<Props>;
 export default WeekField;

package/dist/hooks/useScrollDetector.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-export declare const useScrollDetector: (contentRef: RefObject<HTMLDivElement>) => {
+export declare const useScrollDetector: (contentRef: RefObject<HTMLElement>) => {
     hasScroll: boolean;
     isScrolled: boolean;
 };

package/dist/index.css

@@ -1784,7 +1784,6 @@ h5._i2LHD {
   padding: 0 6px;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-surface-color);
 }
 ._RXV4h svg {
   fill: var(--color-secondary-on-color);
@@ -5701,6 +5700,25 @@ input._TEU6N {
   border-bottom: 1px solid var(--nav-foreground-color);
   transition: box-shadow 0.4s ease-in-out;
 }
+._lK6PV {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--border-radius-400);
+}
+._lK6PV:hover {
+  background: var(--color-hover-darken);
+}
+._lK6PV:focus-visible {
+  outline: 2px solid var(--nav-object-normal-color);
+  outline-offset: 2px;
+}
 ._Smo46 {
   --nav-background-color: #f1f0ec;
   --nav-foreground-color: #e2ded6;
@@ -5738,6 +5756,12 @@ input._TEU6N {
   overflow-x: hidden;
   background-color: var(--nav-background-color);
   padding-top: 10px;
+  margin: 0;
+  padding-inline-start: 0;
+  list-style: none;
+}
+._Smo46 a {
+  text-decoration: none;
 }
 @keyframes _aMyIG {
   from {
@@ -5752,13 +5776,25 @@ input._TEU6N {
   min-height: 38px;
   color: var(--nav-object-soft-color);
   box-sizing: border-box;
+  list-style: none;
 }
-._mWULf button {
+._PiWFg {
+  display: block;
   width: 100%;
   padding: 0;
+  margin: 0;
   border: 0;
+  font: inherit;
+  color: inherit;
   text-align: left;
+  text-decoration: none;
   background-color: transparent;
+  cursor: pointer;
+}
+._PiWFg:focus-visible {
+  outline: 2px solid var(--nav-object-normal-color);
+  outline-offset: -2px;
+  border-radius: var(--border-radius-400);
 }
 ._GkDWn {
   display: flex;
@@ -5793,6 +5829,17 @@ input._TEU6N {
   color: var(--nav-object-normal-color);
   font-family: var(--font-family-body);
 }
+._MFqwx {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 ._yCxLl {
   width: 8px;
   height: 8px;
@@ -5808,7 +5855,9 @@ input._TEU6N {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  margin-top: 4px;
+  margin: 4px 0 0;
+  padding-inline-start: 0;
+  list-style: none;
 }
 ._zfy2L {
   color: var(--nav-object-normal-color);
@@ -5852,6 +5901,36 @@ input._TEU6N {
   min-height: 30px;
   color: var(--nav-object-soft-color);
   box-sizing: border-box;
+  list-style: none;
+}
+._KXtsV {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  text-decoration: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+._KXtsV:focus-visible {
+  outline: 2px solid var(--nav-object-normal-color);
+  outline-offset: -2px;
+  border-radius: var(--border-radius-400);
+}
+._nTZxa {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 ._c3utS {
   display: flex;
@@ -5911,7 +5990,9 @@ input._TEU6N {
 ._qN8Zl {
   width: 100%;
   padding: 10px 15px;
+  margin: 0;
   box-sizing: border-box;
+  list-style: none;
 }
 ._qN8Zl::after {
   content: "";
@@ -5923,6 +6004,9 @@ input._TEU6N {
 ._9dbuu {
   flex-shrink: 0;
   padding: 10px 0 20px 0;
+  margin: 0;
+  padding-inline-start: 0;
+  list-style: none;
 }
 ._Bq3B4 {
   box-shadow: 0 0 12px -3px var(--color-shadow-overlay);