@jobber/components 4.87.2-JOB-91526-.0 → 4.87.2

package/dist/DataList/hooks/useMediaQuery.d.ts

@@ -1 +1,7 @@
-export declare function useMediaQuery(CSSMediaQuery: string): boolean;
+type MediaQuery = `(${string}:${string})`;
+export declare const mediaQueryStore: {
+    subscribe(onChange: () => void, query: MediaQuery): () => void;
+    getSnapshot(query: MediaQuery): () => boolean;
+};
+export declare function useMediaQuery(query: MediaQuery): boolean;
+export {};

package/dist/DataList/index.js

@@ -101,7 +101,19 @@ function useDataListContext() {
     return React.useContext(DataListContext);
 }
 
-function useMediaQuery(CSSMediaQuery) {
+const mediaQueryStore = {
+    subscribe(onChange, query) {
+        const matchMedia = window.matchMedia(query);
+        matchMedia.addEventListener("change", onChange);
+        return () => {
+            matchMedia.removeEventListener("change", onChange);
+        };
+    },
+    getSnapshot(query) {
+        return () => window.matchMedia(query).matches;
+    },
+};
+function useMediaQuery(query) {
     /**
      * matchMedia have had full support for browsers since 2012 but jest, being a
      * lite version of a DOM, doesn't support it.
@@ -113,18 +125,12 @@ function useMediaQuery(CSSMediaQuery) {
      * screen sizes, they can use the `mockViewportWidth` function from
      * `@jobber/components/useBreakpoints`.
      */
-    if (window.matchMedia === undefined)
+    if (typeof window === "undefined" ||
+        typeof window.matchMedia === "undefined") {
         return true;
-    const [matches, setMatches] = React.useState(window.matchMedia(CSSMediaQuery).matches);
-    React.useEffect(() => {
-        const media = window.matchMedia(CSSMediaQuery);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
-        }
-        const listener = () => setMatches(media.matches);
-        media.addEventListener("change", listener);
-        return () => media.removeEventListener("change", listener);
-    }, [CSSMediaQuery]);
+    }
+    const subscribeMediaQuery = React.useCallback((onChange) => mediaQueryStore.subscribe(onChange, query), [query]);
+    const matches = React.useSyncExternalStore(subscribeMediaQuery, mediaQueryStore.getSnapshot(query), () => true);
     return matches;
 }
 

package/dist/DatePicker/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-870c12ab.js');
+var DatePicker = require('../DatePicker-dd9173c7.js');
 require('react');
 require('classnames');
 require('react-datepicker');
@@ -14,7 +14,6 @@ require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('lodash/omit');
-require('../AtlantisContext-c0f9feb3.js');
 
 
 

package/dist/{DatePicker-870c12ab.js → DatePicker-dd9173c7.js}

@@ -8,7 +8,6 @@ var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Typography = require('./Typography-e2a23b7e.js');
 var Button = require('./Button-6b922fc1.js');
 var omit = require('lodash/omit');
-var AtlantisContext = require('./AtlantisContext-c0f9feb3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -66,11 +65,9 @@ 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, }) {
     const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
     const [open, setOpen] = React.useState(false);
-    const { dateFormat } = AtlantisContext.useAtlantisContext();
     const wrapperClassName = classnames__default["default"](styles.datePickerWrapper, {
         // react-datepicker uses this class name to not close the date picker when
         // the activator is clicked
@@ -91,14 +88,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
         React.useEffect(focusOnSelectedDate, [open]);
     }
     return (React__default["default"].createElement("div", { className: wrapperClassName, ref: ref },
-        React__default["default"].createElement(ReactDatePicker__default["default"], { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default["default"].createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default["default"].createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
-                dateFormat,
-                "P",
-                "PP",
-                "PPP",
-                "MMM dd yyyy",
-                "MMMM dd yyyy",
-            ], highlightDates: highlightDates, onMonthChange: onMonthChange })));
+        React__default["default"].createElement(ReactDatePicker__default["default"], { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default["default"].createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default["default"].createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: ["P", "PP", "PPP", "MMM dd yyyy", "MMMM dd yyyy"], highlightDates: highlightDates, onMonthChange: onMonthChange })));
     /**
      * 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/InputDate/InputDate.d.ts

@@ -15,10 +15,6 @@ interface InputDateProps extends Omit<CommonFormFieldProps, "clearable">, Pick<F
      * The minimum selectable date.
      */
     readonly minDate?: Date;
