@jobber/components 4.24.2 → 4.24.3-pre.4

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,15 +1,9 @@
-import React from "react";
+/// <reference types="react" />
 import { XOR } from "ts-xor";
 import { GroupOption, Option } from "./Option";
-import { InputTextRef } from "../InputText";
 import { FormFieldProps } from "../FormField";
 type OptionCollection = XOR<Option[], GroupOption[]>;
-interface AutocompleteProps extends Pick<FormFieldProps, "invalid" | "name" | "onBlur" | "onFocus" | "prefix" | "size" | "suffix" | "validations"> {
-    /**
-     * @deprecated
-     * Use `ref` instead.
-     */
-    readonly inputRef?: FormFieldProps["inputRef"];
+interface AutocompleteProps extends Pick<FormFieldProps, "size" | "onBlur" | "onFocus" | "invalid" | "name" | "validations"> {
     /**
      * Initial options to show when user first focuses the Autocomplete
      */
@@ -46,5 +40,9 @@ interface AutocompleteProps extends Pick<FormFieldProps, "invalid" | "name" | "o
      */
     readonly placeholder: string;
 }
-export declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<InputTextRef>>;
+/**
+ * Max statements disabled here to make room for the
+ * debounce functions.
+ */
+export declare function Autocomplete({ initialOptions, value, allowFreeForm, size, invalid, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, name, validations, }: AutocompleteProps): JSX.Element;
 export {};

package/dist/Autocomplete/index.js

@@ -13,7 +13,7 @@ var reactPopper = require('react-popper');
 var Text = require('../Text-e7ed0974.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-a1191b15.js');
-var InputText = require('../InputText-c66e199a.js');
+var InputText = require('../InputText-e9b345ff.js');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
 require('../FormField-090113ec.js');
@@ -145,14 +145,16 @@ function useRepositionMenu(attachTo, visible = false) {
     return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
 }
 
-// Max statements increased to make room for the debounce functions
-/* eslint max-statements: ["error", 14] */
-function AutocompleteInternal(_a, ref) {
-    var _b;
-    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations } = _a, inputProps = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations"]);
+/**
+ * Max statements disabled here to make room for the
+ * debounce functions.
+ */
+// eslint-disable-next-line max-statements
+function Autocomplete({ initialOptions = [], value, allowFreeForm = true, size = undefined, invalid, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, name, validations, }) {
+    var _a;
     const [options, setOptions] = React.useState(initialOptions);
     const [menuVisible, setMenuVisible] = React.useState(false);
-    const [inputText, setInputText] = React.useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
+    const [inputText, setInputText] = React.useState((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     const autocompleteRef = React.useRef(null);
     const delayedSearch = debounce__default["default"](updateSearch, debounceRate);
     React.useEffect(() => {
@@ -164,7 +166,7 @@ function AutocompleteInternal(_a, ref) {
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
     return (React__default["default"].createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
-        React__default["default"].createElement(InputText.InputText, Object.assign({ ref: ref, autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        React__default["default"].createElement(InputText.InputText, { autocomplete: false, size: size, invalid: invalid, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, name: name, validations: validations }),
         menuVisible && (React__default["default"].createElement(Menu, { attachTo: autocompleteRef, visible: menuVisible && options.length > 0, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
     function updateInput(newText) {
         setInputText(newText);
@@ -214,6 +216,5 @@ function mapToOptions(items) {
         return result;
     }, []);
 }
-const Autocomplete = React.forwardRef(AutocompleteInternal);
 
 exports.Autocomplete = Autocomplete;

package/dist/DatePicker/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-38b0c40b.js');
+var DatePicker = require('../DatePicker-940cdb21.js');
 require('react');
 require('classnames');
 require('react-datepicker');

package/dist/{DatePicker-38b0c40b.js → DatePicker-940cdb21.js}

@@ -68,6 +68,7 @@ function useFocusOnSelectedDate() {
 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 { datePickerRef } = useDatePickerFocus(ref, open, inline);
     const wrapperClassName = classnames__default["default"](styles.datePickerWrapper, {
         // react-datepicker uses this class name to not close the date picker when
         // the activator is clicked
@@ -87,7 +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"], { calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, 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"], { calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, enableTabLoop: false, onChange: handleChange, maxDate: maxDate, minDate: minDate, ref: datePickerRef, 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
@@ -106,5 +107,31 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
         setOpen(false);
     }
 }
+function useDatePickerFocus(ref, open, inline) {
+    const datePickerRef = React.useRef(null);
+    const handleTabbing = (event) => {
+        setTimeout(() => {
+            var _a;
+            if (event.key === "Tab" &&
+                ref.current &&
+                !ref.current.contains(document.activeElement)) {
+                (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(false);
+            }
+        }, 0);
+    };
+    React.useEffect(() => {
+        var _a;
+        if (!inline && open) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleTabbing);
+        }
+        return () => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleTabbing);
+        };
+    }, [open, ref, inline, handleTabbing]);
+    return {
+        datePickerRef,
+    };
+}
 
 exports.DatePicker = DatePicker;

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-090113ec.js');
-var DatePicker = require('../DatePicker-38b0c40b.js');
+var DatePicker = require('../DatePicker-940cdb21.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputText/InputText.d.ts

@@ -7,7 +7,6 @@ export interface InputTextRef {
     insert(text: string): void;
     blur(): void;
     focus(): void;
-    scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
 }
 export declare const InputText: React.ForwardRefExoticComponent<({
     readonly multiline: true;

package/dist/InputText/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-c66e199a.js');
+var InputText = require('../InputText-e9b345ff.js');
 require('react');
 require('../FormField-090113ec.js');
 require('../tslib.es6-5b8768b7.js');

package/dist/{InputText-c66e199a.js → InputText-e9b345ff.js}

@@ -8,8 +8,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function InputTextInternal(props, ref) {
-    const inputRef = React.useRef(null);
-    const actionsRef = React.useRef(null);
+    const inputRef = React.createRef();
+    const actionsRef = React.createRef();
     const rowRange = getRowRange();
     React.useImperativeHandle(ref, () => ({
         insert: (text) => {
@@ -27,12 +27,6 @@ function InputTextInternal(props, ref) {
                 input.focus();
             }
         },
-        scrollIntoView: arg => {
-            const input = inputRef.current;
-            if (input) {
-                input.scrollIntoView(arg);
-            }
-        },
     }));
     React.useLayoutEffect(() => {
         if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.24.2",
+  "version": "4.24.3-pre.4+f00e5e03",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.44.4",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.1.5",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2a7429f445c7d4af80b9706b05796d62bc810bc9"
+  "gitHead": "f00e5e03b772ed91cc48ebe14a664cb4ee6116a1"
 }