@jobber/components 4.7.1-pre.2 → 4.7.1-pre1.4

package/dist/Autocomplete/index.js

@@ -11,10 +11,10 @@ var useEventListener = require('@use-it/event-listener');
 var Text = require('../Text-e7ed0974.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-a1191b15.js');
-var InputText = require('../InputText-32cbc583.js');
+var InputText = require('../InputText-0a76a9f9.js');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
-require('../FormField-771f6e12.js');
+require('../FormField-03e36a98.js');
 require('uuid');
 require('react-hook-form');
 require('../Button-69409e46.js');

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-ee917602.js');
+var Option = require('../Option-1447547b.js');
 var Button = require('../Button-69409e46.js');
 var Text = require('../Text-e7ed0974.js');
-require('../FormField-771f6e12.js');
+require('../FormField-03e36a98.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-771f6e12.js');
+var FormField = require('../FormField-03e36a98.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');

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

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

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-d2c30cbc.js');
+var FormatFile = require('../FormatFile-38731cfb.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -24,7 +24,6 @@ require('../Markdown-53a0bfda.js');
 require('react-markdown');
 require('../Text-e7ed0974.js');
 require('../Emphasis-76a10790.js');
-require('../Glimmer-f670c24e.js');
 require('../ProgressBar-5dfc1885.js');
 
 

package/dist/{FormatFile-d2c30cbc.js → FormatFile-38731cfb.js}

@@ -6,7 +6,6 @@ var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-69409e46.js');
 var ConfirmationModal = require('./ConfirmationModal-3f9a3524.js');
-var Glimmer = require('./Glimmer-f670c24e.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-fd6f932a.js');
 var Text = require('./Text-e7ed0974.js');
@@ -34,8 +33,8 @@ var css_248z$1 = ".M9Y7sOk6lTc- {\n  display: grid;\n  grid-template-columns: au
 var styles$1 = {"content":"M9Y7sOk6lTc-","hasName":"E4wclxY71oM-","large":"yReSfaruAh0-","fileName":"YXN92rsh2eU-","base":"psaqxO2Lu7E-"};
 styleInject_es.styleInject(css_248z$1);
 
-var css_248z = "._62D0xyydQwo- {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  -webkit-animation: _5GIEBejwNJc- 200ms ease;\n          animation: _5GIEBejwNJc- 200ms ease;\n}\n\n.a5EQqLlJmCk- {\n  display: none;\n}\n\n@-webkit-keyframes _5GIEBejwNJc- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes _5GIEBejwNJc- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
-var styles = {"image":"_62D0xyydQwo-","fadeIn":"_5GIEBejwNJc-","hidden":"a5EQqLlJmCk-"};
+var css_248z = ".lfvxlXka-2E- {\n  width: 100%;\n  height: 100%;\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-grey--lightest);\n  background-image: linear-gradient(\n    90deg,\n    rgb(244, 244, 244) 0px,\n    rgba(255, 255, 255, 1) calc(16px * 2),\n    rgb(244, 244, 244) calc(16px * 4)\n  );\n  background-image: linear-gradient(\n    90deg,\n    var(--color-grey--lightest) 0px,\n    var(--color-white) var(--space-larger),\n    var(--color-grey--lightest) var(--space-extravagant)\n  );\n  background-repeat: no-repeat;\n  background-size: calc(16px * 4) 100%;\n  background-size: var(--space-extravagant) 100%;\n  -webkit-animation: lfvxlXka-2E- 1s infinite linear;\n          animation: lfvxlXka-2E- 1s infinite linear;\n}\n\n@-webkit-keyframes lfvxlXka-2E- {\n  0%,\n  20% {\n    background-position: calc((16px * 4) * -1);\n    background-position: calc(calc(16px * 4) * -1);\n    background-position: calc(var(--space-extravagant) * -1);\n  }\n\n  100% {\n    background-position: calc(100% + (16px * 4));\n    background-position: calc(100% + calc(16px * 4));\n    background-position: calc(100% + var(--space-extravagant));\n  }\n}\n\n@keyframes lfvxlXka-2E- {\n  0%,\n  20% {\n    background-position: calc((16px * 4) * -1);\n    background-position: calc(calc(16px * 4) * -1);\n    background-position: calc(var(--space-extravagant) * -1);\n  }\n\n  100% {\n    background-position: calc(100% + (16px * 4));\n    background-position: calc(100% + calc(16px * 4));\n    background-position: calc(100% + var(--space-extravagant));\n  }\n}\n\n._62D0xyydQwo- {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  -webkit-animation: _5GIEBejwNJc- 200ms ease;\n          animation: _5GIEBejwNJc- 200ms ease;\n}\n\n.a5EQqLlJmCk- {\n  display: none;\n}\n\n@-webkit-keyframes _5GIEBejwNJc- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes _5GIEBejwNJc- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
+var styles = {"glimmer":"lfvxlXka-2E-","image":"_62D0xyydQwo-","fadeIn":"_5GIEBejwNJc-","hidden":"a5EQqLlJmCk-"};
 styleInject_es.styleInject(css_248z);
 
 function InternalThumbnailImage({ file }) {
@@ -46,7 +45,7 @@ function InternalThumbnailImage({ file }) {
         src().then(url => setImageSource(url));
     }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        !imageLoaded && React__default["default"].createElement(Glimmer.Glimmer, { size: "auto" }),
+        !imageLoaded && (React__default["default"].createElement("div", { className: styles.glimmer, "data-testid": "internalThumbnailImageLoader" })),
         React__default["default"].createElement("img", { src: imageSource, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames__default["default"](styles.image, { [styles.hidden]: !imageLoaded }) })));
     function handleImageLoad() {
         setImageLoaded(true);

package/dist/Gallery/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var LightBox = require('../LightBox-c637c684.js');
-var FormatFile = require('../FormatFile-d2c30cbc.js');
+var FormatFile = require('../FormatFile-38731cfb.js');
 var Button = require('../Button-69409e46.js');
 require('framer-motion');
 require('react-dom');
@@ -23,7 +23,6 @@ require('../Markdown-53a0bfda.js');
 require('react-markdown');
 require('../Text-e7ed0974.js');
 require('../Emphasis-76a10790.js');
-require('../Glimmer-f670c24e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../ProgressBar-5dfc1885.js');

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-771f6e12.js');
+var FormField = require('../FormField-03e36a98.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-771f6e12.js');
+var FormField = require('../FormField-03e36a98.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-771f6e12.js');
+var FormField = require('../FormField-03e36a98.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-771f6e12.js');
+var FormField = require('../FormField-03e36a98.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputText/index.js

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

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-771f6e12.js');
+var FormField = require('./FormField-03e36a98.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-771f6e12.js');
+var FormField = require('../FormField-03e36a98.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-771f6e12.js');
+var FormField = require('./FormField-03e36a98.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-ee917602.js');
+var Option = require('../Option-1447547b.js');
 require('react');
-require('../FormField-771f6e12.js');
+require('../FormField-03e36a98.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.1-pre.2+b6de2a42",
+  "version": "4.7.1-pre1.4+ae9d20c4",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@jobber/design": "^0.32.0",
     "@jobber/formatters": "^0.2.2",
-    "@jobber/hooks": "^2.0.2",
+    "@jobber/hooks": "^2.0.3-pre1.54+ae9d20c4",
     "@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": "b6de2a42c6f9ab78ecf2ab88856aa87d78094800"
+  "gitHead": "ae9d20c457fb2418b4a7e9531a76c51198dad8e0"
 }

package/dist/Glimmer/Glimmer.d.ts

@@ -1,36 +0,0 @@
-/// <reference types="react" />
-import sizes from "./style/Sizes.css";
-import shapes from "./style/Shape.css";
-import timings from "./style/Timing.css";
-export type Sizes = keyof typeof sizes;
-export type Shapes = keyof typeof shapes;
-export type Timings = keyof typeof timings;
-interface GlimmerProps {
-    /**
-     * Sets the size of the glimmer.
-     *
-     * If you use `"auto"` with a `"rectangle"` shape, it will fill the
-     * size of the parents width and height. With how CSS works, if it can't
-     * determine the parents width and height, it'll default to `base`.
-     */
-    readonly size?: Sizes;
-    /**
-     * Sets the shape of the glimmer.
-     */
-    readonly shape?: Shapes;
-    /**
-     * Control how fast the shine moves from left to right. This is useful when
-     * the glimmer is used on smaller spaces.
-     */
-    readonly timing?: Timings;
-}
-export declare const GLIMMER_TEST_ID = "ATL-Glimmer";
-/**
- * **Experimental component! Use at your own risk.**
- *
- * Foundational component used to build loading states such as Skeleton UI
- *
- * @experimental
- */
-export declare function Glimmer({ size, shape, timing, }: GlimmerProps): JSX.Element;
-export {};

package/dist/Glimmer/index.d.ts

@@ -1 +0,0 @@
-export { Glimmer, GLIMMER_TEST_ID } from "./Glimmer";

package/dist/Glimmer/index.js

@@ -1,13 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Glimmer = require('../Glimmer-f670c24e.js');
-require('react');
-require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
-
-
-
-exports.GLIMMER_TEST_ID = Glimmer.GLIMMER_TEST_ID;
-exports.Glimmer = Glimmer.Glimmer;

package/dist/Glimmer-f670c24e.js

@@ -1,42 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-
-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 css_248z$3 = ".FXzzrJAf890- {\n  --duration-base: calc(var(--timing-slowest) * 4); /* 2s */\n  --duration-fast: calc(var(--duration-base) / 2); /* 1s */\n\n  width: 100%;\n  height: 100%;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-grey--lightest);\n  background-image: linear-gradient(\n    90deg,\n    rgb(244, 244, 244) 0px,\n    rgba(255, 255, 255, 1) calc(16px * 2),\n    rgb(244, 244, 244) calc(16px * 4)\n  );\n  background-image: linear-gradient(\n    90deg,\n    var(--color-grey--lightest) 0px,\n    var(--color-white) var(--space-larger),\n    var(--color-grey--lightest) var(--space-extravagant)\n  );\n  background-repeat: no-repeat;\n  background-size: calc(16px * 4) 100%;\n  background-size: var(--space-extravagant) 100%;\n  -webkit-animation: FXzzrJAf890- 2s infinite linear;\n          animation: FXzzrJAf890- 2s infinite linear;\n}\n\n@-webkit-keyframes FXzzrJAf890- {\n  0%,\n  20% {\n    background-position: calc((16px * 4) * -1);\n    background-position: calc(calc(16px * 4) * -1);\n    background-position: calc(var(--space-extravagant) * -1);\n  }\n\n  100% {\n    background-position: calc(100% + (16px * 4));\n    background-position: calc(100% + calc(16px * 4));\n    background-position: calc(100% + var(--space-extravagant));\n  }\n}\n\n@keyframes FXzzrJAf890- {\n  0%,\n  20% {\n    background-position: calc((16px * 4) * -1);\n    background-position: calc(calc(16px * 4) * -1);\n    background-position: calc(var(--space-extravagant) * -1);\n  }\n\n  100% {\n    background-position: calc(100% + (16px * 4));\n    background-position: calc(100% + calc(16px * 4));\n    background-position: calc(100% + var(--space-extravagant));\n  }\n}\n";
-var styles = {"glimmer":"FXzzrJAf890-"};
-styleInject_es.styleInject(css_248z$3);
-
-var css_248z$2 = ".siUUG4rZNSk- {\n  height: calc(16px / 2);\n  height: var(--space-small);\n}\n\n.nFuBXyrhG2Q- {\n  height: calc(16px * 1);\n  height: var(--space-base);\n}\n\n.oiVEoAqI-fU- {\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n}\n\n.Tkmo6mSMI9Y- {\n  height: calc(16px * 2);\n  height: var(--space-larger);\n}\n\n.uVeaD3IhD6o- {\n  height: calc(16px * 3);\n  height: var(--space-largest);\n}\n\n._6Wak9NLJ3VQ- {\n  height: 100%;\n  min-width: calc(16px * 1);\n  min-width: var(--space-base);\n  min-height: calc(16px * 1);\n  min-height: var(--space-base);\n}\n";
-var sizes = {"small":"siUUG4rZNSk-","base":"nFuBXyrhG2Q-","large":"oiVEoAqI-fU-","larger":"Tkmo6mSMI9Y-","largest":"uVeaD3IhD6o-","auto":"_6Wak9NLJ3VQ-"};
-styleInject_es.styleInject(css_248z$2);
-
-var css_248z$1 = ".enoWbteryXg- {\n  width: 100%;\n}\n\n._9qkwCdedX1M- {\n  width: 85%;\n}\n\n.XtyJxvcJDFs- {\n  width: 70%;\n}\n\n._8unQ0TS1He4-,\n.ameRMYEKfss- {\n  width: auto;\n  aspect-ratio: 1;\n}\n\n.ameRMYEKfss- {\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n}\n";
-var shapes = {"rectangle":"enoWbteryXg-","rectangleShort":"_9qkwCdedX1M-","rectangleShorter":"XtyJxvcJDFs-","square":"_8unQ0TS1He4-","circle":"ameRMYEKfss-"};
-styleInject_es.styleInject(css_248z$1);
-
-var css_248z = ".hO0mZ6TeVko- {\n  -webkit-animation-duration: var(--duration-base);\n          animation-duration: var(--duration-base);\n}\n\n.WXi5-zF8Ll4- {\n  -webkit-animation-duration: calc(var(--duration-fast));\n          animation-duration: calc(var(--duration-fast));\n}\n";
-var timings = {"base":"hO0mZ6TeVko-","fast":"WXi5-zF8Ll4-"};
-styleInject_es.styleInject(css_248z);
-
-const GLIMMER_TEST_ID = "ATL-Glimmer";
-/**
- * **Experimental component! Use at your own risk.**
- *
- * Foundational component used to build loading states such as Skeleton UI
- *
- * @experimental
- */
-function Glimmer({ size = "base", shape = "rectangle", timing = "base", }) {
-    const className = classnames__default["default"](styles.glimmer, sizes[size], shapes[shape], timings[timing]);
-    return (React__default["default"].createElement("div", { "aria-busy": "true", className: className, "data-testid": GLIMMER_TEST_ID }));
-}
-
-exports.GLIMMER_TEST_ID = GLIMMER_TEST_ID;
-exports.Glimmer = Glimmer;