@toptal/picasso-checkbox 100.0.0 → 100.1.0

package/dist-package/src/Checkbox/Checkbox.d.ts

@@ -21,6 +21,11 @@ export interface Props extends BaseProps, TextLabelProps, Omit<ButtonOrAnchorPro
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
     /** Value of the `Checkbox` (applicable only for controlled component) */
     value?: string;
+    /** Testids of the `Checkbox` internal elements. The top-level `data-testid` stays on the `[role="checkbox"]` element */
+    testIds?: {
+        /** Testid of the visually hidden native `<input>` (rendered as a sibling of the `[role="checkbox"]` element) */
+        input?: string;
+    };
 }
 export declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement | HTMLLabelElement | HTMLDivElement>>;
 export default Checkbox;

package/dist-package/src/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EACT,cAAc,EACf,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAAK,EAAkB,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAiBpE,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACvC,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,oBAAoB;IACpB,UAAU,CAAC,EAAE,aAAa,CAAA;IAC1B,8FAA8F;IAC9F,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;IACT,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,QAAQ,qHAyFnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EACT,cAAc,EACf,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAAK,EAAkB,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAiBpE,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACvC,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,oBAAoB;IACpB,UAAU,CAAC,EAAE,aAAa,CAAA;IAC1B,8FAA8F;IAC9F,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;IACT,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wHAAwH;IACxH,OAAO,CAAC,EAAE;QACR,gHAAgH;QAChH,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAED,eAAO,MAAM,QAAQ,qHA+FnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}

