@jobber/components 6.106.2 → 6.106.3

package/dist/InputDate/index.cjs

@@ -158,7 +158,7 @@ const InputDateRebuilt = React.forwardRef((props, forwardedRef) => {
         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, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, 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 => {
+            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, 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);

package/dist/InputDate/index.mjs

@@ -156,7 +156,7 @@ const InputDateRebuilt = forwardRef((props, forwardedRef) => {
         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, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, 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 => {
+            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, 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);

package/dist/styles.css

@@ -939,6 +939,22 @@
   -webkit-text-fill-color: var(--field--value-color);
 }
 
+/* Apply miniLabel styles when input has autofill (CSS-only solution) */
+
+/* Supports both -webkit-autofill (Chrome/Safari) and :autofill (Firefox) */
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill):not(._0pmqVa2zSE4-) {
+  --field--placeholder-color: var(--color-text--secondary);
+  --field--placeholder-offset: var(--space-smallest);
+  --field--placeholder-transform: 0;
+  --field--padding-top: calc(var(--space-base) + var(--space-smaller));
+  --field--padding-bottom: var(--space-small);
+}
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill)._9tjyT9QUtP8-:not(._0pmqVa2zSE4-) {
+  --field--padding-top: calc(var(--space-large) + var(--space-smaller));
+}
+
 .hGr6YW4AeLM-:not(:has(.Dgk00tzlODA-)) .vtSDcuzNr9Q- {
     padding-top: var(--field--padding-top);
   }
@@ -1026,6 +1042,28 @@
   font-size: var(--typography--fontSize-small);
 }
 
+/* Apply miniLabel label styles when input has autofill */
+
+/* Supports both -webkit-autofill (Chrome/Safari) and :autofill (Firefox) */
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill) .Dgk00tzlODA- {
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+}
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill).Sw5O4I0lMJg- .Dgk00tzlODA- {
+  display: none;
+}
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill).QmMiyoAWp-g- .Dgk00tzlODA- {
+  padding-top: 2px;
+  padding-top: var(--space-smallest);
+}
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill).hGr6YW4AeLM- .Dgk00tzlODA- {
+  background-color: var(--field--background-color);
+}
+
 ._0pmqVa2zSE4-.Sw5O4I0lMJg-.F1t76G6bDKo-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
   display: none;
 }
@@ -1099,6 +1137,15 @@
   padding-bottom: var(--field--padding-bottom);
 }
 
+/* Apply affix label styles when input has autofill */
+
+/* Supports both -webkit-autofill (Chrome/Safari) and :autofill (Firefox) */
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill):not(.Sw5O4I0lMJg-) .-Wzcb0pBh5I- {
+  padding-top: var(--field--padding-top);
+  padding-bottom: var(--field--padding-bottom);
+}
+
 .DHX5ijY3xIw- {
   margin-top: 4px;
   margin-top: var(--space-smaller);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.106.2",
+  "version": "6.106.3",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "574461e3ae58ac360f42cc04994a9b4a12ec588f"
+  "gitHead": "32055bb77f35ebd11e476a2b377dcc7786a728c8"
 }