@jobber/components 6.63.1 → 6.63.3

package/dist/DataList.module-cjs.js

@@ -1,5 +1,5 @@
 'use strict';
 
-var styles = {"wrapper":"v3oESmhykhE-","titleContainer":"KuG6k-a5jEM-","headerFilters":"E0wzULGeIvs-","headerTitles":"TzEnOGRRd8g-","batchSelectContainer":"DvRzj3qOLCk-","headerBatchSelect":"pmQV-ZYKQMg-","listItem":"i-w6mU9puzE-","listItemClickable":"Hx3I3kI1E7Q-","active":"eCAyzR-N1Xk-","selectable":"zvpLQa7hDp0-","selectAllCheckbox":"_8fx-1j3wk2E-","visible":"VaDzSy52w-w-","selected":"_0qmb-Daumfs-","filtering":"Xl0eCv2fMNM-","filteringSpinner":"t9txZ5-Upp4-","srOnly":"HBTfumId4rA-","spinning":"_8Bw0FhmP0Mk-"};
+var styles = {"wrapper":"v3oESmhykhE-","titleContainer":"KuG6k-a5jEM-","headerFilters":"E0wzULGeIvs-","headerTitles":"TzEnOGRRd8g-","batchSelectContainer":"DvRzj3qOLCk-","headerBatchSelect":"pmQV-ZYKQMg-","listItem":"i-w6mU9puzE-","listItemClickable":"Hx3I3kI1E7Q-","active":"eCAyzR-N1Xk-","selectable":"zvpLQa7hDp0-","selectAllCheckbox":"_8fx-1j3wk2E-","selected":"_0qmb-Daumfs-","filtering":"Xl0eCv2fMNM-","filteringSpinner":"t9txZ5-Upp4-","srOnly":"HBTfumId4rA-","spinning":"_8Bw0FhmP0Mk-"};
 
 exports.styles = styles;

package/dist/DataList.module-es.js

@@ -1,3 +1,3 @@
-var styles = {"wrapper":"v3oESmhykhE-","titleContainer":"KuG6k-a5jEM-","headerFilters":"E0wzULGeIvs-","headerTitles":"TzEnOGRRd8g-","batchSelectContainer":"DvRzj3qOLCk-","headerBatchSelect":"pmQV-ZYKQMg-","listItem":"i-w6mU9puzE-","listItemClickable":"Hx3I3kI1E7Q-","active":"eCAyzR-N1Xk-","selectable":"zvpLQa7hDp0-","selectAllCheckbox":"_8fx-1j3wk2E-","visible":"VaDzSy52w-w-","selected":"_0qmb-Daumfs-","filtering":"Xl0eCv2fMNM-","filteringSpinner":"t9txZ5-Upp4-","srOnly":"HBTfumId4rA-","spinning":"_8Bw0FhmP0Mk-"};
+var styles = {"wrapper":"v3oESmhykhE-","titleContainer":"KuG6k-a5jEM-","headerFilters":"E0wzULGeIvs-","headerTitles":"TzEnOGRRd8g-","batchSelectContainer":"DvRzj3qOLCk-","headerBatchSelect":"pmQV-ZYKQMg-","listItem":"i-w6mU9puzE-","listItemClickable":"Hx3I3kI1E7Q-","active":"eCAyzR-N1Xk-","selectable":"zvpLQa7hDp0-","selectAllCheckbox":"_8fx-1j3wk2E-","selected":"_0qmb-Daumfs-","filtering":"Xl0eCv2fMNM-","filteringSpinner":"t9txZ5-Upp4-","srOnly":"HBTfumId4rA-","spinning":"_8Bw0FhmP0Mk-"};
 
 export { styles as s };

package/dist/DataListHeader-cjs.js

@@ -27,9 +27,9 @@ function DataListHeaderCheckbox({ children }) {
     const deselectText = sm ? "Deselect All" : "Deselect";
     const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
     return (React.createElement("div", { className: DataList_module.styles.selectable },
-        React.createElement("div", { "data-testid": DATA_LIST_HEADER_CHECKBOX_TEST_ID, className: classnames(DataList_module.styles.selectAllCheckbox, {
-                [DataList_module.styles.visible]: canSelectAll,
-            }) },
+        React.createElement("div", { "data-testid": DATA_LIST_HEADER_CHECKBOX_TEST_ID, style: {
+                visibility: canSelectAll ? "visible" : "hidden",
+            }, className: classnames(DataList_module.styles.selectAllCheckbox) },
             React.createElement(Checkbox_index.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
                 React.createElement("div", { className: DataList_module.styles.srOnly }, selectedLabel))),
         React.createElement(ColumnHeaderContent, { canSelectAll: canSelectAll, hasAtLeastOneSelected: hasAtLeastOneSelected, selectedCount: selectedCount, deselectText: deselectText, onSelect: onSelect }, children)));

package/dist/DataListHeader-es.js

@@ -25,9 +25,9 @@ function DataListHeaderCheckbox({ children }) {
     const deselectText = sm ? "Deselect All" : "Deselect";
     const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
     return (React__default.createElement("div", { className: styles.selectable },
-        React__default.createElement("div", { "data-testid": DATA_LIST_HEADER_CHECKBOX_TEST_ID, className: classnames(styles.selectAllCheckbox, {
-                [styles.visible]: canSelectAll,
-            }) },
+        React__default.createElement("div", { "data-testid": DATA_LIST_HEADER_CHECKBOX_TEST_ID, style: {
+                visibility: canSelectAll ? "visible" : "hidden",
+            }, className: classnames(styles.selectAllCheckbox) },
             React__default.createElement(Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
                 React__default.createElement("div", { className: styles.srOnly }, selectedLabel))),
         React__default.createElement(ColumnHeaderContent, { canSelectAll: canSelectAll, hasAtLeastOneSelected: hasAtLeastOneSelected, selectedCount: selectedCount, deselectText: deselectText, onSelect: onSelect }, 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

@@ -4879,17 +4879,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 ._8fx-1j3wk2E- {
   display: -ms-flexbox;
   display: flex;
-  visibility: hidden;
 
   /* To compensate the Checkbox's label margin that we are using for screen-readers */
   margin-right: calc(16px * -1);
   margin-right: calc(var(--space-base) * -1);
 }
 
-._8fx-1j3wk2E-.VaDzSy52w-w- {
-  visibility: visible;
-}
-
 .i-w6mU9puzE- .zvpLQa7hDp0- > :first-child {
   -ms-flex-order: 2;
       order: 2;

package/package.json

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