@jobber/components 4.13.0 → 4.14.0

package/dist/Autocomplete/Autocomplete.d.ts

@@ -3,7 +3,7 @@ import { XOR } from "ts-xor";
 import { GroupOption, Option } from "./Option";
 import { FormFieldProps } from "../FormField";
 type OptionCollection = XOR<Option[], GroupOption[]>;
-interface AutocompleteProps extends Pick<FormFieldProps, "size" | "onBlur" | "onFocus" | "invalid"> {
+interface AutocompleteProps extends Pick<FormFieldProps, "size" | "onBlur" | "onFocus" | "invalid" | "name" | "validations"> {
     /**
      * Initial options to show when user first focuses the Autocomplete
      */
@@ -44,5 +44,5 @@ interface AutocompleteProps extends Pick<FormFieldProps, "size" | "onBlur" | "on
  * 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, }: AutocompleteProps): JSX.Element;
+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

@@ -43,7 +43,7 @@ var IndexChange;
 })(IndexChange || (IndexChange = {}));
 function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     const [highlightedIndex, setHighlightedIndex] = React.useState(0);
-    const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo);
+    const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
     const detectSeparatorCondition = (option) => option.description || option.details;
     const detectGroups = (option) => option.options;
     const addSeparators = options.some(detectSeparatorCondition);
@@ -128,7 +128,7 @@ function isGroup(option) {
         return true;
     return false;
 }
-function useRepositionMenu(attachTo) {
+function useRepositionMenu(attachTo, visible = false) {
     var _a;
     const [menuRef, setMenuRef] = React.useState();
     const popper = reactPopper.usePopper(attachTo.current, menuRef, {
@@ -137,6 +137,10 @@ function useRepositionMenu(attachTo) {
             { name: "flip", options: { fallbackPlacements: ["top"] } },
         ],
     });
+    React.useLayoutEffect(() => {
+        var _a;
+        (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
+    }, [visible]);
     const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
     return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
 }
@@ -146,7 +150,7 @@ function useRepositionMenu(attachTo) {
  * 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, }) {
+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);
@@ -162,8 +166,8 @@ function Autocomplete({ initialOptions = [], value, allowFreeForm = true, size =
         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, { autocomplete: false, size: size, invalid: invalid, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur }),
-        menuVisible && (React__default["default"].createElement(Menu, { attachTo: autocompleteRef, visible: true, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
+        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);
         if (newText === "") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "fe570a5bf87a69defb2bb360af5f3442cc10c77c"
+  "gitHead": "829d4fcd134dc6a9d3b2a0cd0890d0599ded1d08"
 }