@radix-ui/react-checkbox - npm Package Compare versions

Comparing version 1.2.0-rc.1744660991666 to 1.2.0-rc.1744661316162

dist/index.js

@@ -74,6 +74,7 @@ "use strict";
     const isFormControl = button ? form || !!button.closest("form") : true;
-    const [checked = false, setChecked] = (0, import_react_use_controllable_state.useControllableState)({
+    const [checked, setChecked] = (0, import_react_use_controllable_state.useControllableState)({
       prop: checkedProp,
-      defaultProp: defaultChecked,
-      onChange: onCheckedChange
+      defaultProp: defaultChecked ?? false,
+      onChange: onCheckedChange,
+      caller: CHECKBOX_NAME
     });
@@ -116,3 +117,3 @@ const initialCheckedStateRef = React.useRef(checked);
       isFormControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        BubbleInput,
+        CheckboxBubbleInput,
         {
@@ -153,40 +154,55 @@ control: button,
 CheckboxIndicator.displayName = INDICATOR_NAME;
-var BubbleInput = (props) => {
-  const { control, checked, bubbles = true, defaultChecked, ...inputProps } = props;
-  const ref = React.useRef(null);
-  const prevChecked = (0, import_react_use_previous.usePrevious)(checked);
-  const controlSize = (0, import_react_use_size.useSize)(control);
-  React.useEffect(() => {
-    const input = ref.current;
-    const inputProto = window.HTMLInputElement.prototype;
-    const descriptor = Object.getOwnPropertyDescriptor(inputProto, "checked");
-    const setChecked = descriptor.set;
-    if (prevChecked !== checked && setChecked) {
-      const event = new Event("click", { bubbles });
-      input.indeterminate = isIndeterminate(checked);
-      setChecked.call(input, isIndeterminate(checked) ? false : checked);
-      input.dispatchEvent(event);
-    }
-  }, [prevChecked, checked, bubbles]);
-  const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "input",
-    {
-      type: "checkbox",
-      "aria-hidden": true,
-      defaultChecked: defaultChecked ?? defaultCheckedRef.current,
-      ...inputProps,
-      tabIndex: -1,
-      ref,
-      style: {
-        ...props.style,
-        ...controlSize,
-        position: "absolute",
-        pointerEvents: "none",
-        opacity: 0,
-        margin: 0
+var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
+var CheckboxBubbleInput = React.forwardRef(
+  ({
+    __scopeCheckbox,
+    control,
+    checked,
+    bubbles = true,
+    defaultChecked,
+    ...props
+  }, forwardedRef) => {
+    const ref = React.useRef(null);
+    const composedRefs = (0, import_react_compose_refs.useComposedRefs)(ref, forwardedRef);
+    const prevChecked = (0, import_react_use_previous.usePrevious)(checked);
+    const controlSize = (0, import_react_use_size.useSize)(control);
+    React.useEffect(() => {
+      const input = ref.current;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(
+        inputProto,
+        "checked"
+      );
+      const setChecked = descriptor.set;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        input.indeterminate = isIndeterminate(checked);
+        setChecked.call(input, isIndeterminate(checked) ? false : checked);
+        input.dispatchEvent(event);
       }
-    }
-  );
-};
+    }, [prevChecked, checked, bubbles]);
+    const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_primitive.Primitive.input,
+      {
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
+        ...props,
+        tabIndex: -1,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }
+    );
+  }
+);
+CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
 function isIndeterminate(checked) {
@@ -193,0 +209,0 @@ return checked === "indeterminate";

package.json

 {
   "name": "@radix-ui/react-checkbox",
-  "version": "1.2.0-rc.1744660991666",
+  "version": "1.2.0-rc.1744661316162",
   "license": "MIT",
@@ -14,10 +14,10 @@ "source": "./src/index.ts",
   "dependencies": {
+    "@radix-ui/react-compose-refs": "1.1.2",
     "@radix-ui/primitive": "1.1.2",
-    "@radix-ui/react-compose-refs": "1.1.2",
     "@radix-ui/react-context": "1.1.2",
-    "@radix-ui/react-primitive": "2.1.0-rc.1744660991666",
-    "@radix-ui/react-use-controllable-state": "1.2.0-rc.1744660991666",
-    "@radix-ui/react-presence": "1.1.3",
+    "@radix-ui/react-primitive": "2.1.0-rc.1744661316162",
+    "@radix-ui/react-use-controllable-state": "1.2.0-rc.1744661316162",
     "@radix-ui/react-use-previous": "1.1.1",
-    "@radix-ui/react-use-size": "1.1.1"
+    "@radix-ui/react-use-size": "1.1.1",
+    "@radix-ui/react-presence": "1.1.3"
   },
@@ -24,0 +24,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

47345

6.16%

Lines of code

416

8.33%

Dependency changes

• + Added

  @radix-ui/react-primitive@2.1.0-rc.1744661316162
  (transitive)

• + Added

  @radix-ui/react-use-controllable-state@1.2.0-rc.1744661316162
  (transitive)

• - Removed

  @radix-ui/react-primitive@2.1.0-rc.1744660991666
  (transitive)

• - Removed

  @radix-ui/react-use-controllable-state@1.2.0-rc.1744660991666
  (transitive)

• Updated

  @radix-ui/react-primitive@2.1.0-rc.1744661316162

• Updated

  @radix-ui/react-use-controllable-state@1.2.0-rc.1744661316162