@jobber/components 4.7.4-timing.0 → 4.8.0

package/dist/Autocomplete/Menu.d.ts

@@ -1,10 +1,14 @@
-/// <reference types="react" />
+import React, { RefObject } from "react";
 import { Option } from "./Option";
 interface MenuProps {
     readonly visible: boolean;
     readonly options: Option[];
     readonly selectedOption?: Option;
+    /**
+     * Element that it's attached to when the menu opens.
+     */
+    readonly attachTo: RefObject<Element | null>;
     onOptionSelect(chosenOption: Option): void;
 }
-export declare function Menu({ visible, options, selectedOption, onOptionSelect, }: MenuProps): JSX.Element;
+export declare function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }: MenuProps): React.ReactPortal;
 export {};

package/dist/Autocomplete/index.js

@@ -8,13 +8,15 @@ var debounce = require('lodash/debounce');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
 var useEventListener = require('@use-it/event-listener');
+var ReactDOM = require('react-dom');
+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-0a76a9f9.js');
+var InputText = require('../InputText-73113193.js');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
-require('../FormField-03e36a98.js');
+require('../FormField-76853659.js');
 require('uuid');
 require('react-hook-form');
 require('../Button-69409e46.js');
@@ -39,19 +41,16 @@ var IndexChange;
     IndexChange[IndexChange["Previous"] = -1] = "Previous";
     IndexChange[IndexChange["Next"] = 1] = "Next";
 })(IndexChange || (IndexChange = {}));
-function Menu({ visible, options, selectedOption, onOptionSelect, }) {
+function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     const [highlightedIndex, setHighlightedIndex] = React.useState(0);
-    const optionMenuClass = classnames__default["default"](styles.options, {
-        [styles.visible]: visible,
-    });
-    const menuDiv = React.useRef();
+    const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo);
     const detectSeparatorCondition = (option) => option.description || option.details;
     const detectGroups = (option) => option.options;
     const addSeparators = options.some(detectSeparatorCondition);
     const initialHighlight = options.some(detectGroups) ? 1 : 0;
     setupKeyListeners();
     React.useEffect(() => setHighlightedIndex(initialHighlight), [options]);
