@jobber/components 4.24.0 → 4.24.1-JOB-73446.18

package/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  rules: {
+    "import/no-internal-modules": [
+      "error",
+      {
+        allow: ["**"],
+      },
+    ],
+  },
+};

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,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-e9b345ff.js');
+var InputText = require('../InputText-c66e199a.js');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
 require('../FormField-090113ec.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/Banner/Banner.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { IconNames } from "@jobber/design";
 import { ButtonProps } from "../Button";
 export type BannerType = "notice" | "success" | "warning" | "error";
 interface BannerProps {
@@ -13,7 +14,11 @@ interface BannerProps {
      * @default true
      */
     readonly dismissible?: boolean;
+    /**
+     * Adds an icon to the left of the banner content
+     */
+    readonly icon?: IconNames;
     onDismiss?(): void;
 }
-export declare function Banner({ children, type, primaryAction, dismissible, onDismiss, }: BannerProps): JSX.Element;
+export declare function Banner({ children, type, primaryAction, dismissible, icon, onDismiss, }: BannerProps): JSX.Element;
 export {};

package/dist/Banner/components/BannerIcon/BannerIcon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IconNames } from "@jobber/design";
+export interface BannerIconProps {
+    icon: IconNames;
+}
+export declare function BannerIcon({ icon }: BannerIconProps): JSX.Element;

package/dist/Banner/components/BannerIcon/index.d.ts

@@ -0,0 +1 @@
+export * from "./BannerIcon";

package/dist/Banner/index.js

@@ -18,7 +18,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z$1 = ".meuT8gYQPJU- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.y4BapyZr-fo- > a {\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n}\n\n.y4BapyZr-fo- > a:hover {\n  color: rgb(1, 41, 57);\n  color: var(--color-blue);\n}\n\n._6v1woNSLEvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n.y4BapyZr-fo- {\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._6v1woNSLEvc- > *:last-child {\n  margin-bottom: 0;\n}\n\n.bocgLmEhcTU- .y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.rtNjEzmABX4- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n.lunQ5SOfyLg- {\n  margin: calc((16px / 8) * -1) 0;\n  margin: calc(calc(16px / 8) * -1) 0;\n  margin: calc(var(--space-smallest) * -1) 0;\n  padding: calc(16px / 8);\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n.lunQ5SOfyLg-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n.lunQ5SOfyLg-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n";
+var css_248z$1 = ".meuT8gYQPJU- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.y4BapyZr-fo- > a {\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n}\n\n.y4BapyZr-fo- > a:hover {\n  color: rgb(1, 41, 57);\n  color: var(--color-blue);\n}\n\n._6v1woNSLEvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (max-width: 489.98px) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n.y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._6v1woNSLEvc- > *:last-child {\n  margin-bottom: 0;\n}\n\n.bocgLmEhcTU- .y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.rtNjEzmABX4- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n@media (max-width: 489.98px) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n.lunQ5SOfyLg- {\n  margin: calc((16px / 8) * -1) 0;\n  margin: calc(calc(16px / 8) * -1) 0;\n  margin: calc(var(--space-smallest) * -1) 0;\n  padding: calc(16px / 8);\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n.lunQ5SOfyLg-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n.lunQ5SOfyLg-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n";
 var styles = {"banner":"meuT8gYQPJU-","bannerChildren":"y4BapyZr-fo-","bannerContent":"_6v1woNSLEvc-","medium":"bocgLmEhcTU-","bannerAction":"rtNjEzmABX4-","closeButton":"lunQ5SOfyLg-"};
 styleInject_es.styleInject(css_248z$1);
 
@@ -26,7 +26,11 @@ var css_248z = ".wWW-2T7rCV0- {\n  background-color: rgb(226, 241, 250);\n  back
 var types = {"notice":"wWW-2T7rCV0-","success":"_7h8FUHIkVjg-","warning":"d5fXcE1L0lc-","error":"oYaw-T3c0IU-"};
 styleInject_es.styleInject(css_248z);
 
-function Banner({ children, type, primaryAction, dismissible = true, onDismiss, }) {
+function BannerIcon({ icon }) {
+    return React__default["default"].createElement(Icon.Icon, { name: icon, customColor: "greyBlue" });
+}
+
+function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
     const [showBanner, setShowBanner] = React.useState(true);
     const bannerWidths = {
         small: 320,
@@ -53,6 +57,7 @@ function Banner({ children, type, primaryAction, dismissible = true, onDismiss,
     });
     return (React__default["default"].createElement(React__default["default"].Fragment, null, showBanner && (React__default["default"].createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
         React__default["default"].createElement("div", { className: styles.bannerContent },
+            icon && React__default["default"].createElement(BannerIcon, { icon: icon }),
             React__default["default"].createElement("div", { className: styles.bannerChildren },
                 React__default["default"].createElement(BannerChildren, null, children)),
             primaryAction && (React__default["default"].createElement("div", { className: styles.bannerAction },

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

package/dist/{InputText-e9b345ff.js → InputText-c66e199a.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.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.24.0",
+  "version": "4.24.1-JOB-73446.18+8d79ecb0",
   "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": "9fd0b22b3c6f4f50847e35ee070f9c8ff562927c"
+  "gitHead": "8d79ecb06179867364568a12ca5496fbd7d58ed2"
 }