@jobber/components 4.2.0 → 4.2.2-mike-pre.9

package/dist/Countdown/Countdown.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CivilDate } from "@std-proposal/temporal";
+import { AtlantisTemporalPlainDateTime } from "../InputTime";
 /**
  * Options for deciding how much information is shown to the user
  * days, hours, minutes, seconds
@@ -11,7 +11,7 @@ interface CountdownProps {
      * Civil Time of time is to be displayed.
      * In the case of `date` a `string` should be in ISO 8601 format
      */
-    readonly date: CivilDate | Date | number | string;
+    readonly date: AtlantisTemporalPlainDateTime | Date | number | string;
     /**
      * Whether or not to present the unit of time to the user, or just the raw numbers.
      */

package/dist/Countdown/index.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var temporal = require('@std-proposal/temporal');
 var ReactCountdown = require('react-countdown');
+var polyfill = require('@js-temporal/polyfill');
+var temporal = require('@std-proposal/temporal');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,7 +19,8 @@ function computeTimeUnit(remainder, unit) {
 function Countdown({ date: inputDate, onComplete, showUnits, granularity = "dhms", }) {
     const date = React.useMemo(() => {
         let initDate;
-        if (inputDate instanceof temporal.CivilDate) {
+        if (inputDate instanceof polyfill.Temporal.PlainDateTime ||
+            inputDate instanceof temporal.CivilDate) {
             initDate = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
         }
         else {

package/dist/DatePicker/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-e085dff4.js');
+var DatePicker = require('../DatePicker-90d542d7.js');
 require('react');
 require('classnames');
 require('react-datepicker');

package/dist/{DatePicker-e085dff4.js → DatePicker-90d542d7.js}

@@ -37,7 +37,10 @@ function InternalActivator(props, ref) {
     if (activator) {
         if (React.isValidElement(activator)) {
             const isAComponent = typeof activator.type === "function";
-            return React.cloneElement(activator, Object.assign(Object.assign(Object.assign({}, newActivatorProps), (isAComponent && { fullWidth: fullWidth })), { ref }));
+            return React.cloneElement(activator, Object.assign(Object.assign(Object.assign({}, newActivatorProps), (isAComponent && { fullWidth: fullWidth })), { 
+                // @ts-expect-error - Issue with react types not including `ref` in
+                // cloneElement. https://github.com/DefinitelyTyped/DefinitelyTyped/issues/40888
+                ref }));
         }
         else {
             return activator(props);

package/dist/Disclosure/index.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Heading = require('../Heading-8c6e4e0b.js');
 var Icon = require('../Icon-405a216c.js');
-require('../Typography-dd9717e7.js');
-require('classnames');
+var Typography = require('../Typography-dd9717e7.js');
 require('@jobber/design');
+require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,13 +21,15 @@ styleInject_es.styleInject(css_248z);
 function Disclosure({ children, title, defaultOpen = false, }) {
     const [isOpen, setOpen] = React.useState(defaultOpen);
     const [isMounted, setMount] = React.useState(false);
+    const [titleRef, { exactWidth }] = jobberHooks.useResizeObserver();
+    const isBelowBreakpoint = exactWidth && exactWidth < jobberHooks.Breakpoints.small;
     React.useEffect(() => {
         setMount(true);
     }, []);
     return (React__default["default"].createElement("details", { open: isOpen, onToggle: onToggle, className: styles.details },
         React__default["default"].createElement("summary", { className: styles.summary },
-            React__default["default"].createElement("div", { className: styles.summaryWrap },
-                React__default["default"].createElement(Heading.Heading, { level: 4 }, title),
+            React__default["default"].createElement("div", { className: styles.summaryWrap, ref: titleRef },
+                React__default["default"].createElement(Typography.Typography, { element: "h4", size: isBelowBreakpoint ? "base" : "large", fontWeight: "bold", textColor: "heading" }, title),
                 React__default["default"].createElement("span", { className: styles.arrowIconWrapper },
                     React__default["default"].createElement(Icon.Icon, { size: "large", name: "arrowDown", color: "green" })))),
         React__default["default"].createElement("span", { className: styles.content }, children)));

package/dist/FormatDate/FormatDate.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { CivilDate } from "@std-proposal/temporal";
+import { AtlantisTemporalPlainDateTime } from "../InputTime";
 interface FormatDateProps {
     /**
      * Date to be formatted.
      *
      * A `string` should be an ISO 8601 format date string.
      */
-    readonly date: CivilDate | Date | string;
+    readonly date: AtlantisTemporalPlainDateTime | Date | string;
 }
 export declare function FormatDate({ date: inputDate }: FormatDateProps): JSX.Element;
 export declare function strFormatDate(date: Date): string;

package/dist/FormatRelativeDateTime/FormatRelativeDateTime.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { CivilDateTime } from "@std-proposal/temporal";
+import { AtlantisTemporalPlainDateTime } from "../InputTime";
 interface FormatRelativeDateTimeProps {
     /**
      * Date to be displayed.
      *
      * A `string` should be an ISO 8601 format date string.
      */
-    readonly date: CivilDateTime | Date | string;
+    readonly date: AtlantisTemporalPlainDateTime | Date | string;
 }
 export declare function FormatRelativeDateTime({ date: inputDate, }: FormatRelativeDateTimeProps): JSX.Element;
 export {};

package/dist/FormatTime/FormatTime.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { CivilTime } from "@std-proposal/temporal";
+import { AtlantisTemporalPlainTime } from "../InputTime";
 interface FormatTimeProps {
     /**
      * Civil Time of time to be displayed.
      *
      * A `string` should be an ISO 8601 format date string.
      */
-    readonly time: CivilTime | Date | string;
+    readonly time: AtlantisTemporalPlainTime | Date | string;
     /**
      * Optionally specify clock format. If `undefined` system format will be respected.
      */

package/dist/InputAvatar/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Avatar = require('../Avatar-01c5ba8b.js');
-var InputFile = require('../InputFile-e7c15211.js');
+var InputFile = require('../InputFile-4932c979.js');
 var ProgressBar = require('../ProgressBar-d3178aa9.js');
 var Button = require('../Button-186ef2c1.js');
 require('classnames');

package/dist/InputDate/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lodash = require('lodash');
 var React = require('react');
 var FormField = require('../FormField-e1c3af82.js');
-var DatePicker = require('../DatePicker-e085dff4.js');
+var DatePicker = require('../DatePicker-90d542d7.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputFile/InputFile.d.ts

@@ -22,6 +22,10 @@ export interface FileUpload {
      * - `1` represents a complete upload.
      */
     readonly progress: number;
+    /**
+     * Base URL where file was sent as a POST. This is the same URL as what's returned in getUploadParams.
+     */
+    readonly uploadUrl: string;
     /**
      * The data url of the file.
      */

package/dist/InputFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-e7c15211.js');
+var InputFile = require('../InputFile-4932c979.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');

package/dist/{InputFile-e7c15211.js → InputFile-4932c979.js}

@@ -52,7 +52,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 fileUpload = getFileUpload(file, key);
+            const fileUpload = Object.assign(Object.assign({}, getFileUpload(file, key)), { uploadUrl: url });
             onUploadStart && onUploadStart(Object.assign({}, fileUpload));
             const handleUploadProgress = (progressEvent) => {
                 onUploadProgress &&

package/dist/InputTime/InputTimeProps.d.ts

@@ -1,18 +1,21 @@
-import { CivilTime } from "@std-proposal/temporal";
+import { Temporal } from "@js-temporal/polyfill";
+import { CivilDate, CivilTime } from "@std-proposal/temporal";
 import { CommonFormFieldProps, FormFieldProps } from "../FormField";
+export type AtlantisTemporalPlainDateTime = Temporal.PlainDateTime | CivilDate;
+export type AtlantisTemporalPlainTime = Temporal.PlainTime | CivilTime;
 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"> {
     /**
      * 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
      * state is controlling the value, use the `value` prop instead.
      */
-    readonly defaultValue?: CivilTime;
+    readonly defaultValue?: AtlantisTemporalPlainTime;
     /**
      * Set the component to the given value.
      */
-    readonly value?: CivilTime;
+    readonly value?: AtlantisTemporalPlainTime;
     /**
      * Function called when user changes input value.
      */
-    onChange?(newValue?: CivilTime): void;
+    onChange?(newValue?: AtlantisTemporalPlainTime): void;
 }

package/dist/InputTime/civilTimeConversions.d.ts

@@ -1,3 +1,3 @@
-import { CivilTime } from "@std-proposal/temporal";
-export declare function civilTimeToHTMLTime(civilTime?: CivilTime): string;
-export declare function htmlTimeToCivilTime(timeString: string): CivilTime | undefined;
+import { AtlantisTemporalPlainTime } from "./InputTimeProps";
+export declare function civilTimeToHTMLTime(civilTime?: AtlantisTemporalPlainTime): string;
+export declare function htmlTimeToCivilTime(timeString: string): AtlantisTemporalPlainTime | undefined;

package/dist/InputTime/index.d.ts

@@ -1 +1,2 @@
 export { InputTime } from "./InputTime";
+export type { AtlantisTemporalPlainDateTime, AtlantisTemporalPlainTime, } from "./InputTimeProps";

package/dist/InputTime/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
-var temporal = require('@std-proposal/temporal');
+var polyfill = require('@js-temporal/polyfill');
 var FormField = require('../FormField-e1c3af82.js');
 require('uuid');
 require('react-hook-form');
@@ -729,7 +729,7 @@ function civilTimeToHTMLTime(civilTime) {
 }
 function htmlTimeToCivilTime(timeString) {
     try {
-        return temporal.CivilTime.fromString(timeString + ":00.000000000");
+        return polyfill.Temporal.PlainTime.from(timeString + ":00.000000000");
     }
     catch (_a) {
         return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.2.0",
+  "version": "4.2.2-mike-pre.9+6621108b",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,11 +17,12 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "*",
-    "@jobber/formatters": "*",
-    "@jobber/hooks": "*",
+    "@jobber/design": "^0.30.1-mike-pre.15+6621108b",
+    "@jobber/formatters": "^0.2.2",
+    "@jobber/hooks": "^2.0.2",
+    "@js-temporal/polyfill": "^0.4.3",
     "@popperjs/core": "^2.0.6",
-    "@std-proposal/temporal": "0.0.1",
+    "@std-proposal/temporal": "^0.0.1",
     "@tanstack/react-table": "8.5.13",
     "@types/color": "^3.0.1",
     "@types/lodash": "^4.14.136",
@@ -82,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "cec99526eed6bae69f3f0899d601e4984844a283"
+  "gitHead": "6621108be0b93a4f4f4c627c883a9382d4b32a3d"
 }

package/rollup.config.js

@@ -51,6 +51,7 @@ export default {
     "react-popper",
     "react-datepicker",
     "react-dropzone",
+    "react-dom/client",
     "axios",
     "filesize",
     "color",
@@ -59,10 +60,12 @@ export default {
     "lodash",
     "uuid",
     "lodash/debounce",
+    "@js-temporal/polyfill",
     "@std-proposal/temporal",
     "@use-it/event-listener",
     "@jobber/design",
     "@jobber/formatters",
     "@jobber/hooks",
+    "@tanstack/react-table",
   ],
 };