@ttoss/ui 4.1.13 → 4.1.14

package/dist/esm/index.js

@@ -494,28 +494,32 @@ import { Slider } from "theme-ui";
 import * as React6 from "react";
 import { Checkbox as CheckBoxUi } from "theme-ui";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var Checkbox = ({
+var Checkbox = /*#__PURE__*/React6.forwardRef(({
   indeterminate = false,
   ...rest
-}) => {
-  const ref = React6.useRef(null);
+}, ref) => {
+  const innerRef = React6.useRef(null);
+  React6.useImperativeHandle(ref, () => {
+    return innerRef.current;
+  });
   React6.useEffect(() => {
-    if (ref.current) {
-      ref.current.indeterminate = indeterminate;
+    if (innerRef.current) {
+      innerRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
   if (indeterminate) {
     return /* @__PURE__ */jsx9("input", {
       type: "checkbox",
-      ref,
+      ref: innerRef,
       ...rest
     });
   }
   return /* @__PURE__ */jsx9(CheckBoxUi, {
-    ref,
+    ref: innerRef,
     ...rest
   });
-};
+});
+Checkbox.displayName = "Checkbox";
 
 // src/components/InfiniteLinearProgress.tsx
 import * as React7 from "react";

package/dist/index.d.mts

@@ -92,7 +92,7 @@ declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps,
 interface CheckboxProps extends CheckboxProps$1 {
     indeterminate?: boolean;
 }
-declare const Checkbox: ({ indeterminate, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -92,7 +92,7 @@ declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps,
 interface CheckboxProps extends CheckboxProps$1 {
     indeterminate?: boolean;
 }
-declare const Checkbox: ({ indeterminate, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -570,28 +570,32 @@ var import_theme_ui20 = require("theme-ui");
 var React6 = __toESM(require("react"));
 var import_theme_ui21 = require("theme-ui");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Checkbox = ({
+var Checkbox = React6.forwardRef(({
   indeterminate = false,
   ...rest
-}) => {
-  const ref = React6.useRef(null);
+}, ref) => {
+  const innerRef = React6.useRef(null);
+  React6.useImperativeHandle(ref, () => {
+    return innerRef.current;
+  });
   React6.useEffect(() => {
-    if (ref.current) {
-      ref.current.indeterminate = indeterminate;
+    if (innerRef.current) {
+      innerRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
   if (indeterminate) {
     return /* @__PURE__ */(0, import_jsx_runtime9.jsx)("input", {
       type: "checkbox",
-      ref,
+      ref: innerRef,
       ...rest
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui21.Checkbox, {
-    ref,
+    ref: innerRef,
     ...rest
   });
-};
+});
+Checkbox.displayName = "Checkbox";
 
 // src/components/InfiniteLinearProgress.tsx
 var React7 = __toESM(require("react"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "4.1.13",
+  "version": "4.1.14",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -43,8 +43,8 @@
     "react": "^18.3.1",
     "tsup": "^8.1.0",
     "@ttoss/config": "^1.32.6",
-    "@ttoss/test-utils": "^2.1.10",
-    "@ttoss/react-icons": "^0.3.10"
+    "@ttoss/react-icons": "^0.3.10",
+    "@ttoss/test-utils": "^2.1.10"
   },
   "keywords": [
     "React",

package/src/components/Checkbox.tsx

@@ -8,18 +8,29 @@ export interface CheckboxProps extends CheckboxPropsUi {
   indeterminate?: boolean;
 }
 
-export const Checkbox = ({ indeterminate = false, ...rest }: CheckboxProps) => {
-  const ref = React.useRef<HTMLInputElement>(null);
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ indeterminate = false, ...rest }, ref) => {
+    const innerRef = React.useRef<HTMLInputElement>(null);
 
-  React.useEffect(() => {
-    if (ref.current) {
-      ref.current.indeterminate = indeterminate;
+    /**
+     * https://stackoverflow.com/a/68163315/8786986
+     */
+    React.useImperativeHandle(ref, () => {
+      return innerRef.current as HTMLInputElement;
+    });
+
+    React.useEffect(() => {
+      if (innerRef.current) {
+        innerRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+
+    if (indeterminate) {
+      return <input type="checkbox" ref={innerRef} {...rest} />;
     }
-  }, [indeterminate]);
 
-  if (indeterminate) {
-    return <input type="checkbox" ref={ref} {...rest} />;
+    return <CheckBoxUi ref={innerRef} {...rest} />;
   }
+);
 
-  return <CheckBoxUi ref={ref} {...rest} />;
-};
+Checkbox.displayName = 'Checkbox';