@jobber/components 4.12.1 → 4.13.1

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 });
 }
@@ -163,7 +167,7 @@ function Autocomplete({ initialOptions = [], value, allowFreeForm = true, size =
     }, [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 }))));
+        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/dist/InputPhoneNumber/InputPhoneNumber.d.ts

@@ -1,8 +1,16 @@
 /// <reference types="react" />
+import { InputMaskProps } from "./InputMask";
 import { CommonFormFieldProps, FormFieldProps } from "../FormField";
 interface InputPhoneNumberProps extends Omit<CommonFormFieldProps, "align">, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "validations" | "readonly" | "prefix" | "suffix"> {
     readonly value: string;
     readonly onChange: (value: string) => void;
+    /**
+     * A pattern to specify the format to display the phone number in.
+     * For example if you want to display the format for [Denmark](https://en.wikipedia.org/wiki/National_conventions_for_writing_telephone_numbers#Denmark)
+     * you could set it to `** ** ** **`
+     * @default "(***) ***-****"
+     */
+    readonly pattern?: InputMaskProps["pattern"];
     /**
      * Shows a "required" validation message when the component is left empty.
      */

package/dist/InputPhoneNumber/index.js

@@ -82,8 +82,7 @@ function getMaskedValue(cleanVal, specialChars) {
 
 function InputPhoneNumber(_a) {
     var { required } = _a, props = tslib_es6.__rest(_a, ["required"]);
-    const { placeholder, validations } = props;
-    const pattern = "(***) ***-****";
+    const { placeholder, validations, pattern = "(***) ***-****" } = props;
     const errorSubject = placeholder || "Phone number";
     return (React__default["default"].createElement(InputMask, { pattern: pattern, strict: false },
         React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: "tel", validations: Object.assign(Object.assign({ required: {
@@ -91,10 +90,17 @@ function InputPhoneNumber(_a) {
                     message: `${errorSubject} is required`,
                 } }, validations), { validate: getPhoneNumberValidation }) }))));
     function getPhoneNumberValidation(value) {
-        // Remove space, parenthesis and hyphen
-        const cleanValue = value.replace(/[- )(]/g, "");
-        if (cleanValue.length < 10) {
-            return `${errorSubject} must contain ten or more digits`;
+        // Get unique characters that aren't * in the pattern
+        const patternNonDelimterCharacters = pattern
+            .split("")
+            .filter(char => char !== "*")
+            .filter((char, index, arr) => arr.indexOf(char) === index);
+        const specialCharacters = patternNonDelimterCharacters.join(" ");
+        // Remove special characters from pattern
+        const cleanValue = value.replace(new RegExp(`[${specialCharacters}]`, "g"), "");
+        const cleanValueRequiredLength = (pattern.match(/\*/g) || []).length;
+        if (cleanValue.length < cleanValueRequiredLength) {
+            return `${errorSubject} must contain ${cleanValueRequiredLength} or more digits`;
         }
         if (typeof (validations === null || validations === void 0 ? void 0 : validations.validate) === "function") {
             return validations.validate(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.12.1",
+  "version": "4.13.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "8ef4129d2e9df9e4436f0b848c5809dd23f7cafc"
+  "gitHead": "56af06fdafe3039a0dd9412eded62f771a93a0d0"
 }