-    /**
-     * The date format to use
-     */
-    readonly dateFormat?: string;
 }
 export declare function InputDate(inputProps: InputDateProps): JSX.Element;
 export {};

package/dist/InputDate/index.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var omit = require('lodash/omit');
 var React = require('react');
 var FormField = require('../FormField-3ec1c85d.js');
-var DatePicker = require('../DatePicker-870c12ab.js');
-var AtlantisContext = require('../AtlantisContext-c0f9feb3.js');
+var DatePicker = require('../DatePicker-dd9173c7.js');
 require('../tslib.es6-754e2961.js');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
@@ -31,33 +30,28 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function InputDate(inputProps) {
     const formFieldActionsRef = React.useRef(null);
-    const atlantisContext = Object.assign({}, AtlantisContext.atlantisContextDefaultValues);
-    if (inputProps.dateFormat) {
-        atlantisContext.dateFormat = inputProps.dateFormat;
-    }
-    return (React__default["default"].createElement(AtlantisContext.AtlantisContext.Provider, { value: atlantisContext },
-        React__default["default"].createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
-                var _a;
-                const { onChange, onClick, value } = activatorProps;
-                const newActivatorProps = omit__default["default"](activatorProps, ["activator"]);
-                const suffix = Object.assign({ icon: "calendar" }, (onClick && {
-                    onClick: onClick,
-                    ariaLabel: "Show calendar",
-                }));
-                // Set form field to formatted date string immediately, to avoid validations
-                //  triggering incorrectly when it blurs (to handle the datepicker UI click)
-                value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
-                return (
-                // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
-                React__default["default"].createElement("div", { onClick: onClick },
-                    React__default["default"].createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: value, onChange: (_, event) => onChange && onChange(event), onBlur: () => {
-                            inputProps.onBlur && inputProps.onBlur();
-                            activatorProps.onBlur && activatorProps.onBlur();
-                        }, onFocus: () => {
-                            inputProps.onFocus && inputProps.onFocus();
-                            activatorProps.onFocus && activatorProps.onFocus();
-                        }, actionsRef: formFieldActionsRef, suffix: suffix }))));
-            } })));
+    return (React__default["default"].createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
+            var _a;
+            const { onChange, onClick, value } = activatorProps;
+            const newActivatorProps = omit__default["default"](activatorProps, ["activator"]);
+            const suffix = Object.assign({ icon: "calendar" }, (onClick && {
+                onClick: onClick,
+                ariaLabel: "Show calendar",
+            }));
+            // Set form field to formatted date string immediately, to avoid validations
+            //  triggering incorrectly when it blurs (to handle the datepicker UI click)
+            value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
+            return (
+            // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
+            React__default["default"].createElement("div", { onClick: onClick },
+                React__default["default"].createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: value, onChange: (_, event) => onChange && onChange(event), onBlur: () => {
+                        inputProps.onBlur && inputProps.onBlur();
+                        activatorProps.onBlur && activatorProps.onBlur();
+                    }, onFocus: () => {
+                        inputProps.onFocus && inputProps.onFocus();
+                        activatorProps.onFocus && activatorProps.onFocus();
+                    }, actionsRef: formFieldActionsRef, suffix: suffix }))));
+        } }));
 }
 
 exports.InputDate = InputDate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.87.2-JOB-91526-.0+86784e15",
+  "version": "4.87.2",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,8 +20,8 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.56.0",
-    "@jobber/formatters": "^0.2.2",
-    "@jobber/hooks": "^2.9.1",
+    "@jobber/formatters": "*",
+    "@jobber/hooks": "^2.9.2",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -33,8 +33,6 @@
     "axios": "^1.6.0",
     "classnames": "^2.3.2",
     "color": "^3.1.2",
-    "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.1",
     "filesize": "^6.1.0",
     "framer-motion": "^11.0.3",
     "lodash": "^4.17.21",
