@jobber/components 6.47.0 → 6.49.0

package/dist/AtlantisContext/AtlantisContext.d.ts

@@ -1,3 +1,4 @@
+import { DayOfWeek } from "../sharedHelpers/types";
 export interface AtlantisContextProps {
     /**
      * The date format Atlantis components would use
@@ -27,6 +28,13 @@ export interface AtlantisContextProps {
      * @default "en"
      */
     readonly locale: string;
+    /**
+     * Sets which day is considered the first day of the week in a calendar.
+     * 0 = Sunday, 1 = Monday, etc.
+     *
+     * @default 0
+     */
+    readonly firstDayOfWeek: DayOfWeek;
 }
 export declare const atlantisContextDefaultValues: AtlantisContextProps;
 export declare const AtlantisContext: import("react").Context<AtlantisContextProps>;

package/dist/AtlantisContext-cjs.js

@@ -10,6 +10,7 @@ const atlantisContextDefaultValues = {
     floatSeparators: { group: ",", decimal: "." },
     currencySymbol: "$",
     locale: "en",
+    firstDayOfWeek: 0,
 };
 const AtlantisContext = React.createContext(atlantisContextDefaultValues);
 function useAtlantisContext() {

package/dist/AtlantisContext-es.js

@@ -8,6 +8,7 @@ const atlantisContextDefaultValues = {
     floatSeparators: { group: ",", decimal: "." },
     currencySymbol: "$",
     locale: "en",
+    firstDayOfWeek: 0,
 };
 const AtlantisContext = createContext(atlantisContextDefaultValues);
 function useAtlantisContext() {

package/dist/Combobox/Combobox.types.d.ts

@@ -46,6 +46,10 @@ export interface ComboboxProps {
      * Should the Combobox display the loading state.
      */
     readonly loading?: boolean;
+    /**
+     * A ref to the default activator button element.
+     */
+    readonly defaultActivatorRef?: React.Ref<HTMLButtonElement>;
 }
 export interface ComboboxCustomActivatorProps {
     /**
@@ -76,6 +80,7 @@ export interface ComboboxActivatorProps {
 }
 export interface ComboboxTriggerProps extends Pick<ComboboxContentProps, "selected"> {
     readonly label?: string;
+    readonly activatorRef?: React.Ref<HTMLButtonElement>;
 }
 export interface ComboboxOptionProps {
     /**

package/dist/Combobox/components/ComboboxTrigger/ComboboxTrigger.d.ts

@@ -1,2 +1,2 @@
 import { ComboboxTriggerProps } from "../../Combobox.types";
-export declare function ComboboxTrigger({ label, selected, }: ComboboxTriggerProps): JSX.Element;
+export declare function ComboboxTrigger({ label, selected, activatorRef, }: ComboboxTriggerProps): JSX.Element;

package/dist/Combobox-cjs.js

@@ -107,7 +107,7 @@ function Combobox(props) {
     return (React.createElement(ComboboxProvider.ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label },
         React.createElement("div", { ref: wrapperRef, className: styles.wrapper },
             open && (React.createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
-            triggerElement || (React.createElement(ComboboxTrigger.ComboboxTrigger, { label: props.label, selected: props.selected })),
+            triggerElement || (React.createElement(ComboboxTrigger.ComboboxTrigger, { label: props.label, selected: props.selected, activatorRef: props.defaultActivatorRef })),
             React.createElement(ComboboxContent.ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
 }
 Combobox.Activator = ComboboxActivator.ComboboxActivator;

package/dist/Combobox-es.js

@@ -105,7 +105,7 @@ function Combobox(props) {
     return (React__default.createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label },
         React__default.createElement("div", { ref: wrapperRef, className: styles.wrapper },
             open && (React__default.createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
-            triggerElement || (React__default.createElement(ComboboxTrigger, { label: props.label, selected: props.selected })),
+            triggerElement || (React__default.createElement(ComboboxTrigger, { label: props.label, selected: props.selected, activatorRef: props.defaultActivatorRef })),
             React__default.createElement(ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
 }
 Combobox.Activator = ComboboxActivator;

package/dist/ComboboxTrigger-cjs.js

@@ -6,11 +6,11 @@ require('./tslib.es6-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var ComboboxProvider = require('./ComboboxProvider-cjs.js');
 
-function ComboboxTrigger({ label = "Select", selected, }) {
+function ComboboxTrigger({ label = "Select", selected, activatorRef, }) {
     const { handleOpen } = React.useContext(ComboboxProvider.ComboboxContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
-    return (React.createElement(Chip.ChipNamespace, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox" }, !hasSelection && (React.createElement(Chip.ChipNamespace.Suffix, null,
+    return (React.createElement(Chip.ChipNamespace, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React.createElement(Chip.ChipNamespace.Suffix, null,
         React.createElement(Icon.Icon, { name: "add", size: "small" })))));
 }
 

package/dist/ComboboxTrigger-es.js

@@ -4,11 +4,11 @@ import './tslib.es6-es.js';
 import { I as Icon } from './Icon-es.js';
 import { a as ComboboxContext } from './ComboboxProvider-es.js';
 
-function ComboboxTrigger({ label = "Select", selected, }) {
+function ComboboxTrigger({ label = "Select", selected, activatorRef, }) {
     const { handleOpen } = React__default.useContext(ComboboxContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
-    return (React__default.createElement(ChipNamespace, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox" }, !hasSelection && (React__default.createElement(ChipNamespace.Suffix, null,
+    return (React__default.createElement(ChipNamespace, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React__default.createElement(ChipNamespace.Suffix, null,
         React__default.createElement(Icon, { name: "add", size: "small" })))));
 }
 

package/dist/DatePicker/DatePicker.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from "react";
 import { XOR } from "ts-xor";
 import { DatePickerActivatorProps } from "./DatePickerActivator";
+import { DayOfWeek } from "../sharedHelpers/types";
 interface BaseDatePickerProps {
     /**
      * The maximum selectable date.
@@ -23,6 +24,13 @@ interface BaseDatePickerProps {
      * Dates on the calendar to highlight
      */
     readonly highlightDates?: Date[];
+    /**
+     * Sets which day is considered the first day of the week.
+     * 0 = Sunday, 1 = Monday, etc.
+     *
+     * @default 0
+     */
+    readonly firstDayOfWeek?: DayOfWeek;
     /**
      * Change handler that will return the date selected.
      */
@@ -57,5 +65,5 @@ interface DatePickerInlineProps extends BaseDatePickerProps {
     readonly inline?: boolean;
 }
 type DatePickerProps = XOR<DatePickerModalProps, DatePickerInlineProps>;
-export declare function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly, disabled, fullWidth, smartAutofocus, maxDate, minDate, highlightDates, }: DatePickerProps): JSX.Element;
+export declare function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly, disabled, fullWidth, smartAutofocus, maxDate, minDate, highlightDates, firstDayOfWeek, }: DatePickerProps): JSX.Element;
 export {};

