trotl-table 1.0.53 → 1.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -122,10 +122,12 @@ export default function Demo() {
122
122
  - `showKey`: show row key (true/false)
123
123
  - `enableDragRow`: enable drag‑and‑drop (true/false)
124
124
  - `selectedRowsCallback`: callback with selected row IDs
125
+ - `enableMultiSelect`: show checkboxes for selecting rows (works regardless of which action buttons are present)
125
126
  - `initialSelectedRows` (or `initaialSelectedRows`): initial selected row IDs (or row objects with `id`) for preselection
126
127
  - `editCallback`: callback when editing a row
127
128
  - `viewCallback`: callback when viewing a row
128
129
  - `deleteCallback`: async callback for deleting a row
130
+ - Note: earlier versions required the delete button for multi‑select; now `enableMultiSelect` works even when `buttons` is empty
129
131
  - `buttons`: array of action buttons to show
130
132
  - `onCellChange`: callback invoked when a cell value changes (signature: `(row, accessor, newValue)`).
131
133
  - Supported editable column `type` values: `checkbox`, `switch` (renders a `Switch` component).
package/dist/Modal.cjs.js CHANGED
@@ -17,6 +17,10 @@ const Modal = ({
17
17
  closeOnEscape = true,
18
18
  closeOnOutsideClick = true
19
19
  }) => {
20
+ const contentRef = React.useRef(null);
21
+ const [overflowing, setOverflowing] = React.useState(false);
22
+
23
+ // watch for key presses
20
24
  React.useEffect(() => {
21
25
  const handleKey = e => {
22
26
  if (e.key === 'Escape' && closeOnEscape) {
@@ -26,17 +30,31 @@ const Modal = ({
26
30
  document.addEventListener('keydown', handleKey);
27
31
  return () => document.removeEventListener('keydown', handleKey);
28
32
  }, [closeOnEscape, onCancel]);
33
+
34
+ // detect if content is larger than its container
35
+ React.useEffect(() => {
36
+ function checkOverflow() {
37
+ const el = contentRef.current;
38
+ if (el) {
39
+ setOverflowing(el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
40
+ }
41
+ }
42
+ checkOverflow();
43
+ window.addEventListener('resize', checkOverflow);
44
+ return () => window.removeEventListener('resize', checkOverflow);
45
+ }, [children]);
29
46
  if (!isOpen) return null;
30
47
  return /*#__PURE__*/React.createElement("div", {
31
48
  className: "modal-overlay",
32
49
  onClick: closeOnOutsideClick ? onCancel : undefined
33
50
  }, /*#__PURE__*/React.createElement("div", {
34
- className: "modal-box",
51
+ className: "modal-box" + (overflowing ? " overflowing" : ""),
35
52
  onClick: e => e.stopPropagation()
36
53
  }, /*#__PURE__*/React.createElement("h3", {
37
54
  className: "modal-title"
38
55
  }, title), /*#__PURE__*/React.createElement("div", {
39
- className: "modal-content"
56
+ className: "modal-content",
57
+ ref: contentRef
40
58
  }, children), /*#__PURE__*/React.createElement("div", {
41
59
  className: "modal-actions"
42
60
  }, showCancel && /*#__PURE__*/React.createElement("button", {
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.cjs.js","sources":["../src/components/Modal.jsx"],"sourcesContent":["import React, { useEffect } from 'react';\r\n\r\nconst Modal = ({\r\n isOpen,\r\n title = 'Confirm',\r\n children,\r\n onConfirm,\r\n onCancel,\r\n confirmLabel = 'Confirm',\r\n cancelLabel = 'Cancel',\r\n showCancel = false,\r\n showConfirm = false,\r\n closeOnEscape = true,\r\n closeOnOutsideClick = true\r\n}) => {\r\n const t = {}\r\n useEffect(() => {\r\n const handleKey = (e) => {\r\n if (e.key === 'Escape' && closeOnEscape) {\r\n onCancel?.();\r\n }\r\n };\r\n document.addEventListener('keydown', handleKey);\r\n return () => document.removeEventListener('keydown', handleKey);\r\n }, [closeOnEscape, onCancel]);\r\n\r\n if (!isOpen) return null;\r\n\r\n return (\r\n <div className=\"modal-overlay\" onClick={closeOnOutsideClick ? onCancel : undefined}>\r\n <div className=\"modal-box\" onClick={(e) => e.stopPropagation()}>\r\n <h3 className=\"modal-title\">{title}</h3>\r\n <div className=\"modal-content\">{children}</div>\r\n <div className=\"modal-actions\">\r\n {showCancel && (\r\n <button className=\"basic-button cancel\" onClick={onCancel}>\r\n {cancelLabel}\r\n </button>\r\n )}\r\n {showConfirm && <button className=\"basic-button confirm\" onClick={onConfirm}>\r\n {confirmLabel}\r\n </button>}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Modal;\r\n"],"names":["Modal","isOpen","title","children","onConfirm","onCancel","confirmLabel","cancelLabel","showCancel","showConfirm","closeOnEscape","closeOnOutsideClick","useEffect","handleKey","e","key","document","addEventListener","removeEventListener","React","createElement","className","onClick","undefined","stopPropagation"],"mappings":";;;;;;AAEA,MAAMA,KAAK,GAAGA,CAAC;EACbC,MAAM;AACNC,EAAAA,KAAK,GAAG,SAAS;EACjBC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,YAAY,GAAG,SAAS;AACxBC,EAAAA,WAAW,GAAG,QAAQ;AACtBC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,WAAW,GAAG,KAAK;AACnBC,EAAAA,aAAa,GAAG,IAAI;AACpBC,EAAAA,mBAAmB,GAAG;AACxB,CAAC,KAAK;AAEJC,EAAAA,eAAS,CAAC,MAAM;IACd,MAAMC,SAAS,GAAIC,CAAC,IAAK;AACvB,MAAA,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,IAAIL,aAAa,EAAE;AACvCL,QAAAA,QAAQ,IAAI;AACd,MAAA;IACF,CAAC;AACDW,IAAAA,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,SAAS,CAAC;IAC/C,OAAO,MAAMG,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEL,SAAS,CAAC;AACjE,EAAA,CAAC,EAAE,CAACH,aAAa,EAAEL,QAAQ,CAAC,CAAC;AAE7B,EAAA,IAAI,CAACJ,MAAM,EAAE,OAAO,IAAI;EAExB,oBACEkB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,eAAe;AAACC,IAAAA,OAAO,EAAEX,mBAAmB,GAAGN,QAAQ,GAAGkB;GAAU,eACjFJ,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,WAAW;AAACC,IAAAA,OAAO,EAAGR,CAAC,IAAKA,CAAC,CAACU,eAAe;GAAG,eAC7DL,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC;AAAa,GAAA,EAAEnB,KAAU,CAAC,eACxCiB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAe,GAAA,EAAElB,QAAc,CAAC,eAC/CgB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAe,GAAA,EAC3Bb,UAAU,iBACTW,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQC,IAAAA,SAAS,EAAC,qBAAqB;AAACC,IAAAA,OAAO,EAAEjB;AAAS,GAAA,EACvDE,WACK,CACT,EACAE,WAAW,iBAAIU,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQC,IAAAA,SAAS,EAAC,sBAAsB;AAACC,IAAAA,OAAO,EAAElB;AAAU,GAAA,EACzEE,YACK,CACL,CACF,CACF,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"Modal.cjs.js","sources":["../src/components/Modal.jsx"],"sourcesContent":["import React, { useEffect } from 'react';\r\n\r\nconst Modal = ({\r\n isOpen,\r\n title = 'Confirm',\r\n children,\r\n onConfirm,\r\n onCancel,\r\n confirmLabel = 'Confirm',\r\n cancelLabel = 'Cancel',\r\n showCancel = false,\r\n showConfirm = false,\r\n closeOnEscape = true,\r\n closeOnOutsideClick = true\r\n}) => {\r\n const t = {};\r\n const contentRef = React.useRef(null);\r\n const [overflowing, setOverflowing] = React.useState(false);\r\n\r\n // watch for key presses\r\n useEffect(() => {\r\n const handleKey = (e) => {\r\n if (e.key === 'Escape' && closeOnEscape) {\r\n onCancel?.();\r\n }\r\n };\r\n document.addEventListener('keydown', handleKey);\r\n return () => document.removeEventListener('keydown', handleKey);\r\n }, [closeOnEscape, onCancel]);\r\n\r\n // detect if content is larger than its container\r\n useEffect(() => {\r\n function checkOverflow() {\r\n const el = contentRef.current;\r\n if (el) {\r\n setOverflowing(\r\n el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth\r\n );\r\n }\r\n }\r\n checkOverflow();\r\n window.addEventListener('resize', checkOverflow);\r\n return () => window.removeEventListener('resize', checkOverflow);\r\n }, [children]);\r\n\r\n if (!isOpen) return null;\r\n\r\n return (\r\n <div className=\"modal-overlay\" onClick={closeOnOutsideClick ? onCancel : undefined}>\r\n <div\r\n className={\"modal-box\" + (overflowing ? \" overflowing\" : \"\")}\r\n onClick={(e) => e.stopPropagation()}\r\n >\r\n <h3 className=\"modal-title\">{title}</h3>\r\n <div className=\"modal-content\" ref={contentRef}>\r\n {children}\r\n </div>\r\n <div className=\"modal-actions\">\r\n {showCancel && (\r\n <button className=\"basic-button cancel\" onClick={onCancel}>\r\n {cancelLabel}\r\n </button>\r\n )}\r\n {showConfirm && (\r\n <button className=\"basic-button confirm\" onClick={onConfirm}>\r\n {confirmLabel}\r\n </button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Modal;\r\n"],"names":["Modal","isOpen","title","children","onConfirm","onCancel","confirmLabel","cancelLabel","showCancel","showConfirm","closeOnEscape","closeOnOutsideClick","contentRef","React","useRef","overflowing","setOverflowing","useState","useEffect","handleKey","e","key","document","addEventListener","removeEventListener","checkOverflow","el","current","scrollHeight","clientHeight","scrollWidth","clientWidth","window","createElement","className","onClick","undefined","stopPropagation","ref"],"mappings":"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"}
package/dist/Modal.esm.js CHANGED
@@ -13,6 +13,10 @@ const Modal = ({
13
13
  closeOnEscape = true,
14
14
  closeOnOutsideClick = true
15
15
  }) => {
16
+ const contentRef = React__default.useRef(null);
17
+ const [overflowing, setOverflowing] = React__default.useState(false);
18
+
19
+ // watch for key presses
16
20
  useEffect(() => {
17
21
  const handleKey = e => {
18
22
  if (e.key === 'Escape' && closeOnEscape) {
@@ -22,17 +26,31 @@ const Modal = ({
22
26
  document.addEventListener('keydown', handleKey);
23
27
  return () => document.removeEventListener('keydown', handleKey);
24
28
  }, [closeOnEscape, onCancel]);
29
+
30
+ // detect if content is larger than its container
31
+ useEffect(() => {
32
+ function checkOverflow() {
33
+ const el = contentRef.current;
34
+ if (el) {
35
+ setOverflowing(el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
36
+ }
37
+ }
38
+ checkOverflow();
39
+ window.addEventListener('resize', checkOverflow);
40
+ return () => window.removeEventListener('resize', checkOverflow);
41
+ }, [children]);
25
42
  if (!isOpen) return null;
26
43
  return /*#__PURE__*/React__default.createElement("div", {
27
44
  className: "modal-overlay",
28
45
  onClick: closeOnOutsideClick ? onCancel : undefined
29
46
  }, /*#__PURE__*/React__default.createElement("div", {
30
- className: "modal-box",
47
+ className: "modal-box" + (overflowing ? " overflowing" : ""),
31
48
  onClick: e => e.stopPropagation()
32
49
  }, /*#__PURE__*/React__default.createElement("h3", {
33
50
  className: "modal-title"
34
51
  }, title), /*#__PURE__*/React__default.createElement("div", {
35
- className: "modal-content"
52
+ className: "modal-content",
53
+ ref: contentRef
36
54
  }, children), /*#__PURE__*/React__default.createElement("div", {
37
55
  className: "modal-actions"
38
56
  }, showCancel && /*#__PURE__*/React__default.createElement("button", {
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.esm.js","sources":["../src/components/Modal.jsx"],"sourcesContent":["import React, { useEffect } from 'react';\r\n\r\nconst Modal = ({\r\n isOpen,\r\n title = 'Confirm',\r\n children,\r\n onConfirm,\r\n onCancel,\r\n confirmLabel = 'Confirm',\r\n cancelLabel = 'Cancel',\r\n showCancel = false,\r\n showConfirm = false,\r\n closeOnEscape = true,\r\n closeOnOutsideClick = true\r\n}) => {\r\n const t = {}\r\n useEffect(() => {\r\n const handleKey = (e) => {\r\n if (e.key === 'Escape' && closeOnEscape) {\r\n onCancel?.();\r\n }\r\n };\r\n document.addEventListener('keydown', handleKey);\r\n return () => document.removeEventListener('keydown', handleKey);\r\n }, [closeOnEscape, onCancel]);\r\n\r\n if (!isOpen) return null;\r\n\r\n return (\r\n <div className=\"modal-overlay\" onClick={closeOnOutsideClick ? onCancel : undefined}>\r\n <div className=\"modal-box\" onClick={(e) => e.stopPropagation()}>\r\n <h3 className=\"modal-title\">{title}</h3>\r\n <div className=\"modal-content\">{children}</div>\r\n <div className=\"modal-actions\">\r\n {showCancel && (\r\n <button className=\"basic-button cancel\" onClick={onCancel}>\r\n {cancelLabel}\r\n </button>\r\n )}\r\n {showConfirm && <button className=\"basic-button confirm\" onClick={onConfirm}>\r\n {confirmLabel}\r\n </button>}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Modal;\r\n"],"names":["Modal","isOpen","title","children","onConfirm","onCancel","confirmLabel","cancelLabel","showCancel","showConfirm","closeOnEscape","closeOnOutsideClick","useEffect","handleKey","e","key","document","addEventListener","removeEventListener","React","createElement","className","onClick","undefined","stopPropagation"],"mappings":";;AAEA,MAAMA,KAAK,GAAGA,CAAC;EACbC,MAAM;AACNC,EAAAA,KAAK,GAAG,SAAS;EACjBC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,YAAY,GAAG,SAAS;AACxBC,EAAAA,WAAW,GAAG,QAAQ;AACtBC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,WAAW,GAAG,KAAK;AACnBC,EAAAA,aAAa,GAAG,IAAI;AACpBC,EAAAA,mBAAmB,GAAG;AACxB,CAAC,KAAK;AAEJC,EAAAA,SAAS,CAAC,MAAM;IACd,MAAMC,SAAS,GAAIC,CAAC,IAAK;AACvB,MAAA,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,IAAIL,aAAa,EAAE;AACvCL,QAAAA,QAAQ,IAAI;AACd,MAAA;IACF,CAAC;AACDW,IAAAA,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,SAAS,CAAC;IAC/C,OAAO,MAAMG,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEL,SAAS,CAAC;AACjE,EAAA,CAAC,EAAE,CAACH,aAAa,EAAEL,QAAQ,CAAC,CAAC;AAE7B,EAAA,IAAI,CAACJ,MAAM,EAAE,OAAO,IAAI;EAExB,oBACEkB,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,eAAe;AAACC,IAAAA,OAAO,EAAEX,mBAAmB,GAAGN,QAAQ,GAAGkB;GAAU,eACjFJ,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,WAAW;AAACC,IAAAA,OAAO,EAAGR,CAAC,IAAKA,CAAC,CAACU,eAAe;GAAG,eAC7DL,cAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC;AAAa,GAAA,EAAEnB,KAAU,CAAC,eACxCiB,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAe,GAAA,EAAElB,QAAc,CAAC,eAC/CgB,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAe,GAAA,EAC3Bb,UAAU,iBACTW,cAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQC,IAAAA,SAAS,EAAC,qBAAqB;AAACC,IAAAA,OAAO,EAAEjB;AAAS,GAAA,EACvDE,WACK,CACT,EACAE,WAAW,iBAAIU,cAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQC,IAAAA,SAAS,EAAC,sBAAsB;AAACC,IAAAA,OAAO,EAAElB;AAAU,GAAA,EACzEE,YACK,CACL,CACF,CACF,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"Modal.esm.js","sources":["../src/components/Modal.jsx"],"sourcesContent":["import React, { useEffect } from 'react';\r\n\r\nconst Modal = ({\r\n isOpen,\r\n title = 'Confirm',\r\n children,\r\n onConfirm,\r\n onCancel,\r\n confirmLabel = 'Confirm',\r\n cancelLabel = 'Cancel',\r\n showCancel = false,\r\n showConfirm = false,\r\n closeOnEscape = true,\r\n closeOnOutsideClick = true\r\n}) => {\r\n const t = {};\r\n const contentRef = React.useRef(null);\r\n const [overflowing, setOverflowing] = React.useState(false);\r\n\r\n // watch for key presses\r\n useEffect(() => {\r\n const handleKey = (e) => {\r\n if (e.key === 'Escape' && closeOnEscape) {\r\n onCancel?.();\r\n }\r\n };\r\n document.addEventListener('keydown', handleKey);\r\n return () => document.removeEventListener('keydown', handleKey);\r\n }, [closeOnEscape, onCancel]);\r\n\r\n // detect if content is larger than its container\r\n useEffect(() => {\r\n function checkOverflow() {\r\n const el = contentRef.current;\r\n if (el) {\r\n setOverflowing(\r\n el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth\r\n );\r\n }\r\n }\r\n checkOverflow();\r\n window.addEventListener('resize', checkOverflow);\r\n return () => window.removeEventListener('resize', checkOverflow);\r\n }, [children]);\r\n\r\n if (!isOpen) return null;\r\n\r\n return (\r\n <div className=\"modal-overlay\" onClick={closeOnOutsideClick ? onCancel : undefined}>\r\n <div\r\n className={\"modal-box\" + (overflowing ? \" overflowing\" : \"\")}\r\n onClick={(e) => e.stopPropagation()}\r\n >\r\n <h3 className=\"modal-title\">{title}</h3>\r\n <div className=\"modal-content\" ref={contentRef}>\r\n {children}\r\n </div>\r\n <div className=\"modal-actions\">\r\n {showCancel && (\r\n <button className=\"basic-button cancel\" onClick={onCancel}>\r\n {cancelLabel}\r\n </button>\r\n )}\r\n {showConfirm && (\r\n <button className=\"basic-button confirm\" onClick={onConfirm}>\r\n {confirmLabel}\r\n </button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Modal;\r\n"],"names":["Modal","isOpen","title","children","onConfirm","onCancel","confirmLabel","cancelLabel","showCancel","showConfirm","closeOnEscape","closeOnOutsideClick","contentRef","React","useRef","overflowing","setOverflowing","useState","useEffect","handleKey","e","key","document","addEventListener","removeEventListener","checkOverflow","el","current","scrollHeight","clientHeight","scrollWidth","clientWidth","window","createElement","className","onClick","undefined","stopPropagation","ref"],"mappings":"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"}
package/dist/Table.cjs.js CHANGED
@@ -10476,7 +10476,7 @@ function TableInner({
10476
10476
  },
10477
10477
  className: "table-row group-row empty-group-drop",
10478
10478
  onClick: () => toggleGroup(gid)
10479
- }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
10479
+ }, enableMultiSelect && /*#__PURE__*/React.createElement("div", {
10480
10480
  className: "table-cell checkbox-cell"
10481
10481
  }, /*#__PURE__*/React.createElement("input", {
10482
10482
  type: "checkbox",
@@ -10518,7 +10518,7 @@ function TableInner({
10518
10518
  style: style,
10519
10519
  className: "table-row group-row",
10520
10520
  onClick: () => toggleGroup(gid)
10521
- }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
10521
+ }, enableMultiSelect && /*#__PURE__*/React.createElement("div", {
10522
10522
  className: "table-cell checkbox-cell"
10523
10523
  }, /*#__PURE__*/React.createElement("input", {
10524
10524
  type: "checkbox",
@@ -10585,7 +10585,7 @@ function TableInner({
10585
10585
  display: 'flex',
10586
10586
  flex: 1
10587
10587
  }
10588
- }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
10588
+ }, enableMultiSelect && /*#__PURE__*/React.createElement("div", {
10589
10589
  className: "table-cell checkbox-cell"
10590
10590
  }, /*#__PURE__*/React.createElement("input", {
10591
10591
  type: "checkbox",
@@ -10736,7 +10736,7 @@ function TableInner({
10736
10736
  }
10737
10737
  }, /*#__PURE__*/React.createElement("div", {
10738
10738
  className: "table-row header-row"
10739
- }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
10739
+ }, enableMultiSelect && /*#__PURE__*/React.createElement("div", {
10740
10740
  className: "table-cell checkbox-cell"
10741
10741
  }, /*#__PURE__*/React.createElement("input", {
10742
10742
  type: "checkbox",