@jobber/components 4.87.10 → 4.87.11-JOB-91526-.8

package/AtlantisContext.d.ts

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

package/AtlantisContext.js

@@ -0,0 +1,17 @@
+"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

@@ -0,0 +1,34 @@
+/// <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;
+    /**
+     * 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;
+    /**
+     * 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;
+}
+export declare const atlantisContextDefaultValues: AtlantisContextProps;
+export declare const AtlantisContext: import("react").Context<AtlantisContextProps>;
+export declare function useAtlantisContext(): AtlantisContextProps;

package/dist/AtlantisContext/index.d.ts

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

package/dist/AtlantisContext/index.js

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

package/dist/AtlantisContext-64608897.js

@@ -0,0 +1,22 @@
+'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,
+    floatSeparators: { group: ",", decimal: "." },
+    currencySymbol: "$",
+    locale: "en",
+};
+const AtlantisContext = React.createContext(atlantisContextDefaultValues);
+function useAtlantisContext() {
+    return React.useContext(AtlantisContext);
+}
+
+exports.AtlantisContext = AtlantisContext;
+exports.atlantisContextDefaultValues = atlantisContextDefaultValues;
+exports.useAtlantisContext = useAtlantisContext;

package/dist/DatePicker/index.js

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

package/dist/{DatePicker-dd9173c7.js → DatePicker-305a5b82.js}

@@ -8,6 +8,7 @@ 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-64608897.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -65,9 +66,11 @@ 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
@@ -88,7 +91,14 @@ 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: ["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: [
+                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,6 +15,15 @@ interface InputDateProps extends Omit<CommonFormFieldProps, "clearable">, Pick<F
      * The minimum selectable date.
      */
     readonly minDate?: Date;
+    /**
+     * Whether to show the calendar icon
+     * @default true
+     */
+    readonly showIcon?: boolean;
+    /**
+     * Text to display instead of a date value
+     */
+    readonly emptyValuePlaceholder?: string;
 }
 export declare function InputDate(inputProps: InputDateProps): JSX.Element;
 export {};

package/dist/InputDate/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var omit = require('lodash/omit');
 var React = require('react');
 var FormField = require('../FormField-f6fadff2.js');
-var DatePicker = require('../DatePicker-dd9173c7.js');
+var DatePicker = require('../DatePicker-305a5b82.js');
 require('../tslib.es6-754e2961.js');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
@@ -22,6 +22,7 @@ require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 require('react-datepicker');
 require('@jobber/hooks/useRefocusOnActivator');
+require('../AtlantisContext-64608897.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,22 +35,36 @@ function InputDate(inputProps) {
             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",
-            }));
+            const [showEmptyPlaceholder, setShowEmptyPlaceholder] = React.useState(!value);
+            const suffix = inputProps.showIcon !== false
+                ? {
+                    icon: "calendar",
+                    ariaLabel: "Show calendar",
+                    onClick: onClick && onClick,
+                }
+                : undefined;
             // 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: () => {
+                React__default["default"].createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyPlaceholder ? inputProps.emptyValuePlaceholder : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
+                        onChange && onChange(event);
+                        setShowEmptyPlaceholder(false);
+                    }, onBlur: () => {
                         inputProps.onBlur && inputProps.onBlur();
                         activatorProps.onBlur && activatorProps.onBlur();
+                        setShowEmptyPlaceholder(!value);
                     }, onFocus: () => {
                         inputProps.onFocus && inputProps.onFocus();
                         activatorProps.onFocus && activatorProps.onFocus();
+                    }, onKeyUp: event => {
+                        var _a;
+                        if (inputProps.showIcon === false &&
+                            event.key === "ArrowDown") {
+                            (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
+                        }
                     }, actionsRef: formFieldActionsRef, suffix: suffix }))));
         } }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.87.10",
+  "version": "4.87.11-JOB-91526-.8+54fc6d88",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.56.0",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.9.4",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -72,6 +72,8 @@
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
+    "date-fns": "^2.0.0",
+    "date-fns-tz": "^2.0.0",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -80,5 +82,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "5ddeb02c0553241a32a1ef03b5231894b690fa7b"
+  "gitHead": "54fc6d8847a17e457114e3388edebc8d11c7e847"
 }