@jobber/components 4.24.1 → 4.24.3

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,9 +1,15 @@
-/// <reference types="react" />
+import React from "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, "inputRef" | "invalid" | "name" | "onBlur" | "onFocus" | "prefix" | "size" | "suffix" | "validations"> {
+interface AutocompleteProps extends Pick<FormFieldProps, "invalid" | "name" | "onBlur" | "onFocus" | "prefix" | "size" | "suffix" | "validations"> {
+    /**
+     * @deprecated
+     * Use `ref` instead.
+     */
+    readonly inputRef?: FormFieldProps["inputRef"];
     /**
      * Initial options to show when user first focuses the Autocomplete
      */
@@ -40,5 +46,5 @@ interface AutocompleteProps extends Pick<FormFieldProps, "inputRef" | "invalid"
      */
     readonly placeholder: string;
 }
-export declare function Autocomplete({ initialOptions, value, allowFreeForm, size, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, validations, ...inputProps }: AutocompleteProps): JSX.Element;
+export declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<InputTextRef>>;
 export {};

package/dist/Autocomplete/index.js

@@ -13,10 +13,10 @@ 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-e9b345ff.js');
+var InputText = require('../InputText-13fda8a4.js');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
-require('../FormField-090113ec.js');
+require('../FormField-f75add82.js');
 require('uuid');
 require('react-hook-form');
 require('../Button-7698424c.js');
@@ -147,7 +147,7 @@ function useRepositionMenu(attachTo, visible = false) {
 
 // Max statements increased to make room for the debounce functions
 /* eslint max-statements: ["error", 14] */
-function Autocomplete(_a) {
+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"]);
     const [options, setOptions] = React.useState(initialOptions);
@@ -164,7 +164,7 @@ function Autocomplete(_a) {
         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({ autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        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)),
         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,5 +214,6 @@ function mapToOptions(items) {
         return result;
     }, []);
 }
+const Autocomplete = React.forwardRef(AutocompleteInternal);
 
 exports.Autocomplete = Autocomplete;

package/dist/DataTable/index.js

@@ -8,10 +8,10 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-8277f540.js');
+var Option = require('../Option-1ac0003d.js');
 var Button = require('../Button-7698424c.js');
 var Text = require('../Text-e7ed0974.js');
-require('../FormField-090113ec.js');
+require('../FormField-f75add82.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');

package/dist/FormField/index.js

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

package/dist/{FormField-090113ec.js → FormField-f75add82.js}

@@ -83,7 +83,9 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         React__default["default"].createElement("div", { className: wrapperClasses, style: wrapperInlineStyle },
             (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && React__default["default"].createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
             React__default["default"].createElement("div", { className: styles.inputWrapper },
-                React__default["default"].createElement("label", { className: styles.label, htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) ? labelStyle : undefined }, placeholder),
+                placeholder && (React__default["default"].createElement("label", { className: styles.label, htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
+                        ? labelStyle
+                        : undefined }, placeholder)),
                 (prefix === null || prefix === void 0 ? void 0 : prefix.label) && React__default["default"].createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
                 React__default["default"].createElement("div", { className: styles.childrenWrapper }, children),
                 (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React__default["default"].createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" })))),

package/dist/InputDate/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var omit = require('lodash/omit');
 var React = require('react');
-var FormField = require('../FormField-090113ec.js');
+var FormField = require('../FormField-f75add82.js');
 var DatePicker = require('../DatePicker-38b0c40b.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');

package/dist/InputEmail/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-090113ec.js');
+var FormField = require('../FormField-f75add82.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputNumber/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputNumber = require('../InputNumber-80a381e9.js');
+var InputNumber = require('../InputNumber-b5a7fe5a.js');
 require('react');
-require('../FormField-090113ec.js');
+require('../FormField-f75add82.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputNumber-80a381e9.js → InputNumber-b5a7fe5a.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-090113ec.js');
+var FormField = require('./FormField-f75add82.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputPassword/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-090113ec.js');
+var FormField = require('../FormField-f75add82.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputPhoneNumber/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var FormField = require('../FormField-090113ec.js');
+var FormField = require('../FormField-f75add82.js');
 require('uuid');
 require('classnames');
 require('../Button-7698424c.js');

package/dist/InputText/InputText.d.ts

@@ -7,6 +7,7 @@ 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,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-e9b345ff.js');
+var InputText = require('../InputText-13fda8a4.js');
 require('react');
-require('../FormField-090113ec.js');
+require('../FormField-f75add82.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputText-e9b345ff.js → InputText-13fda8a4.js}

@@ -1,15 +1,15 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-090113ec.js');
+var FormField = require('./FormField-f75add82.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function InputTextInternal(props, ref) {
-    const inputRef = React.createRef();
-    const actionsRef = React.createRef();
+    const inputRef = React.useRef(null);
+    const actionsRef = React.useRef(null);
     const rowRange = getRowRange();
     React.useImperativeHandle(ref, () => ({
         insert: (text) => {
@@ -27,6 +27,12 @@ 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/dist/InputTime/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-090113ec.js');
+var FormField = require('../FormField-f75add82.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{Option-8277f540.js → Option-1ac0003d.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-090113ec.js');
+var FormField = require('./FormField-f75add82.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/RecurringSelect/index.js

@@ -9,11 +9,11 @@ var RadioGroup = require('../RadioGroup-67a5f560.js');
 var Text = require('../Text-e7ed0974.js');
 require('classnames');
 require('../Typography-fd6f932a.js');
-var Option = require('../Option-8277f540.js');
-var InputNumber = require('../InputNumber-80a381e9.js');
+var Option = require('../Option-1ac0003d.js');
+var InputNumber = require('../InputNumber-b5a7fe5a.js');
 var InputGroup = require('../InputGroup-34e64048.js');
 var Content = require('../Content-a6590328.js');
-require('../FormField-090113ec.js');
+require('../FormField-f75add82.js');
 require('../tslib.es6-5b8768b7.js');
 require('react-hook-form');
 require('../Button-7698424c.js');

package/dist/Select/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-8277f540.js');
+var Option = require('../Option-1ac0003d.js');
 require('react');
-require('../FormField-090113ec.js');
+require('../FormField-f75add82.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.24.1",
+  "version": "4.24.3",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "b464a5ae9d3305c1dc1b92d99dc93bd042fefb7f"
+  "gitHead": "33085d6b006f5be78d2cc3c48ebba91d419cb461"
 }