package/dist/DatePicker-cjs.js

@@ -7291,11 +7291,12 @@ function useFocusOnSelectedDate() {
     return { ref, focusOnSelectedDate };
 }
 
-/*eslint max-statements: ["error", 13]*/
-function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, }) {
+/*eslint max-statements: ["error", 14]*/
+function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
     const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
     const [open, setOpen] = React.useState(false);
-    const { dateFormat } = AtlantisContext.useAtlantisContext();
+    const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = AtlantisContext.useAtlantisContext();
+    const effectiveFirstDayOfWeek = firstDayOfWeek !== null && firstDayOfWeek !== void 0 ? firstDayOfWeek : contextFirstDayOfWeek;
     const wrapperClassName = classnames(styles.datePickerWrapper, {
         // react-datepicker uses this class name to not close the date picker when
         // the activator is clicked
@@ -7323,7 +7324,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
                 "PPP",
                 "MMM dd yyyy",
                 "MMMM dd yyyy",
-            ], highlightDates: highlightDates, onMonthChange: onMonthChange })));
+            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek })));
     /**
      * The onChange callback on ReactDatePicker returns a Date and an Event, but
      * the onChange in our interface only provides the Date. Simplifying the code

package/dist/DatePicker-es.js

@@ -7289,11 +7289,12 @@ function useFocusOnSelectedDate() {
     return { ref, focusOnSelectedDate };
 }
 
-/*eslint max-statements: ["error", 13]*/
-function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, }) {
+/*eslint max-statements: ["error", 14]*/
+function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
     const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
     const [open, setOpen] = useState(false);
-    const { dateFormat } = useAtlantisContext();
+    const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = useAtlantisContext();
+    const effectiveFirstDayOfWeek = firstDayOfWeek !== null && firstDayOfWeek !== void 0 ? firstDayOfWeek : contextFirstDayOfWeek;
     const wrapperClassName = classnames(styles.datePickerWrapper, {
         // react-datepicker uses this class name to not close the date picker when
         // the activator is clicked
@@ -7321,7 +7322,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
                 "PPP",
                 "MMM dd yyyy",
                 "MMMM dd yyyy",
-            ], highlightDates: highlightDates, onMonthChange: onMonthChange })));
+            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek })));
     /**
      * The onChange callback on ReactDatePicker returns a Date and an Event, but
      * the onChange in our interface only provides the Date. Simplifying the code

package/dist/sharedHelpers/types.d.ts

@@ -10,6 +10,8 @@ export interface CommonAtlantisProps {
     /** Standard HTML id attribute. */
     id?: string;
 }
+/** Represents a day of the week as a number where 0 = Sunday, 1 = Monday, etc. */
+export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type CommonAllowedElements = "section" | "p" | "article" | "ul" | "li" | "div" | "span" | "dl" | "dd" | "dt";
 export type Spaces = "minuscule" | "slim" | "smallest" | "smaller" | "small" | "base" | "large" | "larger" | "largest" | "extravagant";
 export type GapSpacing = Spaces | (string & NonNullable<unknown>);