@transferwise/components 0.0.0-experimental-2f6892d → 0.0.0-experimental-9296e7a

package/build/checkboxButton/CheckboxButton.js

@@ -7,18 +7,27 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const CheckboxButton = /*#__PURE__*/React.forwardRef(function CheckboxButton({
   checked,
+  indeterminate = false,
   className,
   disabled,
   onChange,
   ...rest
 }, reference) {
   const inputAttributes = contexts.useInputAttributes();
+  const internalRef = React.useRef(null);
+  React.useImperativeHandle(reference, () => internalRef.current ?? {});
+  React.useEffect(() => {
+    if (internalRef.current) {
+      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment
+      internalRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate, reference]);
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
     className: clsx.clsx('np-checkbox-button', className, disabled && 'disabled'),
     children: [/*#__PURE__*/jsxRuntime.jsx("input", {
       ...inputAttributes,
       ...rest,
-      ref: reference,
+      ref: reference ?? internalRef,
       type: "checkbox",
       disabled: disabled,
       checked: checked,

package/build/checkboxButton/CheckboxButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.js","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n        <span className=\"np-tw-checkbox-indeterminate\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;;;AAOA,MAAMA,cAAc,gBAAGC,gBAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBAC7EC,cAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAK,eAAA,CAAA,MAAA,EAAA;AAAMP,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,gBAClCC,cAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAChB,CAAA,eAAAU,cAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,8BAAA;AAA8B,OAChD,CAAA,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.js","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {\n  indeterminate?: boolean;\n};\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, indeterminate = false, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  const internalRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(reference, () => internalRef.current ?? ({} as HTMLInputElement));\n\n  useEffect(() => {\n    if (internalRef.current) {\n      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment\n      internalRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, reference]);\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference ?? internalRef}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n        <span className=\"np-tw-checkbox-indeterminate\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","indeterminate","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","internalRef","useRef","useImperativeHandle","current","useEffect","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;;;AASA,MAAMA,cAAc,gBAAGC,gBAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;AAAEC,EAAAA,aAAa,GAAG,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAM,CAAA,EAC1EC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAE5C,EAAA,MAAMC,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC,CAAA;EAElDC,yBAAmB,CAACL,SAAS,EAAE,MAAMG,WAAW,CAACG,OAAO,IAAK,EAAuB,CAAC,CAAA;AAErFC,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIJ,WAAW,CAACG,OAAO,EAAE;AACvB;AACAH,MAAAA,WAAW,CAACG,OAAO,CAACX,aAAa,GAAGA,aAAa,CAAA;AACnD,KAAA;AACF,GAAC,EAAE,CAACA,aAAa,EAAEK,SAAS,CAAC,CAAC,CAAA;AAE9B,EAAA,oBACEQ,eAAA,CAAA,MAAA,EAAA;IAAMZ,SAAS,EAAEa,SAAI,CAAC,oBAAoB,EAAEb,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAa,IAAAA,QAAA,gBAC7EC,cAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACMV,eAAe;AAAA,MAAA,GACfF,IAAI;MACRa,GAAG,EAAEZ,SAAS,IAAIG,WAAY;AAC9BU,MAAAA,IAAI,EAAC,UAAU;AACfhB,MAAAA,QAAQ,EAAEA,QAAS;AACnBH,MAAAA,OAAO,EAAEA,OAAQ;AACjBI,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAU,eAAA,CAAA,MAAA,EAAA;AAAMZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAc,MAAAA,QAAA,gBAClCC,cAAA,CAAA,MAAA,EAAA;AAAMf,QAAAA,SAAS,EAAC,mBAAA;OAChB,CAAA,eAAAe,cAAA,CAAA,MAAA,EAAA;AAAMf,QAAAA,SAAS,EAAC,8BAAA;AAA8B,OAChD,CAAA,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}

package/build/checkboxButton/CheckboxButton.mjs

@@ -1,22 +1,31 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
 import { useInputAttributes } from '../inputs/contexts.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const CheckboxButton = /*#__PURE__*/forwardRef(function CheckboxButton({
   checked,
+  indeterminate = false,
   className,
   disabled,
   onChange,
   ...rest
 }, reference) {
   const inputAttributes = useInputAttributes();
+  const internalRef = useRef(null);
+  useImperativeHandle(reference, () => internalRef.current ?? {});
+  useEffect(() => {
+    if (internalRef.current) {
+      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment
+      internalRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate, reference]);
   return /*#__PURE__*/jsxs("span", {
     className: clsx('np-checkbox-button', className, disabled && 'disabled'),
     children: [/*#__PURE__*/jsx("input", {
       ...inputAttributes,
       ...rest,
-      ref: reference,
+      ref: reference ?? internalRef,
       type: "checkbox",
       disabled: disabled,
       checked: checked,

package/build/checkboxButton/CheckboxButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n        <span className=\"np-tw-checkbox-indeterminate\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;AAOA,MAAMA,cAAc,gBAAGC,UAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,IAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBAC7EC,GAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAK,IAAA,CAAA,MAAA,EAAA;AAAMP,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,gBAClCC,GAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAChB,CAAA,eAAAU,GAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,8BAAA;AAA8B,OAChD,CAAA,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.mjs","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {\n  indeterminate?: boolean;\n};\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, indeterminate = false, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  const internalRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(reference, () => internalRef.current ?? ({} as HTMLInputElement));\n\n  useEffect(() => {\n    if (internalRef.current) {\n      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment\n      internalRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, reference]);\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference ?? internalRef}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n        <span className=\"np-tw-checkbox-indeterminate\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","indeterminate","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","internalRef","useRef","useImperativeHandle","current","useEffect","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;AASA,MAAMA,cAAc,gBAAGC,UAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;AAAEC,EAAAA,aAAa,GAAG,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAM,CAAA,EAC1EC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAE5C,EAAA,MAAMC,WAAW,GAAGC,MAAM,CAAmB,IAAI,CAAC,CAAA;EAElDC,mBAAmB,CAACL,SAAS,EAAE,MAAMG,WAAW,CAACG,OAAO,IAAK,EAAuB,CAAC,CAAA;AAErFC,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIJ,WAAW,CAACG,OAAO,EAAE;AACvB;AACAH,MAAAA,WAAW,CAACG,OAAO,CAACX,aAAa,GAAGA,aAAa,CAAA;AACnD,KAAA;AACF,GAAC,EAAE,CAACA,aAAa,EAAEK,SAAS,CAAC,CAAC,CAAA;AAE9B,EAAA,oBACEQ,IAAA,CAAA,MAAA,EAAA;IAAMZ,SAAS,EAAEa,IAAI,CAAC,oBAAoB,EAAEb,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAa,IAAAA,QAAA,gBAC7EC,GAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACMV,eAAe;AAAA,MAAA,GACfF,IAAI;MACRa,GAAG,EAAEZ,SAAS,IAAIG,WAAY;AAC9BU,MAAAA,IAAI,EAAC,UAAU;AACfhB,MAAAA,QAAQ,EAAEA,QAAS;AACnBH,MAAAA,OAAO,EAAEA,OAAQ;AACjBI,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAU,IAAA,CAAA,MAAA,EAAA;AAAMZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAc,MAAAA,QAAA,gBAClCC,GAAA,CAAA,MAAA,EAAA;AAAMf,QAAAA,SAAS,EAAC,mBAAA;OAChB,CAAA,eAAAe,GAAA,CAAA,MAAA,EAAA;AAAMf,QAAAA,SAAS,EAAC,8BAAA;AAA8B,OAChD,CAAA,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}

package/build/types/checkboxButton/CheckboxButton.d.ts

@@ -1,5 +1,9 @@
 import { InputHTMLAttributes } from 'react';
-export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;
-declare const CheckboxButton: import("react").ForwardRefExoticComponent<CheckboxButtonProps & import("react").RefAttributes<HTMLInputElement>>;
+export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {
+    indeterminate?: boolean;
+};
+declare const CheckboxButton: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    indeterminate?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export default CheckboxButton;
 //# sourceMappingURL=CheckboxButton.d.ts.map

package/build/types/checkboxButton/CheckboxButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.d.ts","sourceRoot":"","sources":["../../../src/checkboxButton/CheckboxButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAExE,QAAA,MAAM,cAAc,kHAuBlB,CAAC;AAEH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CheckboxButton.d.ts","sourceRoot":"","sources":["../../../src/checkboxButton/CheckboxButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAsD,MAAM,OAAO,CAAC;AAIhG,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IACxE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,cAAc;oBAHF,OAAO;oDAqCvB,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-2f6892d",
+  "version": "0.0.0-experimental-9296e7a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,12 +93,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-2f6892d",
+    "@transferwise/neptune-css": "0.0.0-experimental-9296e7a",
     "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-2f6892d",
+    "@transferwise/neptune-css": "0.0.0-experimental-9296e7a",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 
 import CheckboxButton, { CheckboxButtonProps } from './CheckboxButton';
 
@@ -31,25 +31,15 @@ export const Basic: Story = {
 };
 
 const Template = (props: CheckboxButtonProps) => {
-  const checkboxRef = useRef<HTMLInputElement>(null);
-  const [checked, setChecked] = useState(false);
-
-  useEffect(() => {
-    if (checkboxRef.current) {
-      if (!checkboxRef.current.checked) {
-        checkboxRef.current.indeterminate = true;
-      } else {
-        checkboxRef.current.indeterminate = false;
-      }
-    }
-  }, [checked]);
+  const checked = true;
+  const [indeterminate, setIndeterminate] = useState(true);
 
   return (
     <CheckboxButton
       {...props}
-      ref={checkboxRef}
       checked={checked}
-      onChange={() => setChecked(!checked)}
+      indeterminate={indeterminate}
+      onChange={() => setIndeterminate(!indeterminate)}
     />
   );
 };
@@ -58,6 +48,7 @@ export const Indeterminate = () => {
   const args = {
     'aria-label': 'Group checkbox with indeterminate state',
     disabled: false,
+    indeterminate: true,
   };
   return <Template {...args} />;
 };

package/src/checkboxButton/CheckboxButton.tsx

@@ -1,22 +1,35 @@
 import { clsx } from 'clsx';
-import { InputHTMLAttributes, forwardRef } from 'react';
+import { InputHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 
 import { useInputAttributes } from '../inputs/contexts';
 
-export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;
+export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {
+  indeterminate?: boolean;
+};
 
 const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(
-  { checked, className, disabled, onChange, ...rest },
+  { checked, indeterminate = false, className, disabled, onChange, ...rest },
   reference,
 ) {
   const inputAttributes = useInputAttributes();
 
+  const internalRef = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle(reference, () => internalRef.current ?? ({} as HTMLInputElement));
+
+  useEffect(() => {
+    if (internalRef.current) {
+      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment
+      internalRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate, reference]);
+
   return (
     <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>
       <input
         {...inputAttributes}
         {...rest}
-        ref={reference}
+        ref={reference ?? internalRef}
         type="checkbox"
         disabled={disabled}
         checked={checked}