-    return (React__default["default"].createElement("div", { className: optionMenuClass, ref: menuDiv }, options.map((option, index) => {
+    const menu = (React__default["default"].createElement("div", Object.assign({ className: classnames__default["default"](styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }) }, attributes.popper), options.map((option, index) => {
         const optionClass = classnames__default["default"](styles.option, {
             [styles.active]: index === highlightedIndex,
             [styles.separator]: addSeparators,
@@ -69,40 +68,28 @@ function Menu({ visible, options, selectedOption, onOptionSelect, }) {
                 option.details !== undefined && (React__default["default"].createElement("div", { className: styles.details },
                     React__default["default"].createElement(Text.Text, null, option.details))))));
     })));
+    return ReactDOM.createPortal(menu, document.body);
     function setupKeyListeners() {
+        React.useEffect(() => {
+            var _a, _b;
+            (_b = menuRef === null || menuRef === void 0 ? void 0 : (_a = menuRef.children[highlightedIndex]).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }, [highlightedIndex]);
         useOnKeyDown("ArrowDown", (event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Next);
             if (indexChange) {
                 setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
             }
-            if (menuDiv.current) {
-                scrollMenuIfItemNotInView(menuDiv.current, "down");
-            }
         });
         useOnKeyDown("ArrowUp", (event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Previous);
             if (indexChange) {
                 setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
             }
-            if (menuDiv.current) {
-                scrollMenuIfItemNotInView(menuDiv.current, "up");
-            }
         });
-        function scrollMenuIfItemNotInView(menuDivElement, direction) {
-            const itemDiv = menuDivElement.querySelector(`button.${styles.option}:nth-child(${highlightedIndex + 1})`);
-            if (!itemDiv)
-                return;
-            const menuTop = menuDivElement.getBoundingClientRect().top;
-            const { top: itemTop, height: itemHeight, bottom: itemBottom, } = itemDiv.getBoundingClientRect();
-            const itemTrueBottom = itemBottom + itemHeight;
-            const menuBottom = menuDivElement.getBoundingClientRect().bottom;
-            if (direction == "up" && itemTop - itemHeight < menuTop) {
-                menuDivElement.scrollTop -= itemHeight;
-            }
-            else if (direction == "down" && itemTrueBottom > menuBottom) {
-                menuDivElement.scrollTop += itemHeight;
-            }
-        }
         useOnKeyDown("Enter", (event) => {
             if (!visible)
                 return;
@@ -141,6 +128,18 @@ function isGroup(option) {
         return true;
     return false;
 }
+function useRepositionMenu(attachTo) {
+    var _a;
+    const [menuRef, setMenuRef] = React.useState();
+    const popper = reactPopper.usePopper(attachTo.current, menuRef, {
+        modifiers: [
+            { name: "offset", options: { offset: [0, 8] } },
+            { name: "flip", options: { fallbackPlacements: ["top"] } },
+        ],
+    });
+    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
+}
 
 /**
  * Max statements disabled here to make room for the
@@ -152,6 +151,7 @@ function Autocomplete({ initialOptions = [], value, allowFreeForm = true, size =
     const [options, setOptions] = React.useState(initialOptions);
     const [menuVisible, setMenuVisible] = React.useState(false);
     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(() => {
         delayedSearch();
@@ -161,9 +161,9 @@ function Autocomplete({ initialOptions = [], value, allowFreeForm = true, size =
         var _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 },
+    return (React__default["default"].createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
         React__default["default"].createElement(InputText.InputText, { autocomplete: false, size: size, invalid: invalid, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur }),
-        menuVisible && (React__default["default"].createElement(Menu, { visible: true, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
+        menuVisible && (React__default["default"].createElement(Menu, { attachTo: autocompleteRef, visible: true, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
     function updateInput(newText) {
         setInputText(newText);
         if (newText === "") {

package/dist/DataTable/index.js

@@ -8,10 +8,10 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-1447547b.js');
+var Option = require('../Option-26e09990.js');
 var Button = require('../Button-69409e46.js');
 var Text = require('../Text-e7ed0974.js');
-require('../FormField-03e36a98.js');
+require('../FormField-76853659.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-03e36a98.js');
+var FormField = require('../FormField-76853659.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');

package/dist/{FormField-03e36a98.js → FormField-76853659.js}

@@ -130,7 +130,7 @@ function FormField(props) {
     const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
     React.useEffect(() => {
         if (value != undefined) {
-            setValue(controlledName, value, { shouldValidate: true });
+            setValue(controlledName, value);
         }
     }, [value, watch(controlledName)]);
     React.useImperativeHandle(actionsRef, () => ({

package/dist/InputDate/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lodash = require('lodash');
 var React = require('react');
-var FormField = require('../FormField-03e36a98.js');
+var FormField = require('../FormField-76853659.js');
 var DatePicker = require('../DatePicker-b704c15b.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-03e36a98.js');
+var FormField = require('../FormField-76853659.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputNumber/index.js

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

package/dist/InputPassword/index.js

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

package/dist/InputText/InputText.d.ts

@@ -18,7 +18,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly inline?: boolean | undefined;
     loading?: boolean | undefined;
     readonly name?: string | undefined;
-    onChange?: ((newValue: string | number | boolean | Date, event?: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | undefined) => void) | undefined;
+    onChange?: ((newValue: string | number | boolean | Date, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined) => void) | undefined;
     onValidation?: ((message: string) => void) | undefined;
     readonly placeholder?: string | undefined;
     readonly size?: "large" | "small" | undefined;
@@ -28,7 +28,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
     readonly autocomplete?: boolean | import("../FormField").AutocompleteTypes | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | undefined;
+    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
     readonly keyboard?: "numeric" | "decimal" | undefined;
     readonly maxLength?: number | undefined;
     readonly suffix?: {
@@ -66,7 +66,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly inline?: boolean | undefined;
     loading?: boolean | undefined;
     readonly name?: string | undefined;
-    onChange?: ((newValue: string | number | boolean | Date, event?: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | undefined) => void) | undefined;
+    onChange?: ((newValue: string | number | boolean | Date, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined) => void) | undefined;
     onValidation?: ((message: string) => void) | undefined;
     readonly placeholder?: string | undefined;
     readonly size?: "large" | "small" | undefined;
@@ -76,7 +76,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
     readonly autocomplete?: boolean | import("../FormField").AutocompleteTypes | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | undefined;
+    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
     readonly keyboard?: "numeric" | "decimal" | undefined;
     readonly maxLength?: number | undefined;
     readonly suffix?: {

package/dist/InputText/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-0a76a9f9.js');
+var InputText = require('../InputText-73113193.js');
 require('react');
-require('../FormField-03e36a98.js');
+require('../FormField-76853659.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputText-0a76a9f9.js → InputText-73113193.js}

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

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-03e36a98.js');
+var FormField = require('../FormField-76853659.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{Option-1447547b.js → Option-26e09990.js}

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

package/dist/Select/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-1447547b.js');
+var Option = require('../Option-26e09990.js');
 require('react');
-require('../FormField-03e36a98.js');
+require('../FormField-76853659.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.7.4-timing.0+c7f6a33d",
+  "version": "4.8.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,9 +17,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.33.1-timing.0+c7f6a33d",
-    "@jobber/formatters": "^0.2.2",
-    "@jobber/hooks": "^2.0.2",
+    "@jobber/design": "^0.34.0",
+    "@jobber/formatters": "*",
+    "@jobber/hooks": "*",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -82,5 +82,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "c7f6a33d267b9257752b98e119a3c940dcfb67cc"
+  "gitHead": "ac2690b2838431ddd1d77c79944385f8820f8476"
 }