package/dist-package/src/Checkbox/Checkbox.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { useBaseUiId } from '@base-ui/react/internals/useBaseUiId';
-import { toReactChangeEvent } from '@toptal/picasso-shared';
+import { toReactChangeEvent, useInputTestId } from '@toptal/picasso-shared';
 import React, { forwardRef } from 'react';
 import { FormControlLabel } from '@toptal/picasso-form-label';
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
@@ -19,9 +19,9 @@ import { checkboxClassNames } from './styles';
 export const Checkbox = forwardRef(function Checkbox(_a, ref) {
     var _b;
     var { disabled = false, indeterminate = false, onChange = () => { } } = _a, props = __rest(_a, ["disabled", "indeterminate", "onChange"]);
-    const { label, id, className, style, labelStyle, requiredDecoration, value, checked, titleCase } = props, rest = __rest(props
+    const { label, id, className, style, labelStyle, requiredDecoration, value, checked, titleCase, testIds } = props, rest = __rest(props
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    , ["label", "id", "className", "style", "labelStyle", "requiredDecoration", "value", "checked", "titleCase"]);
+    , ["label", "id", "className", "style", "labelStyle", "requiredDecoration", "value", "checked", "titleCase", "testIds"]);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { color, 'data-private': dataPrivate } = rest, checkboxAttributes = __rest(rest
     // Public Props extend button/anchor HTML attributes, but the rendered control
@@ -36,13 +36,16 @@ export const Checkbox = forwardRef(function Checkbox(_a, ref) {
     // node (see FormControlLabel `labelId`), only when there is a label.
     const generatedLabelId = useBaseUiId();
     const labelId = label ? generatedLabelId : undefined;
+    // Base UI renders the hidden input beside the root and exposes it only
+    // through `inputRef`, so the testid is stamped on it imperatively
+    const inputTestIdRef = useInputTestId(testIds === null || testIds === void 0 ? void 0 : testIds.input);
     const checkboxElement = (
     // The visually-hidden <input> ships inline `position:absolute` with a
     // negative margin; `relative` + `translate-px` anchor it inside the 16px
     // box so it doesn't grow the rendered box, and `appearance-none` stops the
     // native control painting over it.
     React.createElement("span", { className: 'relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x-px [&_input]:translate-y-px' },
-        React.createElement(BaseCheckbox.Root, Object.assign({}, rootRest, { ref: label ? undefined : ref, "aria-labelledby": (_b = rootRest['aria-labelledby']) !== null && _b !== void 0 ? _b : labelId, checked: checked, disabled: disabled, id: id, value: value, indeterminate: indeterminate, onCheckedChange: (nextChecked, { event }) => onChange(toReactChangeEvent(event), nextChecked), className: twMerge(checkboxClassNames, className), style: style }))));
+        React.createElement(BaseCheckbox.Root, Object.assign({}, rootRest, { ref: label ? undefined : ref, inputRef: inputTestIdRef, "aria-labelledby": (_b = rootRest['aria-labelledby']) !== null && _b !== void 0 ? _b : labelId, checked: checked, disabled: disabled, id: id, value: value, indeterminate: indeterminate, onCheckedChange: (nextChecked, { event }) => onChange(toReactChangeEvent(event), nextChecked), className: twMerge(checkboxClassNames, className), style: style }))));
     if (!label) {
         return checkboxElement;
     }

package/dist-package/src/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAA;AAMlE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAE7D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAyC7C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAGhC,SAAS,QAAQ,CACjB,EAA0E,EAC1E,GAAG;;QADH,EAAE,QAAQ,GAAG,KAAK,EAAE,aAAa,GAAG,KAAK,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,OAAY,EAAP,KAAK,cAAxE,yCAA0E,CAAF;IAGxE,MAAM,EACJ,KAAK,EACL,EAAE,EACF,SAAS,EACT,KAAK,EACL,UAAU,EACV,kBAAkB,EAClB,KAAK,EACL,OAAO,EACP,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK;IAET,6DAA6D;MAbvD,0GAWL,CAAQ,CAAA;IAET,6DAA6D;IAC7D,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,KAA4B,IAAI,EAA3B,kBAAkB,UAAK,IAAI;IAE1E,8EAA8E;IAC9E,0EAA0E;IAC1E,uEAAuE;MAJjE,yBAA6D,CAAO,CAAA;IAE1E,8EAA8E;IAC9E,0EAA0E;IAC1E,uEAAuE;IACvE,MAAM,QAAQ,GAAG,kBAAuC,CAAA;IAExD,8EAA8E;IAC9E,qEAAqE;IACrE,MAAM,gBAAgB,GAAG,WAAW,EAAE,CAAA;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAA;IAEpD,MAAM,eAAe,GAAG;IACtB,sEAAsE;IACtE,yEAAyE;IACzE,2EAA2E;IAC3E,mCAAmC;IACnC,8BAAM,SAAS,EAAC,0HAA0H;QACxI,oBAAC,YAAY,CAAC,IAAI,oBACZ,QAAQ,IACZ,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,GAA8B,qBACvC,MAAA,QAAQ,CAAC,iBAAiB,CAAC,mCAAI,OAAO,EACvD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,QAAQ,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,EAElD,SAAS,EAAE,OAAO,CAAC,kBAAkB,EAAE,SAAS,CAAC,EACjD,KAAK,EAAE,KAAK,IACZ,CACG,CACR,CAAA;IAED,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,eAAe,CAAA;IACxB,CAAC;IAED,MAAM,sBAAsB,GAAG;QAC7B,YAAY,EAAE,IAAI,CAAC,YAAY;QAC/B,WAAW,EAAE,IAAI,CAAC,WAAW;KACa,CAAA;IAE5C,OAAO,CACL,oBAAC,gBAAgB,oBACX,sBAAsB,IAC1B,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,GAA4D,EACjE,OAAO,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,MAAM,CACX,kCAAkC,EAClC,YAAY,EACZ,QAAQ,IAAI,eAAe,CAC5B;SACF,EACD,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,kBAAkB,kBACd,WAAW,IACzB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-checkbox",
-  "version": "100.0.0",
+  "version": "100.1.0",
   "description": "Toptal UI components library - Checkbox",
   "publishConfig": {
     "access": "public"
@@ -21,10 +21,10 @@
     "@base-ui/react": "^1.6.0",
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.5.1",
-    "@toptal/picasso-grid": "100.0.0",
-    "@toptal/picasso-form-label": "100.0.0",
-    "@toptal/picasso-shared": "100.0.0",
-    "@toptal/picasso-utils": "100.0.0"
+    "@toptal/picasso-form-label": "100.0.1",
+    "@toptal/picasso-grid": "100.0.1",
+    "@toptal/picasso-shared": "100.1.0",
+    "@toptal/picasso-utils": "100.0.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0 < 19.0.0",
@@ -35,7 +35,7 @@
     "styled-components": "^6.1.1",
     "@toptal/picasso-provider": "100.0.0",
     "@toptal/picasso-tailwind-merge": "100.0.0",
-    "@toptal/picasso-test-utils": "100.0.0"
+    "@toptal/picasso-test-utils": "100.0.1"
   },
   "exports": {
     ".": "./dist-package/src/index.js"

package/src/Checkbox/Checkbox.tsx

@@ -5,7 +5,7 @@ import type {
   BaseProps,
   TextLabelProps,
 } from '@toptal/picasso-shared'
-import { toReactChangeEvent } from '@toptal/picasso-shared'
+import { toReactChangeEvent, useInputTestId } from '@toptal/picasso-shared'
 import type { ComponentProps, CSSProperties, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 import { FormControlLabel } from '@toptal/picasso-form-label'
@@ -51,6 +51,11 @@ export interface Props
   ) => void
   /** Value of the `Checkbox` (applicable only for controlled component) */
   value?: string
+  /** Testids of the `Checkbox` internal elements. The top-level `data-testid` stays on the `[role="checkbox"]` element */
+  testIds?: {
+    /** Testid of the visually hidden native `<input>` (rendered as a sibling of the `[role="checkbox"]` element) */
+    input?: string
+  }
 }
 
 export const Checkbox = forwardRef<
@@ -70,6 +75,7 @@ export const Checkbox = forwardRef<
     value,
     checked,
     titleCase,
+    testIds,
     ...rest
   } = props
 
@@ -86,6 +92,10 @@ export const Checkbox = forwardRef<
   const generatedLabelId = useBaseUiId()
   const labelId = label ? generatedLabelId : undefined
 
+  // Base UI renders the hidden input beside the root and exposes it only
+  // through `inputRef`, so the testid is stamped on it imperatively
+  const inputTestIdRef = useInputTestId(testIds?.input)
+
   const checkboxElement = (
     // The visually-hidden <input> ships inline `position:absolute` with a
     // negative margin; `relative` + `translate-px` anchor it inside the 16px
@@ -95,6 +105,7 @@ export const Checkbox = forwardRef<
       <BaseCheckbox.Root
         {...rootRest}
         ref={label ? undefined : (ref as React.Ref<HTMLElement>)}
+        inputRef={inputTestIdRef}
         aria-labelledby={rootRest['aria-labelledby'] ?? labelId}
         checked={checked}
         disabled={disabled}

package/src/Checkbox/test.tsx

@@ -220,4 +220,38 @@ describe('Checkbox', () => {
       })
     })
   })
+
+  describe('testIds', () => {
+    it('keeps the top-level data-testid on the role element', () => {
+      const { getByTestId, getByRole } = render(
+        <Checkbox data-testid='checkbox' label='Select item' />
+      )
+
+      expect(getByTestId('checkbox')).toBe(getByRole('checkbox'))
+    })
+
+    it('places testIds.input on the visually hidden native input', () => {
+      const { getByTestId, getByRole } = render(
+        <Checkbox label='Select item' testIds={{ input: 'checkbox-input' }} />
+      )
+
+      const input = getByTestId('checkbox-input')
+
+      expect(input).toBeInstanceOf(HTMLInputElement)
+      // the input is rendered beside the role element, not inside it
+      expect(getByRole('checkbox')).not.toContainElement(input)
+
+      fireEvent.click(getByRole('checkbox'))
+
+      expect(input).toBeChecked()
+    })
+
+    it('places testIds.input on the input when there is no label', () => {
+      const { getByTestId } = render(
+        <Checkbox testIds={{ input: 'checkbox-input' }} />
+      )
+
+      expect(getByTestId('checkbox-input')).toBeInstanceOf(HTMLInputElement)
+    })
+  })
 })