@jobber/components 4.67.2-JOB-84261.6 → 4.67.2-pre.25

package/dist/{InputFile-540c1657.js → InputFile-5c44f0b4.js}

@@ -1,15 +1,13 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
+var tslib_es6 = require('./tslib.es6-a575af05.js');
 var React = require('react');
 var classnames = require('classnames');
 var reactDropzone = require('react-dropzone');
 var axios = require('axios');
-var uuid = require('uuid');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Button = require('./Button-163a0641.js');
-var Content = require('./Content-2ca1ffe1.js');
-var Typography = require('./Typography-973b122e.js');
+var Button = require('./Button-8bde6560.js');
+var Content = require('./Content-80486307.js');
+var Typography = require('./Typography-75f58b60.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,11 +15,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 
-var css_248z = ".grljXfTWj84- {\n  font-size: 0;\n  line-height: 0;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.grljXfTWj84-:focus,\n.grljXfTWj84-:focus-within {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n.WHhHWgaoXk4- {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border: rgb(217, 223, 225) dashed calc(16px / 8);\n  border: var(--color-border) dashed var(--border-thick);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  text-align: center;\n}\n\n.WHhHWgaoXk4-.n1h-T2metRA- {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n";
 var styles = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-"};
-styleInject_es.styleInject(css_248z);
 
-function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, }) {
+function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, name, onUploadStart, onUploadProgress, onUploadComplete, }) {
+    const id = React.useId();
     const options = {
         multiple: allowMultiple,
         onDrop: React.useCallback(handleDrop, []),
@@ -39,7 +36,7 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
         [styles.active]: isDragActive,
     });
     return (React__default["default"].createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
-        React__default["default"].createElement("input", Object.assign({}, getInputProps())),
+        React__default["default"].createElement("input", Object.assign({ name: name }, getInputProps())),
         variation === "dropzone" && (React__default["default"].createElement(Content.Content, { spacing: "small" },
             React__default["default"].createElement(Button.Button, { label: buttonLabel, size: "small", type: "secondary" }),
             size === "base" && (React__default["default"].createElement(Typography.Typography, { size: "small", textColor: "textSecondary" }, hintText)))),
@@ -51,7 +48,7 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
     }
     function uploadFile(file) {
         return tslib_es6.__awaiter(this, void 0, void 0, function* () {
-            const { url, key = uuid.v1(), fields = {}, httpMethod = "POST", } = yield getUploadParams(file);
+            const { url, key = id, fields = {}, httpMethod = "POST", } = yield getUploadParams(file);
             const fileUpload = getFileUpload(file, key, url);
             onUploadStart && onUploadStart(Object.assign({}, fileUpload));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/InputGroup/index.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputGroup = require('../InputGroup-8d4fd4eb.js');
+var InputGroup = require('../InputGroup-88bec8c9.js');
 require('react');
 require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
 
 
 

package/dist/InputGroup-88bec8c9.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var styles = {"vertical":"_4bvHwa3-qBA-","horizontal":"bHm4WuX8ToY-","inputGroup":"nmDPgrXofeE-"};
+
+function InputGroup({ children, flowDirection = "vertical", }) {
+    if (isInvalidGroupNesting(children))
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    const className = classnames__default["default"](styles.inputGroup, styles[flowDirection]);
+    return React__default["default"].createElement("div", { className: className }, children);
+}
+function isInvalidGroupNesting(childs) {
+    return React__default["default"].Children.toArray(childs).some(child => {
+        if (child.type === InputGroup &&
+            child.props.flowDirection != "horizontal") {
+            console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/?path=/story/components-forms-and-inputs-inputgroup-web--nested`);
+            return true;
+        }
+        return false;
+    });
+}
+
+exports.InputGroup = InputGroup;

package/dist/InputNumber/index.js

@@ -2,23 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputNumber = require('../InputNumber-d9ebabaa.js');
+var InputNumber = require('../InputNumber-ed655bae.js');
 require('react');
-require('../FormField-dfc061ca.js');
-require('../tslib.es6-5b8768b7.js');
-require('uuid');
+require('../FormField-18eda132.js');
+require('../tslib.es6-a575af05.js');
 require('react-hook-form');
-require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-163a0641.js');
+require('@jobber/hooks/useShowClear');
+require('../Button-8bde6560.js');
 require('react-router-dom');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../Typography-973b122e.js');
-require('../Text-4a2bc89f.js');
-require('../InputValidation-179f0926.js');
+require('../Typography-75f58b60.js');
+require('../Text-9f261dde.js');
+require('../InputValidation-fdc891af.js');
 require('framer-motion');
-require('../Spinner-9d8fc7ff.js');
+require('../Spinner-cac356ee.js');
 
 
 

package/dist/{InputNumber-d9ebabaa.js → InputNumber-ed655bae.js}

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

package/dist/InputPassword/index.js

@@ -3,21 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-dfc061ca.js');
-require('../tslib.es6-5b8768b7.js');
-require('uuid');
+var FormField = require('../FormField-18eda132.js');
+require('../tslib.es6-a575af05.js');
 require('react-hook-form');
-require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-163a0641.js');
+require('@jobber/hooks/useShowClear');
+require('../Button-8bde6560.js');
 require('react-router-dom');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../Typography-973b122e.js');
-require('../Text-4a2bc89f.js');
-require('../InputValidation-179f0926.js');
+require('../Typography-75f58b60.js');
+require('../Text-9f261dde.js');
+require('../InputValidation-fdc891af.js');
 require('framer-motion');
-require('../Spinner-9d8fc7ff.js');
+require('../Spinner-cac356ee.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputPhoneNumber/index.js

@@ -2,30 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-a575af05.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var FormField = require('../FormField-dfc061ca.js');
-require('uuid');
+var FormField = require('../FormField-18eda132.js');
 require('classnames');
-require('../Button-163a0641.js');
+require('@jobber/hooks/useShowClear');
+require('../Button-8bde6560.js');
 require('react-router-dom');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../Typography-973b122e.js');
-require('../Text-4a2bc89f.js');
-require('../InputValidation-179f0926.js');
+require('../Typography-75f58b60.js');
+require('../Text-9f261dde.js');
+require('../InputValidation-fdc891af.js');
 require('framer-motion');
-require('../Spinner-9d8fc7ff.js');
+require('../Spinner-cac356ee.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var css_248z = ".L7WK-i5uaOk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  height: var(--field--height);\n  padding-top: var(--field--padding-top);\n  padding-bottom: var(--field--padding-bottom);\n  padding-left: var(--field--padding-left);\n  padding-right: var(--field--padding-right);\n  color: rgb(181, 181, 181);\n  color: var(--color-grey);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: var(--field--value-lineHeight);\n  pointer-events: none;\n}\n\n.q1wXBupm5Xc- {\n  visibility: hidden;\n  opacity: 0;\n}\n";
 var styles = {"mask":"L7WK-i5uaOk-","hiddenValue":"q1wXBupm5Xc-"};
-styleInject_es.styleInject(css_248z);
 
 function InputMask({ children, delimiter = "*", pattern, strict = true, }) {
     const { value: inputValue, onChange } = children.props;

package/dist/InputText/InputText.d.ts

@@ -24,6 +24,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly placeholder?: string | undefined;
     readonly size?: "large" | "small" | undefined;
     readonly value?: string | number | Date | undefined;
+    readonly clearable?: "always" | "never" | undefined;
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
     readonly defaultValue?: string | Date | undefined;
@@ -61,6 +62,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly placeholder?: string | undefined;
     readonly size?: "large" | "small" | undefined;
     readonly value?: string | number | Date | undefined;
+    readonly clearable?: "always" | "never" | undefined;
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
     readonly defaultValue?: string | Date | undefined;

package/dist/InputText/index.js

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-f7c45ee5.js');
+var InputText = require('../InputText-c68964ff.js');
 require('react');
-require('../FormField-dfc061ca.js');
-require('../tslib.es6-5b8768b7.js');
-require('uuid');
+require('../useSafeLayoutEffect-b63708b1.js');
+require('../FormField-18eda132.js');
+require('../tslib.es6-a575af05.js');
 require('react-hook-form');
-require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-163a0641.js');
+require('@jobber/hooks/useShowClear');
+require('../Button-8bde6560.js');
 require('react-router-dom');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../Typography-973b122e.js');
-require('../Text-4a2bc89f.js');
-require('../InputValidation-179f0926.js');
+require('../Typography-75f58b60.js');
+require('../Text-9f261dde.js');
+require('../InputValidation-fdc891af.js');
 require('framer-motion');
-require('../Spinner-9d8fc7ff.js');
+require('../Spinner-cac356ee.js');
 
 
 

package/dist/InputText/useSafeLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const useSafeLayoutEffect: typeof React.useLayoutEffect;

package/dist/{InputText-f7c45ee5.js → InputText-c68964ff.js}

@@ -1,7 +1,8 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-dfc061ca.js');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-b63708b1.js');
+var FormField = require('./FormField-18eda132.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,7 +35,7 @@ function InputTextInternal(props, ref) {
             }
         },
     }));
-    React.useLayoutEffect(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
             resize(inputRef.current);
         }

package/dist/InputTime/InputTime.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import { InputTimeProps } from "./InputTimeProps";
-export declare function InputTime({ defaultValue, value, onChange, ...params }: InputTimeProps): JSX.Element;
+declare function InputTimeSafe(props: InputTimeProps): JSX.Element;
+export declare const InputTime: typeof InputTimeSafe | (() => null);
+export {};

package/dist/InputTime/InputTime.disabledTest.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/InputTime/InputTimeProps.d.ts

@@ -1,6 +1,6 @@
 import { CivilTime } from "@std-proposal/temporal";
 import { CommonFormFieldProps, FormFieldProps } from "../FormField";
-export interface InputTimeProps extends Pick<CommonFormFieldProps, "align" | "description" | "disabled" | "invalid" | "inline" | "loading" | "name" | "onValidation" | "placeholder" | "size">, Pick<FormFieldProps, "maxLength" | "readonly" | "autocomplete" | "max" | "min" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations"> {
+export interface InputTimeProps extends Pick<CommonFormFieldProps, "align" | "description" | "disabled" | "invalid" | "inline" | "loading" | "name" | "onValidation" | "placeholder" | "size" | "clearable">, Pick<FormFieldProps, "maxLength" | "readonly" | "autocomplete" | "max" | "min" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations"> {
     /**
      * Intial value of the input. Only use this when you need to prepopulate the
      * field with a data that is not controlled by the components state. If a

package/dist/InputTime/InternalInputTime.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { InputTimeProps } from "./InputTimeProps";
+export declare function InternalInputTime({ defaultValue, value, onChange, ...params }: InputTimeProps): JSX.Element;

package/dist/InputTime/SupportsTimePolyfill.d.ts

@@ -0,0 +1,2 @@
+import supportsTime from "time-input-polyfill/supportsTime";
+export { supportsTime };

package/dist/InputTime/TimeInputPolyfill.client.d.ts

@@ -0,0 +1,2 @@
+import TimePolyfill from "time-input-polyfill";
+export { TimePolyfill };