@jobber/components 6.63.0 → 6.63.2

package/dist/FormatFile/FormatFile.d.ts

@@ -35,9 +35,8 @@ export declare namespace FormatFile {
         readonly children: React.ReactNode;
         readonly className?: string;
     }) => React.JSX.Element;
-    var DeleteButton: ({ onDelete, size, children, }: {
+    var DeleteButton: ({ onDelete, children, }: {
         readonly onDelete?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-        readonly size?: "base" | "large";
         readonly children?: React.ReactNode;
     }) => React.JSX.Element;
 }

package/dist/FormatFile-cjs.js

@@ -9,7 +9,7 @@ var ProgressBar = require('./ProgressBar-cjs.js');
 var Button = require('./Button-cjs.js');
 var ConfirmationModal = require('./ConfirmationModal-cjs.js');
 
-var styles = {"formatFile":"y9T1gWK9SHY-","expanded":"_6qcLC0nLki0-","compact":"cSm0ukEQcOU-","wrapper":"TEarBLxe1QY-","large":"rha7bX0NCtI-","base":"_7kv4ujgaxNk-","thumbnail":"Km0E9H-xb-M-","deleteButton":"d2l80-AKBiU-","clickable":"f7xR4ZcqlLo-","hoverable":"LxLX5kFFkfI-","progress":"_121nzRvOA-0-","contentBlock":"cyiC2EalTkQ-","deleteable":"qwQuqw4uODY-","spinning":"dR8gWEecWxc-"};
+var styles = {"formatFile":"y9T1gWK9SHY-","expanded":"_6qcLC0nLki0-","compact":"cSm0ukEQcOU-","wrapper":"TEarBLxe1QY-","large":"rha7bX0NCtI-","base":"_7kv4ujgaxNk-","thumbnail":"Km0E9H-xb-M-","deleteButton":"d2l80-AKBiU-","customDeleteButton":"qDKY-J4vHJA-","clickable":"f7xR4ZcqlLo-","hoverable":"LxLX5kFFkfI-","progress":"_121nzRvOA-0-","contentBlock":"cyiC2EalTkQ-","deleteable":"qwQuqw4uODY-","spinning":"dR8gWEecWxc-"};
 
 const useFormatFile = ({ file }) => {
     const isComplete = file.progress >= 1;
@@ -105,10 +105,11 @@ FormatFile.Expanded = function FormatFileExpanded({ file, fileSize, isVisible, }
 FormatFile.Wrapper = function FormatFileWrapper({ children, className, }) {
     return React.createElement("div", { className: className }, children);
 };
-FormatFile.DeleteButton = function FormatFileDeleteButton({ onDelete, size = "base", children, }) {
-    const buttonSize = size === "base" ? "small" : "base";
+FormatFile.DeleteButton = function FormatFileDeleteButton({ onDelete, children, }) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button.Button, { onClick: onDelete, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React.createElement(Button.Button, { UNSAFE_className: {
+                container: styles.customDeleteButton,
+            }, onClick: onDelete, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: "small" }),
         children));
 };
 

package/dist/FormatFile-es.js

@@ -7,7 +7,7 @@ import { P as ProgressBar } from './ProgressBar-es.js';
 import { B as Button } from './Button-es.js';
 import { C as ConfirmationModal } from './ConfirmationModal-es.js';
 
-var styles = {"formatFile":"y9T1gWK9SHY-","expanded":"_6qcLC0nLki0-","compact":"cSm0ukEQcOU-","wrapper":"TEarBLxe1QY-","large":"rha7bX0NCtI-","base":"_7kv4ujgaxNk-","thumbnail":"Km0E9H-xb-M-","deleteButton":"d2l80-AKBiU-","clickable":"f7xR4ZcqlLo-","hoverable":"LxLX5kFFkfI-","progress":"_121nzRvOA-0-","contentBlock":"cyiC2EalTkQ-","deleteable":"qwQuqw4uODY-","spinning":"dR8gWEecWxc-"};
+var styles = {"formatFile":"y9T1gWK9SHY-","expanded":"_6qcLC0nLki0-","compact":"cSm0ukEQcOU-","wrapper":"TEarBLxe1QY-","large":"rha7bX0NCtI-","base":"_7kv4ujgaxNk-","thumbnail":"Km0E9H-xb-M-","deleteButton":"d2l80-AKBiU-","customDeleteButton":"qDKY-J4vHJA-","clickable":"f7xR4ZcqlLo-","hoverable":"LxLX5kFFkfI-","progress":"_121nzRvOA-0-","contentBlock":"cyiC2EalTkQ-","deleteable":"qwQuqw4uODY-","spinning":"dR8gWEecWxc-"};
 
 const useFormatFile = ({ file }) => {
     const isComplete = file.progress >= 1;
@@ -103,10 +103,11 @@ FormatFile.Expanded = function FormatFileExpanded({ file, fileSize, isVisible, }
 FormatFile.Wrapper = function FormatFileWrapper({ children, className, }) {
     return React__default.createElement("div", { className: className }, children);
 };
-FormatFile.DeleteButton = function FormatFileDeleteButton({ onDelete, size = "base", children, }) {
-    const buttonSize = size === "base" ? "small" : "base";
+FormatFile.DeleteButton = function FormatFileDeleteButton({ onDelete, children, }) {
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Button, { onClick: onDelete, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React__default.createElement(Button, { UNSAFE_className: {
+                container: styles.customDeleteButton,
+            }, onClick: onDelete, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: "small" }),
         children));
 };
 

package/dist/InputDate/index.cjs

@@ -126,25 +126,24 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
     };
 }
 
-const InputDateRebuilt = React.forwardRef(function InputDateInternal(props, inputRefs) {
+const InputDateRebuilt = React.forwardRef((props, forwardedRef) => {
     const { onChange } = props;
     return (React.createElement(DatePicker.DatePicker, { selected: props.value, onChange: newValue => {
             onChange(newValue);
         }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator }));
     function InputDateActivator(activatorProps) {
         const { onClick, value } = activatorProps;
-        const newActivatorProps = omit.omit(activatorProps, ["activator", "fullWidth"]);
         const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
-            onChange: newActivatorProps.onChange,
+            onChange: activatorProps.onChange,
             onFocus: event => {
                 var _a, _b;
                 (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
-                (_b = newActivatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(newActivatorProps);
+                (_b = activatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
             onBlur: event => {
                 var _a, _b;
                 (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
-                (_b = newActivatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(newActivatorProps);
+                (_b = activatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
         });
         const suffix = props.showIcon !== false
@@ -158,15 +157,16 @@ const InputDateRebuilt = React.forwardRef(function InputDateInternal(props, inpu
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React.createElement("div", { onClick: onClick },
-            React.createElement(InputText_index.InputText, Object.assign({}, newActivatorProps, props, { version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: inputRefs, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-invalid": activatorProps.ariaInvalid === "true" ? true : false, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
                     }
                     (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
-                }, onChange: handleChange }))));
+                }, onChange: handleChange })));
     }
 });
+InputDateRebuilt.displayName = "InputDateRebuilt";
 
 function isNewInputDateProps(props) {
     return props.version === 2;

package/dist/InputDate/index.mjs

@@ -124,25 +124,24 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
     };
 }
 
-const InputDateRebuilt = forwardRef(function InputDateInternal(props, inputRefs) {
+const InputDateRebuilt = forwardRef((props, forwardedRef) => {
     const { onChange } = props;
     return (React__default.createElement(DatePicker, { selected: props.value, onChange: newValue => {
             onChange(newValue);
         }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator }));
     function InputDateActivator(activatorProps) {
         const { onClick, value } = activatorProps;
-        const newActivatorProps = omit(activatorProps, ["activator", "fullWidth"]);
         const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
-            onChange: newActivatorProps.onChange,
+            onChange: activatorProps.onChange,
             onFocus: event => {
                 var _a, _b;
                 (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
-                (_b = newActivatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(newActivatorProps);
+                (_b = activatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
             onBlur: event => {
                 var _a, _b;
                 (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
-                (_b = newActivatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(newActivatorProps);
+                (_b = activatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
         });
         const suffix = props.showIcon !== false
@@ -156,15 +155,16 @@ const InputDateRebuilt = forwardRef(function InputDateInternal(props, inputRefs)
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React__default.createElement("div", { onClick: onClick },
-            React__default.createElement(InputText, Object.assign({}, newActivatorProps, props, { version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: inputRefs, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-invalid": activatorProps.ariaInvalid === "true" ? true : false, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
                     }
                     (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
-                }, onChange: handleChange }))));
+                }, onChange: handleChange })));
     }
 });
+InputDateRebuilt.displayName = "InputDateRebuilt";
 
 function isNewInputDateProps(props) {
     return props.version === 2;

package/dist/InputTime/index.cjs

@@ -211,7 +211,7 @@ function InputTimeRebuilt(_a) {
     const { inputStyle } = FormField.useFormFieldWrapperStyles(params);
     const id = getId(params);
     return (React.createElement(FormField.FormFieldWrapper, { disabled: params.disabled, size: params.size, align: params.align, inline: params.inline, name: params.name, error: params.error || "", identifier: id, descriptionIdentifier: `descriptionUUID--${id}`, invalid: Boolean(params.invalid), description: params.description, clearable: (_c = params.clearable) !== null && _c !== void 0 ? _c : "never", onClear: handleClear, type: "time", readonly: params.readonly, placeholder: params.placeholder, value: dateToTimeString(value) },
-        React.createElement("input", { ref: ref, type: "time", name: params.name, className: inputStyle, onBlur: handleBlur, disabled: params.disabled, readOnly: params.readonly, onChange: handleChangeEvent, onFocus: handleFocus, "data-testid": "ATL-InputTime-input", onKeyUp: e => {
+        React.createElement("input", { ref: ref, type: "time", name: params.name, className: inputStyle, onBlur: handleBlur, id: id, disabled: params.disabled, readOnly: params.readonly, onChange: handleChangeEvent, onFocus: handleFocus, "data-testid": "ATL-InputTime-input", onKeyUp: e => {
                 if (params.disabled || params.readonly)
                     return;
                 !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);

package/dist/InputTime/index.mjs

@@ -209,7 +209,7 @@ function InputTimeRebuilt(_a) {
     const { inputStyle } = useFormFieldWrapperStyles(params);
     const id = getId(params);
     return (React__default.createElement(FormFieldWrapper, { disabled: params.disabled, size: params.size, align: params.align, inline: params.inline, name: params.name, error: params.error || "", identifier: id, descriptionIdentifier: `descriptionUUID--${id}`, invalid: Boolean(params.invalid), description: params.description, clearable: (_c = params.clearable) !== null && _c !== void 0 ? _c : "never", onClear: handleClear, type: "time", readonly: params.readonly, placeholder: params.placeholder, value: dateToTimeString(value) },
-        React__default.createElement("input", { ref: ref, type: "time", name: params.name, className: inputStyle, onBlur: handleBlur, disabled: params.disabled, readOnly: params.readonly, onChange: handleChangeEvent, onFocus: handleFocus, "data-testid": "ATL-InputTime-input", onKeyUp: e => {
+        React__default.createElement("input", { ref: ref, type: "time", name: params.name, className: inputStyle, onBlur: handleBlur, id: id, disabled: params.disabled, readOnly: params.readonly, onChange: handleChangeEvent, onFocus: handleFocus, "data-testid": "ATL-InputTime-input", onKeyUp: e => {
                 if (params.disabled || params.readonly)
                     return;
                 !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);

package/dist/styles.css

@@ -7456,6 +7456,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   z-index: var(--elevation-base);
 }
 
+.cSm0ukEQcOU- .qDKY-J4vHJA- {
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+}
+
+.cSm0ukEQcOU-._7kv4ujgaxNk- .qDKY-J4vHJA- {
+  max-width: 24px;
+  min-height: 24px;
+}
+
 ._6qcLC0nLki0- .Km0E9H-xb-M- {
   border-right: none;
   border-bottom-left-radius: 8px;
@@ -7520,22 +7530,18 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   top: var(--space-smaller);
   right: 4px;
   right: var(--space-smaller);
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-base);
 }
 
-@media (min-width: 768px) {
-  .qwQuqw4uODY- ~ .d2l80-AKBiU- {
-    visibility: hidden;
-  }
-
-  .d2l80-AKBiU-:focus-within,
-  .d2l80-AKBiU-:hover,
-  .qwQuqw4uODY-:hover ~ .d2l80-AKBiU-,
-  .qwQuqw4uODY-:focus ~ .d2l80-AKBiU- {
-    visibility: visible;
-  }
+.cSm0ukEQcOU-.rha7bX0NCtI- .d2l80-AKBiU- {
+  top: 8px;
+  top: var(--space-small);
+  right: 8px;
+  right: var(--space-small);
 }
 
-@media (--medium-screens-and-up) {
+@media (any-pointer: fine) {
   .qwQuqw4uODY- ~ .d2l80-AKBiU- {
     visibility: hidden;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.63.0",
+  "version": "6.63.2",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "d297fd78aac12e2d69ae1692d49df59721ded766"
+  "gitHead": "1d09b31023be41c83ba1824bf4202ae6dbbcd8ff"
 }