@@ -82,5 +80,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "86784e15a3e684b1f0b165428f4c822b343bbab3"
+  "gitHead": "2cc393810288051850e827744f6d533469c5a0d6"
 }

package/AtlantisContext.d.ts

@@ -1 +0,0 @@
-export * from "./dist/AtlantisContext";

package/AtlantisContext.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true,
-});
-
-var AtlantisContext = require("./dist/AtlantisContext");
-
-Object.keys(AtlantisContext).forEach(function(key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return AtlantisContext[key];
-    },
-  });
-});

package/dist/AtlantisContext/AtlantisContext.d.ts

@@ -1,56 +0,0 @@
-/// <reference types="react" />
-export interface AtlantisContextProps {
-    /**
-     * The date format Atlantis components would use
-     */
-    readonly dateFormat: string;
-    /**
-     * The time format Atlantis components would use
-     */
-    readonly timeFormat: string;
-    /**
-     * Time zone used in converting the date and time formats
-     */
-    readonly timeZone: string;
-    /**
-     * Determines how the component behaves when the app is online or offline.
-     * This is set to `true` by default. If your usage doesn't require a different
-     * experience, you can leave this as-is.
-     */
-    readonly isOnline: boolean;
-    /**
-     * Log errors to rollbar
-     */
-    readonly onLogError: (message: string) => void;
-    /**
-     * Grabs the decimal separator and group separator based on locale
-     */
-    readonly floatSeparators: Record<"decimal" | "group", string>;
-    /**
-     * The currency symbol Atlantis components will use
-     */
-    readonly currencySymbol: string;
-    /**
-     * The `headerHeight` property represents the height of the app header in Atlantis.
-     * It plays a crucial role in determining the positioning of various elements within the app.
-     * By accurately defining this value, Atlantis can effectively calculate the layout and alignment of its components.
-     */
-    readonly headerHeight: number;
-    /**
-     * Change the locale of the components. This updates the strings that comes
-     * with the components, updates the date and time formats, and/or the
-     * native 3rd-party packages.
-     *
-     * @default "en"
-     */
-    readonly locale: string;
-    /**
-     * The `setHeaderHeight` method allows you to set the height of the app header in Atlantis.
-     * Adjusting this height is essential for ensuring the correct positioning and alignment of various elements within the app.
-     * By setting this value accurately, Atlantis can dynamically adjust the layout of its components based on the specified header height.
-     */
-    readonly setHeaderHeight: (height: number) => void;
-}
-export declare const atlantisContextDefaultValues: AtlantisContextProps;
-export declare const AtlantisContext: import("react").Context<AtlantisContextProps>;
-export declare function useAtlantisContext(): AtlantisContextProps;

package/dist/AtlantisContext/index.d.ts

@@ -1 +0,0 @@
-export * from "./AtlantisContext";

package/dist/AtlantisContext/index.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var AtlantisContext = require('../AtlantisContext-c0f9feb3.js');
-require('react');
-
-
-
-exports.AtlantisContext = AtlantisContext.AtlantisContext;
-exports.atlantisContextDefaultValues = AtlantisContext.atlantisContextDefaultValues;
-exports.useAtlantisContext = AtlantisContext.useAtlantisContext;

package/dist/AtlantisContext-c0f9feb3.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-/* eslint-disable @typescript-eslint/no-unused-vars */
-const atlantisContextDefaultValues = {
-    dateFormat: "P",
-    // The system time is "p"
-    timeFormat: "p",
-    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-    isOnline: true,
-    onLogError: _ => {
-        return;
-    },
-    floatSeparators: { group: ",", decimal: "." },
-    currencySymbol: "$",
-    headerHeight: 0,
-    locale: "en",
-    setHeaderHeight: _ => {
-        return;
-    },
-};
-const AtlantisContext = React.createContext(atlantisContextDefaultValues);
-function useAtlantisContext() {
-    return React.useContext(AtlantisContext);
-}
-
-exports.AtlantisContext = AtlantisContext;
-exports.atlantisContextDefaultValues = atlantisContextDefaultValues;
-exports.useAtlantisContext = useAtlantisContext;