@jobber/components 6.60.5 → 6.61.1

package/dist/Checkbox/Checkbox.rebuilt.d.ts

@@ -1,3 +1,7 @@
 import React from "react";
-import { CheckboxRebuiltProps } from "./Checkbox.types";
-export declare function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, id, onBlur, onChange, onFocus, }: CheckboxRebuiltProps): React.JSX.Element;
+export declare const CheckboxRebuilt: React.ForwardRefExoticComponent<Omit<import("./Checkbox.types").BaseCheckboxProps, "children" | "onChange" | "label" | "description"> & {
+    label?: string | React.ReactElement;
+    description?: string | React.ReactElement;
+    onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
+    version: 2;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/Checkbox/Checkbox.types.d.ts

@@ -49,6 +49,10 @@ export interface BaseCheckboxProps {
      * Called when the checkbox loses focus
      */
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Whether the checkbox is invalid
+     */
+    invalid?: boolean;
 }
 interface CheckboxLabelProps extends BaseCheckboxProps {
     /**

package/dist/Checkbox/index.cjs

@@ -9,7 +9,7 @@ var Text = require('../Text-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');
 
-var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
+var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","invalid":"Gqnclw4WaeQ-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
 
 function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onBlur, onChange, onFocus, }) {
     const { control, setValue, watch } = reactHookForm.useFormContext() != undefined
@@ -54,8 +54,8 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
         } }));
 }
 
-function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, }) {
-    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
     });
@@ -69,21 +69,23 @@ function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value
     return (React.createElement("div", { className: styles.checkBoxParent },
         React.createElement("label", { className: wrapperClassName },
             React.createElement("span", { className: styles.checkHolder },
-                React.createElement("input", { type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
                 React.createElement("span", { className: styles.checkBox },
                     React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
             labelContent && React.createElement("span", { className: styles.label }, labelContent)),
         description && (React.createElement("div", { className: styles.description }, descriptionContent))));
-}
+});
+CheckboxRebuilt.displayName = "CheckboxRebuilt";
 
 function isNewCheckboxProps(props) {
     return props.version === 2;
 }
-function Checkbox(props) {
+const Checkbox = React.forwardRef(function CheckboxShim(props, ref) {
     if (isNewCheckboxProps(props)) {
-        return React.createElement(CheckboxRebuilt, Object.assign({}, props));
+        return React.createElement(CheckboxRebuilt, Object.assign({}, props, { ref: ref }));
     }
     return React.createElement(CheckboxLegacy, Object.assign({}, props));
-}
+});
+Checkbox.displayName = "Checkbox";
 
 exports.Checkbox = Checkbox;

package/dist/Checkbox/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { CheckboxLegacyProps, CheckboxRebuiltProps } from "./Checkbox.types";
 type CheckboxShimProps = CheckboxLegacyProps | CheckboxRebuiltProps;
-export declare function Checkbox(props: CheckboxShimProps): React.JSX.Element;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxShimProps & React.RefAttributes<HTMLInputElement>>;
 export type { CheckboxLegacyProps, CheckboxRebuiltProps };

package/dist/Checkbox/index.mjs

@@ -1,4 +1,4 @@
-import React__default, { useState, useId, useEffect } from 'react';
+import React__default, { useState, useId, useEffect, forwardRef } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
 import classnames from 'classnames';
 import { useFormContext, useForm, Controller } from 'react-hook-form';
@@ -7,7 +7,7 @@ import { T as Text } from '../Text-es.js';
 import '@jobber/design';
 import '../Typography-es.js';
 
-var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
+var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","invalid":"Gqnclw4WaeQ-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
 
 function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onBlur, onChange, onFocus, }) {
     const { control, setValue, watch } = useFormContext() != undefined
@@ -52,8 +52,8 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
         } }));
 }
 
-function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, }) {
-    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
     });
@@ -67,21 +67,23 @@ function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value
     return (React__default.createElement("div", { className: styles.checkBoxParent },
         React__default.createElement("label", { className: wrapperClassName },
             React__default.createElement("span", { className: styles.checkHolder },
-                React__default.createElement("input", { type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React__default.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
                 React__default.createElement("span", { className: styles.checkBox },
                     React__default.createElement(Icon, { name: iconName, color: "surface" }))),
             labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),
         description && (React__default.createElement("div", { className: styles.description }, descriptionContent))));
-}
+});
+CheckboxRebuilt.displayName = "CheckboxRebuilt";
 
 function isNewCheckboxProps(props) {
     return props.version === 2;
 }
-function Checkbox(props) {
+const Checkbox = forwardRef(function CheckboxShim(props, ref) {
     if (isNewCheckboxProps(props)) {
-        return React__default.createElement(CheckboxRebuilt, Object.assign({}, props));
+        return React__default.createElement(CheckboxRebuilt, Object.assign({}, props, { ref: ref }));
     }
     return React__default.createElement(CheckboxLegacy, Object.assign({}, props));
-}
+});
+Checkbox.displayName = "Checkbox";
 
 export { Checkbox };

package/dist/Modal/index.cjs

@@ -181,9 +181,9 @@ function ModalActions({ primary, secondary, tertiary, }) {
     return (React.createElement(React.Fragment, null, shouldShow && (React.createElement("div", { className: actionBar, "data-testid": "ATL-Modal-Actions" },
         React.createElement("div", { className: rightAction },
             primary && React.createElement(Button.Button, Object.assign({}, primary)),
-            secondary && (React.createElement(Button.Button, Object.assign({}, secondary, { type: "primary", variation: "subtle" })))),
+            secondary && (React.createElement(Button.Button, Object.assign({ type: "primary", variation: "subtle" }, secondary)))),
         tertiary && (React.createElement("div", { className: leftAction },
-            React.createElement(Button.Button, Object.assign({}, tertiary, { type: "secondary", variation: "destructive" }))))))));
+            React.createElement(Button.Button, Object.assign({ type: "secondary", variation: "destructive" }, tertiary))))))));
 }
 function ModalActivator({ children }) {
     const { activatorRef } = useModalContext();

package/dist/Modal/index.mjs

@@ -179,9 +179,9 @@ function ModalActions({ primary, secondary, tertiary, }) {
     return (React__default.createElement(React__default.Fragment, null, shouldShow && (React__default.createElement("div", { className: actionBar, "data-testid": "ATL-Modal-Actions" },
         React__default.createElement("div", { className: rightAction },
             primary && React__default.createElement(Button, Object.assign({}, primary)),
-            secondary && (React__default.createElement(Button, Object.assign({}, secondary, { type: "primary", variation: "subtle" })))),
+            secondary && (React__default.createElement(Button, Object.assign({ type: "primary", variation: "subtle" }, secondary)))),
         tertiary && (React__default.createElement("div", { className: leftAction },
-            React__default.createElement(Button, Object.assign({}, tertiary, { type: "secondary", variation: "destructive" }))))))));
+            React__default.createElement(Button, Object.assign({ type: "secondary", variation: "destructive" }, tertiary))))))));
 }
 function ModalActivator({ children }) {
     const { activatorRef } = useModalContext();

package/dist/styles.css

@@ -3214,6 +3214,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   --checkbox--size: 20px;
   --checkbox--border--checked: var(--color-interactive);
   --checkbox--border--unchecked: var(--color-border--interactive);
+  --checkbox--border--invalid: var(--color-critical);
   --checkbox--border--hover: var(--color-interactive);
   display: inline-block;
 }
@@ -3308,6 +3309,26 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   opacity: 1;
 }
 
+/* Invalid states set border and fill color when field not disabled
+     - note, some rules are duplicated to ensure selectors follow
+       descending cascade linting rules
+*/
+
+.Gqnclw4WaeQ-:not(.TKr3J-6ARFo-) .XnCmS-EzK2M- + ._-8JCQE6SA9s- {
+  border-color: var(--checkbox--border--invalid);
+}
+
+.Gqnclw4WaeQ-:not(.TKr3J-6ARFo-) .XnCmS-EzK2M-:checked + ._-8JCQE6SA9s-,
+.Gqnclw4WaeQ-:not(.TKr3J-6ARFo-) .XnCmS-EzK2M-.rqHq3ff9In0- + ._-8JCQE6SA9s- {
+  background-color: hsl(6, 64%, 51%);
+  background-color: var(--color-critical);
+}
+
+.Gqnclw4WaeQ-:not(.TKr3J-6ARFo-):focus-within .XnCmS-EzK2M- + ._-8JCQE6SA9s-,
+.Gqnclw4WaeQ-:not(.TKr3J-6ARFo-) .XnCmS-EzK2M-.rqHq3ff9In0-:focus-within + ._-8JCQE6SA9s- {
+  border-color: var(--checkbox--border--invalid);
+}
+
 .l8z5TxzVvqA- {
   margin: 0 8px;
   margin: 0 var(--space-small);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.60.5",
+  "version": "6.61.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "414e0a4261cc75a46510d3dcb8f35fad990855ef"
+  "gitHead": "1ccb1b893cc5ebfe13df5e850c2b51f9265ffdde"
 }