abdul-react 0.0.23 → 0.0.24

package/lib/components/Checkbox/Checkbox.js

@@ -1,36 +1,78 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import classNames from '../../_virtual/index.js';
 import Icon from '../Icon/Icon.js';
 import Typography from '../Typography/Typography.js';
 
-const Checkbox = ({
-  id,
-  name,
-  label,
-  disabled = false,
-  checked: initialChecked = false,
-  partial = false,
-  onChange,
-  variant,
-  isDefaultHover = false,
-  labelFontSize = 12
-}) => {
-  const [checked, setChecked] = useState(initialChecked);
+const Checkbox = props => {
+  const {
+    id,
+    name,
+    label,
+    disabled = false,
+    checked: controlledChecked,
+    partial = false,
+    onChange,
+    variant,
+    isDefaultHover = false,
+    labelFontSize = 12
+  } = props;
+  // Detect controlled vs uncontrolled mode
+  const isControlled = Object.prototype.hasOwnProperty.call(props, 'checked') && typeof controlledChecked !== 'undefined';
+  const [checked, setChecked] = useState(!!controlledChecked);
+  const inputRef = useRef(null);
+  // Keep internal state in sync when controlled
   useEffect(() => {
-    setChecked(initialChecked);
-  }, [initialChecked]);
+    if (isControlled) setChecked(!!controlledChecked);
+  }, [controlledChecked, isControlled]);
+  // Apply native indeterminate for partial state
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = partial && !checked;
+    }
+  }, [partial, checked]);
+  // Stop the grid/excel selection from hijacking events
+  const stopAllCapture = e => {
+    e.stopPropagation();
+    if (e.nativeEvent?.stopImmediatePropagation) {
+      // prevents other React and non-React listeners from firing
+      e.nativeEvent.stopImmediatePropagation();
+    }
+  };
+  const handleChange = e => {
+    if (!isControlled) {
+      setChecked(e.target.checked); // keep UI responsive even if parent doesn't update
+    }
+    onChange?.(e); // still notify parent
+  };
   return jsxs("label", {
     className: "ff-checkbox--overlay",
     htmlFor: id,
+    // Shield at capture phase so document/grid listeners don't see these
+    onPointerDownCapture: stopAllCapture,
+    onMouseDownCapture: stopAllCapture,
+    onClickCapture: stopAllCapture,
+    // Small z-index bump helps if a low z-index overlay exists
+    style: {
+      position: 'relative',
+      zIndex: 2
+    },
+    "data-ff-checkbox-root": true,
     children: [jsx("input", {
+      ref: inputRef,
       type: "checkbox",
       className: "ff-checkbox-input",
       id: id,
       name: name,
-      checked: checked,
-      onChange: onChange,
-      disabled: disabled
+      checked: !!checked,
+      onChange: handleChange,
+      disabled: disabled,
+      "aria-checked": partial ? 'mixed' : checked,
+      "aria-disabled": disabled,
+      // Also shield on the input itself
+      onPointerDownCapture: stopAllCapture,
+      onMouseDownCapture: stopAllCapture,
+      onClickCapture: stopAllCapture
     }), jsx("span", {
       className: classNames('ff-checkbox-custom', {
         'ff-checkbox-checked': checked,

package/lib/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":[null],"names":["Checkbox","id","name","label","disabled","checked","initialChecked","partial","onChange","variant","isDefaultHover","labelFontSize","setChecked","useState","useEffect","_jsxs","className","htmlFor","children","_jsx","type","classNames","Icon","color","Typography","as","fontSize"],"mappings":";;;;;;AAQMA,MAAAA,QAAQ,GAA4BA,CAAC;EACzCC,EAAE;EACFC,IAAI;EACJC,KAAK;AACLC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO,EAAEC,cAAc,GAAG,KAAK;AAC/BC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ;EACRC,OAAO;AACPC,EAAAA,cAAc,GAAG,KAAK;AACtBC,EAAAA,aAAa,GAAG;AAAE,CACnB,KAAI;EACH,MAAM,CAACN,OAAO,EAAEO,UAAU,CAAC,GAAGC,QAAQ,CAACP,cAAc,CAAC;AAEtDQ,EAAAA,SAAS,CAAC,MAAK;IACbF,UAAU,CAACN,cAAc,CAAC;AAC5B,GAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,OACES;AAAOC,IAAAA,SAAS,EAAC,sBAAsB;AAACC,IAAAA,OAAO,EAAEhB,EAAE;AAAAiB,IAAAA,QAAA,EAAA,CACjDC;AACEC,MAAAA,IAAI,EAAC,UAAU;AACfJ,MAAAA,SAAS,EAAC,mBAAmB;AAC7Bf,MAAAA,EAAE,EAAEA,EAAE;AACNC,MAAAA,IAAI,EAAEA,IAAI;AACVG,MAAAA,OAAO,EAAEA,OAAO;AAChBG,MAAAA,QAAQ,EAAEA,QAAQ;AAClBJ,MAAAA,QAAQ,EAAEA;MACV,EACFe,GAAA,CAAA,MAAA,EAAA;AACEH,MAAAA,SAAS,EAAEK,UAAU,CAAC,oBAAoB,EAAE;AAC1C,QAAA,qBAAqB,EAAEhB,OAAO;AAC9B,QAAA,gCAAgC,EAAEE,OAAO,IAAI,CAACF,OAAO;AACrD,QAAA,CAAC,CAAgBI,aAAAA,EAAAA,OAAO,CAAE,CAAA,GAAGA,OAAO;AACpC,QAAA,CAAC,wBAAwBA,OAAO,CAAA,CAAE,GAAGJ,OAAO,IAAII,OAAO;AACvD,QAAA,0BAA0B,EAAEC,cAAc;AAC1C,QAAA,sBAAsB,EAAEN;AACzB,OAAA,CAAC;gBAEDC,OAAO,IACNc,GAAA,CAACG,IAAI,EACH;AAAApB,QAAAA,IAAI,EAAC,MAAM;AACXqB,QAAAA,KAAK,EAAC,2BAA2B;AACjCP,QAAAA,SAAS,EAAC;OACV;MAEC,EACPG,GAAA,CAACK,UAAU,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACC,MAAAA,QAAQ,EAAEf,aAAa;AAAAO,MAAAA,QAAA,EAC1Cf;AACU,KAAA,CAAA;AAAA,GAAA,CACP;AAEZ;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":[null],"names":["Checkbox","props","id","name","label","disabled","checked","controlledChecked","partial","onChange","variant","isDefaultHover","labelFontSize","isControlled","Object","prototype","hasOwnProperty","call","setChecked","useState","inputRef","useRef","useEffect","current","indeterminate","stopAllCapture","e","stopPropagation","nativeEvent","stopImmediatePropagation","handleChange","target","_jsxs","className","htmlFor","onPointerDownCapture","onMouseDownCapture","onClickCapture","style","position","zIndex","children","_jsx","ref","type","classNames","Icon","color","Typography","as","fontSize"],"mappings":"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"}

package/lib/index.cjs

@@ -2371,33 +2371,75 @@ const dropdownDefaultCSSData$1 = {
   maxDropdownHeight: 160
 };
 
-const Checkbox = ({
-  id,
-  name,
-  label,
-  disabled = false,
-  checked: initialChecked = false,
-  partial = false,
-  onChange,
-  variant,
-  isDefaultHover = false,
-  labelFontSize = 12
-}) => {
-  const [checked, setChecked] = React.useState(initialChecked);
+const Checkbox = props => {
+  const {
+    id,
+    name,
+    label,
+    disabled = false,
+    checked: controlledChecked,
+    partial = false,
+    onChange,
+    variant,
+    isDefaultHover = false,
+    labelFontSize = 12
+  } = props;
+  // Detect controlled vs uncontrolled mode
+  const isControlled = Object.prototype.hasOwnProperty.call(props, 'checked') && typeof controlledChecked !== 'undefined';
+  const [checked, setChecked] = React.useState(!!controlledChecked);
+  const inputRef = React.useRef(null);
+  // Keep internal state in sync when controlled
+  React.useEffect(() => {
+    if (isControlled) setChecked(!!controlledChecked);
+  }, [controlledChecked, isControlled]);
+  // Apply native indeterminate for partial state
   React.useEffect(() => {
-    setChecked(initialChecked);
-  }, [initialChecked]);
+    if (inputRef.current) {
+      inputRef.current.indeterminate = partial && !checked;
+    }
+  }, [partial, checked]);
+  // Stop the grid/excel selection from hijacking events
+  const stopAllCapture = e => {
+    e.stopPropagation();
+    if (e.nativeEvent?.stopImmediatePropagation) {
+      // prevents other React and non-React listeners from firing
+      e.nativeEvent.stopImmediatePropagation();
+    }
+  };
+  const handleChange = e => {
+    if (!isControlled) {
+      setChecked(e.target.checked); // keep UI responsive even if parent doesn't update
+    }
+    onChange?.(e); // still notify parent
+  };
   return jsxRuntime.jsxs("label", {
     className: "ff-checkbox--overlay",
     htmlFor: id,
+    // Shield at capture phase so document/grid listeners don't see these
+    onPointerDownCapture: stopAllCapture,
+    onMouseDownCapture: stopAllCapture,
+    onClickCapture: stopAllCapture,
+    // Small z-index bump helps if a low z-index overlay exists
+    style: {
+      position: 'relative',
+      zIndex: 2
+    },
+    "data-ff-checkbox-root": true,
     children: [jsxRuntime.jsx("input", {
+      ref: inputRef,
       type: "checkbox",
       className: "ff-checkbox-input",
       id: id,
       name: name,
-      checked: checked,
-      onChange: onChange,
-      disabled: disabled
+      checked: !!checked,
+      onChange: handleChange,
+      disabled: disabled,
+      "aria-checked": partial ? 'mixed' : checked,
+      "aria-disabled": disabled,
+      // Also shield on the input itself
+      onPointerDownCapture: stopAllCapture,
+      onMouseDownCapture: stopAllCapture,
+      onClickCapture: stopAllCapture
     }), jsxRuntime.jsx("span", {
       className: classNames('ff-checkbox-custom', {
         'ff-checkbox-checked': checked,