@teppen/react-ui 1.2.1 → 1.3.0

package/README.md

@@ -155,6 +155,11 @@ const App = () => {
             return "";
           }
         }}
+        checkbox={{
+          checked: (row) => row.id % 2 == 1,
+          onChecked: (row) => console.log("checked", row.id),
+          onUnchecked: (row) => console.log("unchecked", row.id),
+        }}
       />
     </div>
   );
@@ -171,6 +176,7 @@ A component that displays a table based on the row and column information passed
 - Sorting function
 - Filtering function (only when `label` is set in the column information)
 - Editing function (only when `editable` is true and `onCellBlur` is set in the column information)
+- Checkbox function
 
 #### Arguments
 
@@ -224,7 +230,8 @@ export type TTableColumn = {
 };
 ```
 
-※ TColumnType no longer supports `component` since version 1.0.0. Instead, `render` is now supported, allowing for sorting and filtering functions that were not previously supported by `component`.
+※ TColumnType no longer supports `component` since version 1.0.0. Instead, `render`
+is now supported, allowing for sorting and filtering functions that were not previously supported by `component`.
 
 ##### initialCondition
 
@@ -255,6 +262,24 @@ In `applyRowFormatting`, depending on the status of each row, you can define the
 type TApplyRowFormatting = (row: DataObject) => string;
 ```
 
+##### checkbox
+
+In `checkbox`, you can easily place a checkbox at the left edge of the table. If `checkbox` is not defined, no checkbox will appear at the left edge.
+
+When defining a `checkbox`, the following three properties must be set.
+
+1. checked: Function to determine if a checkbox is checked or not
+2. onChecked: Function to define the behavior when a checkbox is checked
+3. onUnchecked: Function to define the behavior when a checkbox is unchecked
+
+```ts
+type TCheckbox = {
+  checked: (row: DataObject) => boolean;
+  onChecked: (row: DataObject) => void;
+  onUnchecked: (row: DataObject) => void;
+};
+```
+
 ## License
 
 This library is licensed under MIT license. See LICENSE file for more information.

package/dist/cjs/src/table/base.js

@@ -1,3 +1,3 @@
 "use client";
-"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("./hook.js"),o=require("./cell.js"),l=require("./header.js"),i=require("./pagenation/providers.js"),s=require("./pagenation/components.js"),a=require("./filter/provider.js"),d=require("./filter/components.js");require("./sort/icon.js");var c=require("./sort/provider.js"),u=require("./sheet/providers.js"),f=require("./edit/provider.js");function v(e){var i=n.useTable(e),c=i.cols,v=i.rows,h=f.useFocusContext(),x=h.isFocus,j=h.isEditing,m=h.edit,p=h.moveLeft,y=h.moveRight,g=h.moveUp,w=h.moveDown,b=h.unfocus,k=h.setMaxRowNumber,q=a.useFilterContext().selectedFilterKey;return t.useEffect((function(){var e=function(e){x&&!j&&("Enter"===e.key?(e.preventDefault(),w()):"Escape"===e.key?(e.preventDefault(),b()):"ArrowRight"===e.key?(e.preventDefault(),y()):"ArrowLeft"===e.key?(e.preventDefault(),p()):"ArrowUp"===e.key?(e.preventDefault(),g()):"ArrowDown"===e.key?(e.preventDefault(),w()):"F2"===e.key&&m())};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[j,x]),t.useEffect((function(){k(v.length-1)}),[v.length]),r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end mb-1 mr-3",children:r.jsx(d.TableFilterRemoveButton,{children:r.jsx("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r.jsx("div",{id:"table-frame",className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:r.jsxs("table",{className:"table table-auto w-full",children:[r.jsx("thead",{children:r.jsx("tr",{className:"sticky top-0 border-gray-200 z-20",children:c.map((function(e){return r.jsx(l.TableHeaderElement,{columnKey:e.key},e.key)}))})}),r.jsxs("tbody",{children:[!!q&&r.jsx("tr",{children:r.jsx("td",{colSpan:c.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl z-20 p-0 overflow-hidden",children:r.jsx(d.TableFilterForm,{})})}),0===v.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:c.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),v.map((function(t,n){return r.jsx(u.RowProvider,{row:t,children:r.jsx("tr",{className:"relative border border-gray-200 after:absolute after:w-full after:h-full after:top-0 after:left-0 after:pointer-events-none after:hover:bg-gray-500/10 ".concat(e.onClickRow?"hover:cursor-pointer":""," ").concat(e.applyRowFormatting?e.applyRowFormatting(t):""),onClick:function(r){r.preventDefault(),e.onClickRow&&e.onClickRow(t)},"data-testid":t.id,children:c.map((function(e,t){return r.jsx(u.CellProvider,{columnKey:e.key,rowIndex:n,colIndex:t,children:r.jsx(o.TableCell,{})},e.key)}))})},t.id)}))]})]})}),r.jsxs("div",{className:"mt-1",children:[r.jsx(s.DisplayRange,{}),r.jsx("div",{className:"mt-2",children:r.jsx(s.Pagenation,{})})]})]})}module.exports=function(t){var n;return r.jsx(a.FilterProvider,{children:r.jsx(c.SortProvider,{initialCondition:null===(n=t.initialCondition)||void 0===n?void 0:n.sort,children:r.jsx(i.PagenationProvider,{rowCount:t.rows.length,children:r.jsx(u.ColumnsProvider,{cols:t.cols,children:r.jsx(f.FocusProvider,{columnCount:t.cols.length,children:r.jsx(v,e.__assign({},t))})})})})})};
+"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react"),o=require("./hook.js"),n=require("./cell.js"),s=require("./header.js"),l=require("./pagenation/providers.js"),i=require("./pagenation/components.js"),c=require("./filter/provider.js"),a=require("./filter/components.js");require("./sort/icon.js");var d=require("./sort/provider.js"),u=require("./sheet/providers.js"),x=require("./edit/provider.js"),h=require("./checkbox/provider.js"),j=require("./checkbox/components.js");function v(e){var l=o.useTable(e),d=l.cols,h=l.rows,v=x.useFocusContext(),f=v.isFocus,m=v.isEditing,p=v.edit,b=v.moveLeft,g=v.moveRight,y=v.moveUp,k=v.moveDown,w=v.unfocus,C=v.setMaxRowNumber,q=c.useFilterContext().selectedFilterKey;return t.useEffect((function(){var e=function(e){f&&!m&&("Enter"===e.key?(e.preventDefault(),k()):"Escape"===e.key?(e.preventDefault(),w()):"ArrowRight"===e.key?(e.preventDefault(),g()):"ArrowLeft"===e.key?(e.preventDefault(),b()):"ArrowUp"===e.key?(e.preventDefault(),y()):"ArrowDown"===e.key?(e.preventDefault(),k()):"F2"===e.key&&p())};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[m,f]),t.useEffect((function(){C(h.length-1)}),[h.length]),r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end mb-1 mr-3",children:r.jsx(a.TableFilterRemoveButton,{children:r.jsx("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r.jsx("div",{id:"table-frame",className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:r.jsxs("table",{className:"table table-auto w-full",children:[r.jsx("thead",{children:r.jsxs("tr",{className:"sticky top-0 border-gray-200 z-20",children:[e.checkbox&&r.jsx("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:r.jsx(j.AllCheckbox,{rows:e.rows})}),d.map((function(e){return r.jsx(s.TableHeaderElement,{columnKey:e.key},e.key)}))]})}),r.jsxs("tbody",{children:[!!q&&r.jsx("tr",{children:r.jsx("td",{colSpan:d.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl z-20 p-0 overflow-hidden",children:r.jsx(a.TableFilterForm,{})})}),0===h.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:d.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),h.map((function(t,o){return r.jsx(u.RowProvider,{row:t,children:r.jsxs("tr",{className:"relative border border-gray-200 after:absolute after:w-full after:h-full after:top-0 after:left-0 after:pointer-events-none after:hover:bg-gray-500/10 ".concat(e.onClickRow?"hover:cursor-pointer":""," ").concat(e.applyRowFormatting?e.applyRowFormatting(t):""),onClick:function(r){r.preventDefault(),e.onClickRow&&e.onClickRow(t)},"data-testid":t.id,children:[r.jsx("td",{children:e.checkbox&&r.jsx(j.Checkbox,{})}),d.map((function(e,t){return r.jsx(u.CellProvider,{columnKey:e.key,rowIndex:o,colIndex:t,children:r.jsx(n.TableCell,{})},e.key)}))]})},t.id)}))]})]})}),r.jsxs("div",{className:"mt-1",children:[r.jsx(i.DisplayRange,{}),r.jsx("div",{className:"mt-2",children:r.jsx(i.Pagenation,{})})]})]})}module.exports=function(t){var o;return r.jsx(c.FilterProvider,{children:r.jsx(d.SortProvider,{initialCondition:null===(o=t.initialCondition)||void 0===o?void 0:o.sort,children:r.jsx(l.PagenationProvider,{rowCount:t.rows.length,children:r.jsx(h.CheckboxProvider,{checkbox:t.checkbox,children:r.jsx(h.CheckboxStatusProvider,{checkboxCount:t.rows.length,children:r.jsx(u.ColumnsProvider,{cols:t.cols,children:r.jsx(x.FocusProvider,{columnCount:t.cols.length,children:r.jsx(v,e.__assign({},t))})})})})})})})};
 //# sourceMappingURL=base.js.map

package/dist/cjs/src/table/checkbox/components.js

@@ -0,0 +1,3 @@
+"use client";
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../sheet/providers.js"),c=require("./provider.js"),r=t.memo((function(){var r=c.useCheckboxContext(),o=c.useCheckboxStatusContext().checkboxStatusState,u=n.useRowContext(),i=t.useMemo((function(){return o.checkedRecords.map((function(e){return e.id}))}),[o.checkedRecords]);return r?e.jsx("div",{className:"flex justify-center gap-1 w-full items-center",children:e.jsx("input",{type:"checkbox",checked:i.includes(u.id),onChange:function(e){e.preventDefault(),e.target.checked?r.onChecked(u):r.onUnchecked(u)},onClick:function(e){e.preventDefault(),e.stopPropagation()}})}):e.jsx(e.Fragment,{})})),o=t.memo((function(n){var r=t.useRef(null),o=c.useCheckboxContext(),u=c.useCheckboxStatusContext(),i=u.checkboxStatusState,s=u.existChecked,a=u.indeterminate,d=t.useMemo((function(){return i.checkedRecords.map((function(e){return e.id}))}),[i.checkedRecords]),h=t.useMemo((function(){return n.rows.filter((function(e){return!d.includes(e.id)}))}),[n.rows,d]);return t.useEffect((function(){null!=r.current&&(r.current.indeterminate=!0===a)}),[a]),o?e.jsx("div",{className:"grid place-items-center w-full px-1",children:e.jsx("input",{ref:r,type:"checkbox",checked:s,onChange:function(e){e.preventDefault(),e.target.checked?h.forEach((function(e){o.onChecked(e)})):i.checkedRecords.forEach((function(e){o.onUnchecked(e)}))},onClick:function(e){e.preventDefault(),e.stopPropagation()}})}):e.jsx(e.Fragment,{})}));exports.AllCheckbox=o,exports.Checkbox=r;
+//# sourceMappingURL=components.js.map

package/dist/cjs/src/table/checkbox/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/cjs/src/table/checkbox/hooks.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),c=function(e,c){if("SET"===c.type)return{checkedRecords:c.payload.checkedRecords}};exports.useCheckboxStatusReducer=function(t){var d=e.useReducer(c,{checkedRecords:[]}),r=d[0];return{checkboxStatusState:r,dispatchCheckboxStatus:d[1],allUnchecked:0===r.checkedRecords.length,existChecked:r.checkedRecords.length>0,indeterminate:r.checkedRecords.length>0&&r.checkedRecords.length<t}};
+//# sourceMappingURL=hooks.js.map

package/dist/cjs/src/table/checkbox/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["../../../../../src/table/checkbox/hooks.ts"],"sourcesContent":["import { useReducer } from \"react\";\nimport { CheckboxStatusReducer } from \"./types\";\nimport { DataRecord } from \"../type\";\n\nconst checkboxReducer: CheckboxStatusReducer<DataRecord> = (state, action) => {\n  switch (action.type) {\n    case \"SET\":\n      return { checkedRecords: action.payload.checkedRecords };\n  }\n};\n\nexport function useCheckboxStatusReducer(checkboxCount: number) {\n  const [checkboxStatusState, dispatchCheckboxStatus] = useReducer(\n    checkboxReducer,\n    { checkedRecords: [] }\n  );\n\n  return {\n    checkboxStatusState,\n    dispatchCheckboxStatus,\n    allUnchecked: checkboxStatusState.checkedRecords.length === 0,\n    existChecked: checkboxStatusState.checkedRecords.length > 0,\n    indeterminate:\n      checkboxStatusState.checkedRecords.length > 0 &&\n      checkboxStatusState.checkedRecords.length < checkboxCount,\n  };\n}\n"],"names":["checkboxReducer","state","action","type","checkedRecords","payload","checkboxCount","_a","useReducer","checkboxStatusState","dispatchCheckboxStatus","allUnchecked","length","existChecked","indeterminate"],"mappings":"oCAIMA,EAAqD,SAACC,EAAOC,GACjE,GACO,QADCA,EAAOC,KAEX,MAAO,CAAEC,eAAgBF,EAAOG,QAAQD,eAE9C,mCAEM,SAAmCE,GACjC,IAAAC,EAAgDC,EAAUA,WAC9DR,EACA,CAAEI,eAAgB,KAFbK,OAKP,MAAO,CACLA,oBAAmBA,EACnBC,4BACAC,aAA4D,IAA9CF,EAAoBL,eAAeQ,OACjDC,aAAcJ,EAAoBL,eAAeQ,OAAS,EAC1DE,cACEL,EAAoBL,eAAeQ,OAAS,GAC5CH,EAAoBL,eAAeQ,OAASN,EAElD"}

package/dist/cjs/src/table/checkbox/provider.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./hooks.js"),c=t.createContext({checkboxStatusState:{checkedRecords:[]},dispatchCheckboxStatus:function(){},allUnchecked:!1,existChecked:!1,indeterminate:!1});var o=t.createContext(void 0);exports.CheckboxProvider=function(t){var r=t.children,c=t.checkbox;return e.jsx(o.Provider,{value:c,children:r})},exports.CheckboxStatusProvider=function(t){var o=t.children,n=t.checkboxCount;return e.jsx(c.Provider,{value:r.useCheckboxStatusReducer(n),children:o})},exports.useCheckboxContext=function(){return t.useContext(o)},exports.useCheckboxStatusContext=function(){return t.useContext(c)};
+//# sourceMappingURL=provider.js.map

package/dist/cjs/src/table/checkbox/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sources":["../../../../../src/table/checkbox/provider.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { TCheckboxProperty } from \"../type\";\nimport { useCheckboxStatusReducer } from \"./hooks\";\n\nconst CheckboxStatusContext = createContext<\n  ReturnType<typeof useCheckboxStatusReducer>\n>({\n  checkboxStatusState: {\n    checkedRecords: [],\n  },\n  dispatchCheckboxStatus: () => {},\n  allUnchecked: false,\n  existChecked: false,\n  indeterminate: false,\n});\n\nexport function CheckboxStatusProvider({\n  children,\n  checkboxCount,\n}: {\n  children: JSX.Element;\n  checkboxCount: number;\n}) {\n  return (\n    <CheckboxStatusContext.Provider\n      value={useCheckboxStatusReducer(checkboxCount)}\n    >\n      {children}\n    </CheckboxStatusContext.Provider>\n  );\n}\n\nexport function useCheckboxStatusContext() {\n  return useContext(CheckboxStatusContext);\n}\n\nconst CheckboxContext =\n  createContext<TCheckboxProperty<any>[\"checkbox\"]>(undefined);\n\nexport function CheckboxProvider({\n  children,\n  checkbox,\n}: {\n  children: React.ReactNode;\n  checkbox: TCheckboxProperty<any>[\"checkbox\"];\n}) {\n  return (\n    <CheckboxContext.Provider value={checkbox}>\n      {children}\n    </CheckboxContext.Provider>\n  );\n}\n\nexport function useCheckboxContext() {\n  return useContext(CheckboxContext);\n}\n"],"names":["CheckboxStatusContext","createContext","checkboxStatusState","checkedRecords","dispatchCheckboxStatus","allUnchecked","existChecked","indeterminate","CheckboxContext","undefined","_a","children","checkbox","_jsx","jsx","Provider","value","checkboxCount","useCheckboxStatusReducer","useContext"],"mappings":"2FAIMA,EAAwBC,EAAAA,cAE5B,CACAC,oBAAqB,CACnBC,eAAgB,IAElBC,uBAAwB,WAAQ,EAChCC,cAAc,EACdC,cAAc,EACdC,eAAe,IAuBjB,IAAMC,EACJP,EAAAA,mBAAkDQ,4BAE9C,SAA2BC,OAC/BC,EAAQD,EAAAC,SACRC,EAAQF,EAAAE,SAKR,OACEC,EAAAC,IAACN,EAAgBO,SAAQ,CAACC,MAAOJ,EAAQD,SACtCA,GAGP,iCAnCM,SAAiCD,OACrCC,EAAQD,EAAAC,SACRM,EAAaP,EAAAO,cAKb,OACEJ,MAACb,EAAsBe,UACrBC,MAAOE,2BAAyBD,GAAcN,SAE7CA,GAGP,wCAwBE,OAAOQ,EAAAA,WAAWX,EACpB,8CAtBE,OAAOW,EAAAA,WAAWnB,EACpB"}

package/dist/cjs/src/table/hook.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),r=require("./pagenation/providers.js");require("react/jsx-runtime");var t=require("./filter/provider.js");require("./filter/constants.js");var o=require("./sheet/providers.js");require("./sort/icon.js");var n=require("./sort/provider.js"),u=require("./edit/provider.js");exports.useCell=function(){var r=o.useCellContext(),t=u.useFocusContext(),n=t.isEditing,s=t.checkFocus,i=t.focus,l=t.focusAndEdit,c=t.finishEditing,a=s(r.rowIndex,r.colIndex);e.useEffect((function(){!r.editable&&a&&n&&c()}),[r.editable,a,n,c]);var f=e.useCallback((function(e){e.preventDefault(),e.stopPropagation(),i(r.rowIndex,r.colIndex)}),[i,r.rowIndex,r.colIndex]),d=e.useCallback((function(e){e.preventDefault(),r.editable&&l(r.rowIndex,r.colIndex)}),[r.editable,l,r.rowIndex,r.colIndex]),x=e.useCallback((function(e){e.preventDefault(),e.stopPropagation()}),[]);return{cell:r,isFocus:a,isEditing:n,onClickCellToFocus:f,onDoubleClickCellToEdit:d,preventPropagation:x}},exports.useCellFocus=function(){var r=e.useRef(null),t=o.useCellContext(),n=t.rowIndex,s=t.colIndex,i=u.useFocusContext(),l=i.isEditing,c=i.checkFocus,a=e.useState(!1),f=a[0],d=a[1],x=c(n,s);e.useEffect((function(){var e;x&&l&&(null===(e=r.current)||void 0===e||e.focus()),d(!1)}),[x,l,f]);var v=e.useCallback((function(){d(!0)}),[]);return{ref:r,callbackAfterBlur:v}},exports.useTable=function(o){var u=t.useFilterContext().filter,s=n.useSortContext().sort,i=r.usePageContext(),l=i.setRowCount,c=i.pageFilter,a=e.useMemo((function(){return u(o.rows)}),[u,o.rows]);e.useEffect((function(){l(a.length)}),[a.length]);var f=e.useMemo((function(){return s(a)}),[a,s]),d=e.useMemo((function(){return c(f)}),[c,f]);return{cols:o.cols,rows:d}};
+"use strict";var e=require("react"),t=require("./pagenation/providers.js");require("react/jsx-runtime");var r=require("./filter/provider.js");require("./filter/constants.js");var o=require("./sheet/providers.js");require("./sort/icon.js");var n=require("./sort/provider.js"),u=require("./edit/provider.js"),s=require("./checkbox/provider.js");exports.useCell=function(){var t=o.useCellContext(),r=u.useFocusContext(),n=r.isEditing,s=r.checkFocus,c=r.focus,i=r.focusAndEdit,l=r.finishEditing,a=s(t.rowIndex,t.colIndex);e.useEffect((function(){!t.editable&&a&&n&&l()}),[t.editable,a,n,l]);var d=e.useCallback((function(e){e.preventDefault(),e.stopPropagation(),c(t.rowIndex,t.colIndex)}),[c,t.rowIndex,t.colIndex]),f=e.useCallback((function(e){e.preventDefault(),t.editable&&i(t.rowIndex,t.colIndex)}),[t.editable,i,t.rowIndex,t.colIndex]),x=e.useCallback((function(e){e.preventDefault(),e.stopPropagation()}),[]);return{cell:t,isFocus:a,isEditing:n,onClickCellToFocus:d,onDoubleClickCellToEdit:f,preventPropagation:x}},exports.useCellFocus=function(){var t=e.useRef(null),r=o.useCellContext(),n=r.rowIndex,s=r.colIndex,c=u.useFocusContext(),i=c.isEditing,l=c.checkFocus,a=e.useState(!1),d=a[0],f=a[1],x=l(n,s);e.useEffect((function(){var e;x&&i&&(null===(e=t.current)||void 0===e||e.focus()),f(!1)}),[x,i,d]);var v=e.useCallback((function(){f(!0)}),[]);return{ref:t,callbackAfterBlur:v}},exports.useTable=function(o){var u=r.useFilterContext().filter,c=n.useSortContext().sort,i=t.usePageContext(),l=i.setRowCount,a=i.pageFilter,d=s.useCheckboxStatusContext().dispatchCheckboxStatus,f=e.useMemo((function(){return u(o.rows)}),[u,o.rows]);e.useEffect((function(){l(f.length)}),[f.length]);var x=e.useMemo((function(){return o.checkbox?o.rows.filter((function(e){var t;return null===(t=o.checkbox)||void 0===t?void 0:t.checked(e)})):[]}),[o.checkbox,o.rows]);e.useEffect((function(){d({type:"SET",payload:{checkedRecords:x}})}),[x]);var v=e.useMemo((function(){return c(f)}),[f,c]),p=e.useMemo((function(){return a(v)}),[a,v]);return{cols:o.cols,rows:p}};
 //# sourceMappingURL=hook.js.map

package/dist/cjs/src/table/hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { DataRecord, TPropsTable } from \"./type\";\nimport { usePageContext } from \"./pagenation/providers\";\nimport { useFilterContext } from \"./filter\";\nimport { useSortContext } from \"./sort\";\nimport { useFocusContext } from \"./edit/provider\";\nimport { useCellContext } from \"./sheet/providers\";\n\nexport function useTable<T extends DataRecord>(props: TPropsTable<T>) {\n  const { filter } = useFilterContext();\n  const { sort } = useSortContext();\n  const { setRowCount, pageFilter } = usePageContext();\n\n  const filteredRows = useMemo(() => filter(props.rows), [filter, props.rows]);\n\n  useEffect(() => {\n    setRowCount(filteredRows.length);\n  }, [filteredRows.length]);\n\n  const sortedRows = useMemo(() => sort(filteredRows), [filteredRows, sort]);\n\n  const pageRows = useMemo(\n    () => pageFilter(sortedRows),\n    [pageFilter, sortedRows]\n  );\n\n  return {\n    cols: props.cols,\n    rows: pageRows,\n  };\n}\n\nexport function useCellFocus<T extends HTMLElement>() {\n  const ref = useRef<T>(null);\n  const { rowIndex, colIndex } = useCellContext();\n  const { isEditing, checkFocus } = useFocusContext();\n  const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n  const isFocus = checkFocus(rowIndex, colIndex);\n\n  useEffect(() => {\n    if (isFocus && isEditing) {\n      ref.current?.focus();\n    }\n    setOccurredOnCellBlur(false);\n  }, [isFocus, isEditing, occurredOnCellBlur]);\n\n  const callbackAfterBlur = useCallback(() => {\n    setOccurredOnCellBlur(true);\n  }, []);\n\n  return { ref, callbackAfterBlur };\n}\n\nexport function useCell() {\n  const cell = useCellContext();\n  const { isEditing, checkFocus, focus, focusAndEdit, finishEditing } =\n    useFocusContext();\n\n  const isFocus = checkFocus(cell.rowIndex, cell.colIndex);\n\n  useEffect(() => {\n    if (!cell.editable && isFocus && isEditing) {\n      finishEditing();\n    }\n  }, [cell.editable, isFocus, isEditing, finishEditing]);\n\n  const onClickCellToFocus: React.MouseEventHandler<HTMLDivElement> =\n    useCallback(\n      (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        focus(cell.rowIndex, cell.colIndex);\n      },\n      [focus, cell.rowIndex, cell.colIndex]\n    );\n\n  const onDoubleClickCellToEdit: React.MouseEventHandler<HTMLDivElement> =\n    useCallback(\n      (e) => {\n        e.preventDefault();\n        if (cell.editable) {\n          focusAndEdit(cell.rowIndex, cell.colIndex);\n        }\n      },\n      [cell.editable, focusAndEdit, cell.rowIndex, cell.colIndex]\n    );\n\n  const preventPropagation: React.MouseEventHandler<HTMLDivElement> =\n    useCallback((e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    }, []);\n\n  return {\n    cell,\n    isFocus,\n    isEditing,\n    onClickCellToFocus,\n    onDoubleClickCellToEdit,\n    preventPropagation,\n  };\n}\n"],"names":["cell","useCellContext","_a","useFocusContext","isEditing","checkFocus","focus","focusAndEdit","finishEditing","isFocus","rowIndex","colIndex","useEffect","editable","onClickCellToFocus","useCallback","e","preventDefault","stopPropagation","onDoubleClickCellToEdit","preventPropagation","ref","useRef","_b","_c","useState","occurredOnCellBlur","setOccurredOnCellBlur","current","callbackAfterBlur","props","filter","useFilterContext","sort","useSortContext","usePageContext","setRowCount","pageFilter","filteredRows","useMemo","rows","length","sortedRows","pageRows","cols"],"mappings":"8UAuDE,IAAMA,EAAOC,EAAAA,iBACPC,EACJC,EAAAA,kBADMC,EAASF,EAAAE,UAAEC,EAAUH,EAAAG,WAAEC,UAAOC,iBAAcC,kBAG9CC,EAAUJ,EAAWL,EAAKU,SAAUV,EAAKW,UAE/CC,EAAAA,WAAU,YACHZ,EAAKa,UAAYJ,GAAWL,GAC/BI,GAEJ,GAAG,CAACR,EAAKa,SAAUJ,EAASL,EAAWI,IAEvC,IAAMM,EACJC,eACE,SAACC,GACCA,EAAEC,iBACFD,EAAEE,kBACFZ,EAAMN,EAAKU,SAAUV,EAAKW,SAC5B,GACA,CAACL,EAAON,EAAKU,SAAUV,EAAKW,WAG1BQ,EACJJ,eACE,SAACC,GACCA,EAAEC,iBACEjB,EAAKa,UACPN,EAAaP,EAAKU,SAAUV,EAAKW,SAErC,GACA,CAACX,EAAKa,SAAUN,EAAcP,EAAKU,SAAUV,EAAKW,WAGhDS,EACJL,eAAY,SAACC,GACXA,EAAEC,iBACFD,EAAEE,iBACH,GAAE,IAEL,MAAO,CACLlB,KAAIA,EACJS,QAAOA,EACPL,UAASA,EACTU,mBAAkBA,EAClBK,wBAAuBA,EACvBC,mBAAkBA,EAEtB,kCArEE,IAAMC,EAAMC,SAAU,MAChBpB,EAAyBD,EAAcA,iBAArCS,EAAQR,EAAAQ,SAAEC,EAAQT,EAAAS,SACpBY,EAA4BpB,EAAeA,kBAAzCC,EAASmB,EAAAnB,UAAEC,EAAUkB,EAAAlB,WACvBmB,EAA8CC,EAAAA,UAAS,GAAtDC,EAAkBF,EAAA,GAAEG,EAAqBH,EAAA,GAE1Cf,EAAUJ,EAAWK,EAAUC,GAErCC,EAAAA,WAAU,iBACJH,GAAWL,IACA,QAAbF,EAAAmB,EAAIO,eAAS,IAAA1B,GAAAA,EAAAI,SAEfqB,GAAsB,EACvB,GAAE,CAAClB,EAASL,EAAWsB,IAExB,IAAMG,EAAoBd,EAAAA,aAAY,WACpCY,GAAsB,EACvB,GAAE,IAEH,MAAO,CAAEN,IAAGA,EAAEQ,kBAAiBA,EACjC,mBA5CM,SAAyCC,GACrC,IAAAC,EAAWC,4BACXC,EAASC,wBACXhC,EAA8BiC,EAAcA,iBAA1CC,EAAWlC,EAAAkC,YAAEC,EAAUnC,EAAAmC,WAEzBC,EAAeC,EAAOA,SAAC,WAAM,OAAAR,EAAOD,EAAMU,KAAK,GAAE,CAACT,EAAQD,EAAMU,OAEtE5B,EAAAA,WAAU,WACRwB,EAAYE,EAAaG,OAC3B,GAAG,CAACH,EAAaG,SAEjB,IAAMC,EAAaH,EAAAA,SAAQ,WAAM,OAAAN,EAAKK,KAAe,CAACA,EAAcL,IAE9DU,EAAWJ,EAAAA,SACf,WAAM,OAAAF,EAAWK,KACjB,CAACL,EAAYK,IAGf,MAAO,CACLE,KAAMd,EAAMc,KACZJ,KAAMG,EAEV"}
+{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { DataRecord, TPropsTable } from \"./type\";\nimport { usePageContext } from \"./pagenation/providers\";\nimport { useFilterContext } from \"./filter\";\nimport { useSortContext } from \"./sort\";\nimport { useFocusContext } from \"./edit/provider\";\nimport { useCellContext } from \"./sheet/providers\";\nimport { useCheckboxStatusContext } from \"./checkbox/provider\";\n\nexport function useTable<T extends DataRecord>(props: TPropsTable<T>) {\n  const { filter } = useFilterContext();\n  const { sort } = useSortContext();\n  const { setRowCount, pageFilter } = usePageContext();\n  const { dispatchCheckboxStatus } = useCheckboxStatusContext();\n\n  const filteredRows = useMemo(() => filter(props.rows), [filter, props.rows]);\n\n  useEffect(() => {\n    setRowCount(filteredRows.length);\n  }, [filteredRows.length]);\n\n  const checkBoxes = useMemo(() => {\n    if (!props.checkbox) {\n      return [];\n    }\n\n    return props.rows.filter((row) => props.checkbox?.checked(row));\n  }, [props.checkbox, props.rows]);\n\n  useEffect(() => {\n    dispatchCheckboxStatus({\n      type: \"SET\",\n      payload: { checkedRecords: checkBoxes },\n    });\n  }, [checkBoxes]);\n\n  const sortedRows = useMemo(() => sort(filteredRows), [filteredRows, sort]);\n\n  const pageRows = useMemo(\n    () => pageFilter(sortedRows),\n    [pageFilter, sortedRows]\n  );\n\n  return {\n    cols: props.cols,\n    rows: pageRows,\n  };\n}\n\nexport function useCellFocus<T extends HTMLElement>() {\n  const ref = useRef<T>(null);\n  const { rowIndex, colIndex } = useCellContext();\n  const { isEditing, checkFocus } = useFocusContext();\n  const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n  const isFocus = checkFocus(rowIndex, colIndex);\n\n  useEffect(() => {\n    if (isFocus && isEditing) {\n      ref.current?.focus();\n    }\n    setOccurredOnCellBlur(false);\n  }, [isFocus, isEditing, occurredOnCellBlur]);\n\n  const callbackAfterBlur = useCallback(() => {\n    setOccurredOnCellBlur(true);\n  }, []);\n\n  return { ref, callbackAfterBlur };\n}\n\nexport function useCell() {\n  const cell = useCellContext();\n  const { isEditing, checkFocus, focus, focusAndEdit, finishEditing } =\n    useFocusContext();\n\n  const isFocus = checkFocus(cell.rowIndex, cell.colIndex);\n\n  useEffect(() => {\n    if (!cell.editable && isFocus && isEditing) {\n      finishEditing();\n    }\n  }, [cell.editable, isFocus, isEditing, finishEditing]);\n\n  const onClickCellToFocus: React.MouseEventHandler<HTMLDivElement> =\n    useCallback(\n      (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        focus(cell.rowIndex, cell.colIndex);\n      },\n      [focus, cell.rowIndex, cell.colIndex]\n    );\n\n  const onDoubleClickCellToEdit: React.MouseEventHandler<HTMLDivElement> =\n    useCallback(\n      (e) => {\n        e.preventDefault();\n        if (cell.editable) {\n          focusAndEdit(cell.rowIndex, cell.colIndex);\n        }\n      },\n      [cell.editable, focusAndEdit, cell.rowIndex, cell.colIndex]\n    );\n\n  const preventPropagation: React.MouseEventHandler<HTMLDivElement> =\n    useCallback((e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    }, []);\n\n  return {\n    cell,\n    isFocus,\n    isEditing,\n    onClickCellToFocus,\n    onDoubleClickCellToEdit,\n    preventPropagation,\n  };\n}\n"],"names":["cell","useCellContext","_a","useFocusContext","isEditing","checkFocus","focus","focusAndEdit","finishEditing","isFocus","rowIndex","colIndex","useEffect","editable","onClickCellToFocus","useCallback","e","preventDefault","stopPropagation","onDoubleClickCellToEdit","preventPropagation","ref","useRef","_b","_c","useState","occurredOnCellBlur","setOccurredOnCellBlur","current","callbackAfterBlur","props","filter","useFilterContext","sort","useSortContext","usePageContext","setRowCount","pageFilter","dispatchCheckboxStatus","useCheckboxStatusContext","filteredRows","useMemo","rows","length","checkBoxes","checkbox","row","checked","type","payload","checkedRecords","sortedRows","pageRows","cols"],"mappings":"kXAwEE,IAAMA,EAAOC,EAAAA,iBACPC,EACJC,EAAAA,kBADMC,EAASF,EAAAE,UAAEC,EAAUH,EAAAG,WAAEC,UAAOC,iBAAcC,kBAG9CC,EAAUJ,EAAWL,EAAKU,SAAUV,EAAKW,UAE/CC,EAAAA,WAAU,YACHZ,EAAKa,UAAYJ,GAAWL,GAC/BI,GAEJ,GAAG,CAACR,EAAKa,SAAUJ,EAASL,EAAWI,IAEvC,IAAMM,EACJC,eACE,SAACC,GACCA,EAAEC,iBACFD,EAAEE,kBACFZ,EAAMN,EAAKU,SAAUV,EAAKW,SAC5B,GACA,CAACL,EAAON,EAAKU,SAAUV,EAAKW,WAG1BQ,EACJJ,eACE,SAACC,GACCA,EAAEC,iBACEjB,EAAKa,UACPN,EAAaP,EAAKU,SAAUV,EAAKW,SAErC,GACA,CAACX,EAAKa,SAAUN,EAAcP,EAAKU,SAAUV,EAAKW,WAGhDS,EACJL,eAAY,SAACC,GACXA,EAAEC,iBACFD,EAAEE,iBACH,GAAE,IAEL,MAAO,CACLlB,KAAIA,EACJS,QAAOA,EACPL,UAASA,EACTU,mBAAkBA,EAClBK,wBAAuBA,EACvBC,mBAAkBA,EAEtB,kCArEE,IAAMC,EAAMC,SAAU,MAChBpB,EAAyBD,EAAcA,iBAArCS,EAAQR,EAAAQ,SAAEC,EAAQT,EAAAS,SACpBY,EAA4BpB,EAAeA,kBAAzCC,EAASmB,EAAAnB,UAAEC,EAAUkB,EAAAlB,WACvBmB,EAA8CC,EAAAA,UAAS,GAAtDC,EAAkBF,EAAA,GAAEG,EAAqBH,EAAA,GAE1Cf,EAAUJ,EAAWK,EAAUC,GAErCC,EAAAA,WAAU,iBACJH,GAAWL,IACA,QAAbF,EAAAmB,EAAIO,eAAS,IAAA1B,GAAAA,EAAAI,SAEfqB,GAAsB,EACvB,GAAE,CAAClB,EAASL,EAAWsB,IAExB,IAAMG,EAAoBd,EAAAA,aAAY,WACpCY,GAAsB,EACvB,GAAE,IAEH,MAAO,CAAEN,IAAGA,EAAEQ,kBAAiBA,EACjC,mBA5DM,SAAyCC,GACrC,IAAAC,EAAWC,4BACXC,EAASC,wBACXhC,EAA8BiC,EAAcA,iBAA1CC,EAAWlC,EAAAkC,YAAEC,EAAUnC,EAAAmC,WACvBC,EAA2BC,oDAE7BC,EAAeC,EAAOA,SAAC,WAAM,OAAAV,EAAOD,EAAMY,KAAK,GAAE,CAACX,EAAQD,EAAMY,OAEtE9B,EAAAA,WAAU,WACRwB,EAAYI,EAAaG,OAC3B,GAAG,CAACH,EAAaG,SAEjB,IAAMC,EAAaH,EAAAA,SAAQ,WACzB,OAAKX,EAAMe,SAIJf,EAAMY,KAAKX,QAAO,SAACe,GAAG,IAAA5C,EAAK,eAAAA,EAAA4B,EAAMe,+BAAUE,QAAQD,EAAI,IAHrD,EAIV,GAAE,CAAChB,EAAMe,SAAUf,EAAMY,OAE1B9B,EAAAA,WAAU,WACR0B,EAAuB,CACrBU,KAAM,MACNC,QAAS,CAAEC,eAAgBN,IAE/B,GAAG,CAACA,IAEJ,IAAMO,EAAaV,EAAAA,SAAQ,WAAM,OAAAR,EAAKO,KAAe,CAACA,EAAcP,IAE9DmB,EAAWX,EAAAA,SACf,WAAM,OAAAJ,EAAWc,KACjB,CAACd,EAAYc,IAGf,MAAO,CACLE,KAAMvB,EAAMuB,KACZX,KAAMU,EAEV"}

package/dist/esm/src/table/base.js

@@ -1,3 +1,3 @@
 "use client";
-import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{useEffect as o}from"react";import{useTable as n}from"./hook.js";import{TableCell as l}from"./cell.js";import{TableHeaderElement as i}from"./header.js";import{PagenationProvider as a}from"./pagenation/providers.js";import{DisplayRange as c,Pagenation as d}from"./pagenation/components.js";import{FilterProvider as s,useFilterContext as m}from"./filter/provider.js";import{TableFilterRemoveButton as f,TableFilterForm as u}from"./filter/components.js";import"./sort/icon.js";import{SortProvider as p}from"./sort/provider.js";import{ColumnsProvider as h,RowProvider as v,CellProvider as y}from"./sheet/providers.js";import{FocusProvider as w,useFocusContext as g}from"./edit/provider.js";function k(t){var o;return r(s,{children:r(p,{initialCondition:null===(o=t.initialCondition)||void 0===o?void 0:o.sort,children:r(a,{rowCount:t.rows.length,children:r(h,{cols:t.cols,children:r(w,{columnCount:t.cols.length,children:r(b,e({},t))})})})})})}function b(e){var a=n(e),s=a.cols,p=a.rows,h=g(),w=h.isFocus,k=h.isEditing,b=h.edit,j=h.moveLeft,x=h.moveRight,N=h.moveUp,D=h.moveDown,C=h.unfocus,R=h.setMaxRowNumber,A=m().selectedFilterKey;return o((function(){var e=function(e){w&&!k&&("Enter"===e.key?(e.preventDefault(),D()):"Escape"===e.key?(e.preventDefault(),C()):"ArrowRight"===e.key?(e.preventDefault(),x()):"ArrowLeft"===e.key?(e.preventDefault(),j()):"ArrowUp"===e.key?(e.preventDefault(),N()):"ArrowDown"===e.key?(e.preventDefault(),D()):"F2"===e.key&&b())};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[k,w]),o((function(){R(p.length-1)}),[p.length]),t("div",{className:"w-full",children:[r("div",{className:"flex justify-end mb-1 mr-3",children:r(f,{children:r("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r("div",{id:"table-frame",className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:t("table",{className:"table table-auto w-full",children:[r("thead",{children:r("tr",{className:"sticky top-0 border-gray-200 z-20",children:s.map((function(e){return r(i,{columnKey:e.key},e.key)}))})}),t("tbody",{children:[!!A&&r("tr",{children:r("td",{colSpan:s.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl z-20 p-0 overflow-hidden",children:r(u,{})})}),0===p.length&&r("tr",{children:r("td",{colSpan:s.length,className:"py-5",children:r("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),p.map((function(t,o){return r(v,{row:t,children:r("tr",{className:"relative border border-gray-200 after:absolute after:w-full after:h-full after:top-0 after:left-0 after:pointer-events-none after:hover:bg-gray-500/10 ".concat(e.onClickRow?"hover:cursor-pointer":""," ").concat(e.applyRowFormatting?e.applyRowFormatting(t):""),onClick:function(r){r.preventDefault(),e.onClickRow&&e.onClickRow(t)},"data-testid":t.id,children:s.map((function(e,t){return r(y,{columnKey:e.key,rowIndex:o,colIndex:t,children:r(l,{})},e.key)}))})},t.id)}))]})]})}),t("div",{className:"mt-1",children:[r(c,{}),r("div",{className:"mt-2",children:r(d,{})})]})]})}export{k as default};
+import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{useEffect as o}from"react";import{useTable as n}from"./hook.js";import{TableCell as l}from"./cell.js";import{TableHeaderElement as i}from"./header.js";import{PagenationProvider as c}from"./pagenation/providers.js";import{DisplayRange as a,Pagenation as d}from"./pagenation/components.js";import{FilterProvider as s,useFilterContext as m}from"./filter/provider.js";import{TableFilterRemoveButton as f,TableFilterForm as h}from"./filter/components.js";import"./sort/icon.js";import{SortProvider as p}from"./sort/provider.js";import{ColumnsProvider as u,RowProvider as v,CellProvider as y}from"./sheet/providers.js";import{FocusProvider as w,useFocusContext as g}from"./edit/provider.js";import{CheckboxProvider as b,CheckboxStatusProvider as k}from"./checkbox/provider.js";import{AllCheckbox as x,Checkbox as j}from"./checkbox/components.js";function N(t){var o;return r(s,{children:r(p,{initialCondition:null===(o=t.initialCondition)||void 0===o?void 0:o.sort,children:r(c,{rowCount:t.rows.length,children:r(b,{checkbox:t.checkbox,children:r(k,{checkboxCount:t.rows.length,children:r(u,{cols:t.cols,children:r(w,{columnCount:t.cols.length,children:r(D,e({},t))})})})})})})})}function D(e){var c=n(e),s=c.cols,p=c.rows,u=g(),w=u.isFocus,b=u.isEditing,k=u.edit,N=u.moveLeft,D=u.moveRight,C=u.moveUp,R=u.moveDown,A=u.unfocus,E=u.setMaxRowNumber,F=m().selectedFilterKey;return o((function(){var e=function(e){w&&!b&&("Enter"===e.key?(e.preventDefault(),R()):"Escape"===e.key?(e.preventDefault(),A()):"ArrowRight"===e.key?(e.preventDefault(),D()):"ArrowLeft"===e.key?(e.preventDefault(),N()):"ArrowUp"===e.key?(e.preventDefault(),C()):"ArrowDown"===e.key?(e.preventDefault(),R()):"F2"===e.key&&k())};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[b,w]),o((function(){E(p.length-1)}),[p.length]),t("div",{className:"w-full",children:[r("div",{className:"flex justify-end mb-1 mr-3",children:r(f,{children:r("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r("div",{id:"table-frame",className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:t("table",{className:"table table-auto w-full",children:[r("thead",{children:t("tr",{className:"sticky top-0 border-gray-200 z-20",children:[e.checkbox&&r("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:r(x,{rows:e.rows})}),s.map((function(e){return r(i,{columnKey:e.key},e.key)}))]})}),t("tbody",{children:[!!F&&r("tr",{children:r("td",{colSpan:s.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl z-20 p-0 overflow-hidden",children:r(h,{})})}),0===p.length&&r("tr",{children:r("td",{colSpan:s.length,className:"py-5",children:r("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),p.map((function(o,n){return r(v,{row:o,children:t("tr",{className:"relative border border-gray-200 after:absolute after:w-full after:h-full after:top-0 after:left-0 after:pointer-events-none after:hover:bg-gray-500/10 ".concat(e.onClickRow?"hover:cursor-pointer":""," ").concat(e.applyRowFormatting?e.applyRowFormatting(o):""),onClick:function(r){r.preventDefault(),e.onClickRow&&e.onClickRow(o)},"data-testid":o.id,children:[r("td",{children:e.checkbox&&r(j,{})}),s.map((function(e,t){return r(y,{columnKey:e.key,rowIndex:n,colIndex:t,children:r(l,{})},e.key)}))]})},o.id)}))]})]})}),t("div",{className:"mt-1",children:[r(a,{}),r("div",{className:"mt-2",children:r(d,{})})]})]})}export{N as default};
 //# sourceMappingURL=base.js.map

package/dist/esm/src/table/checkbox/components.js

@@ -0,0 +1,3 @@
+"use client";
+import{jsx as e,Fragment as n}from"react/jsx-runtime";import{memo as t,useMemo as c,useRef as r,useEffect as o}from"react";import{useRowContext as i}from"../sheet/providers.js";import{useCheckboxContext as u,useCheckboxStatusContext as d}from"./provider.js";var a=t((function(){var t=u(),r=d().checkboxStatusState,o=i(),a=c((function(){return r.checkedRecords.map((function(e){return e.id}))}),[r.checkedRecords]);return t?e("div",{className:"flex justify-center gap-1 w-full items-center",children:e("input",{type:"checkbox",checked:a.includes(o.id),onChange:function(e){e.preventDefault(),e.target.checked?t.onChecked(o):t.onUnchecked(o)},onClick:function(e){e.preventDefault(),e.stopPropagation()}})}):e(n,{})})),f=t((function(t){var i=r(null),a=u(),f=d(),s=f.checkboxStatusState,h=f.existChecked,p=f.indeterminate,l=c((function(){return s.checkedRecords.map((function(e){return e.id}))}),[s.checkedRecords]),k=c((function(){return t.rows.filter((function(e){return!l.includes(e.id)}))}),[t.rows,l]);return o((function(){null!=i.current&&(i.current.indeterminate=!0===p)}),[p]),a?e("div",{className:"grid place-items-center w-full px-1",children:e("input",{ref:i,type:"checkbox",checked:h,onChange:function(e){e.preventDefault(),e.target.checked?k.forEach((function(e){a.onChecked(e)})):s.checkedRecords.forEach((function(e){a.onUnchecked(e)}))},onClick:function(e){e.preventDefault(),e.stopPropagation()}})}):e(n,{})}));export{f as AllCheckbox,a as Checkbox};
+//# sourceMappingURL=components.js.map

package/dist/esm/src/table/checkbox/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/src/table/checkbox/hooks.js

@@ -0,0 +1,2 @@
+import{useReducer as e}from"react";var c=function(e,c){if("SET"===c.type)return{checkedRecords:c.payload.checkedRecords}};function t(t){var d=e(c,{checkedRecords:[]}),r=d[0];return{checkboxStatusState:r,dispatchCheckboxStatus:d[1],allUnchecked:0===r.checkedRecords.length,existChecked:r.checkedRecords.length>0,indeterminate:r.checkedRecords.length>0&&r.checkedRecords.length<t}}export{t as useCheckboxStatusReducer};
+//# sourceMappingURL=hooks.js.map

package/dist/esm/src/table/checkbox/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["../../../../../src/table/checkbox/hooks.ts"],"sourcesContent":["import { useReducer } from \"react\";\nimport { CheckboxStatusReducer } from \"./types\";\nimport { DataRecord } from \"../type\";\n\nconst checkboxReducer: CheckboxStatusReducer<DataRecord> = (state, action) => {\n  switch (action.type) {\n    case \"SET\":\n      return { checkedRecords: action.payload.checkedRecords };\n  }\n};\n\nexport function useCheckboxStatusReducer(checkboxCount: number) {\n  const [checkboxStatusState, dispatchCheckboxStatus] = useReducer(\n    checkboxReducer,\n    { checkedRecords: [] }\n  );\n\n  return {\n    checkboxStatusState,\n    dispatchCheckboxStatus,\n    allUnchecked: checkboxStatusState.checkedRecords.length === 0,\n    existChecked: checkboxStatusState.checkedRecords.length > 0,\n    indeterminate:\n      checkboxStatusState.checkedRecords.length > 0 &&\n      checkboxStatusState.checkedRecords.length < checkboxCount,\n  };\n}\n"],"names":["checkboxReducer","state","action","type","checkedRecords","payload","useCheckboxStatusReducer","checkboxCount","_a","useReducer","checkboxStatusState","dispatchCheckboxStatus","allUnchecked","length","existChecked","indeterminate"],"mappings":"mCAIA,IAAMA,EAAqD,SAACC,EAAOC,GACjE,GACO,QADCA,EAAOC,KAEX,MAAO,CAAEC,eAAgBF,EAAOG,QAAQD,eAE9C,EAEM,SAAUE,EAAyBC,GACjC,IAAAC,EAAgDC,EACpDT,EACA,CAAEI,eAAgB,KAFbM,OAKP,MAAO,CACLA,oBAAmBA,EACnBC,4BACAC,aAA4D,IAA9CF,EAAoBN,eAAeS,OACjDC,aAAcJ,EAAoBN,eAAeS,OAAS,EAC1DE,cACEL,EAAoBN,eAAeS,OAAS,GAC5CH,EAAoBN,eAAeS,OAASN,EAElD"}

package/dist/esm/src/table/checkbox/provider.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{createContext as r,useContext as t}from"react";import{useCheckboxStatusReducer as c}from"./hooks.js";var n=r({checkboxStatusState:{checkedRecords:[]},dispatchCheckboxStatus:function(){},allUnchecked:!1,existChecked:!1,indeterminate:!1});function o(r){var t=r.children,o=r.checkboxCount;return e(n.Provider,{value:c(o),children:t})}function i(){return t(n)}var u=r(void 0);function a(r){var t=r.children,c=r.checkbox;return e(u.Provider,{value:c,children:t})}function d(){return t(u)}export{a as CheckboxProvider,o as CheckboxStatusProvider,d as useCheckboxContext,i as useCheckboxStatusContext};
+//# sourceMappingURL=provider.js.map

package/dist/esm/src/table/checkbox/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sources":["../../../../../src/table/checkbox/provider.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { TCheckboxProperty } from \"../type\";\nimport { useCheckboxStatusReducer } from \"./hooks\";\n\nconst CheckboxStatusContext = createContext<\n  ReturnType<typeof useCheckboxStatusReducer>\n>({\n  checkboxStatusState: {\n    checkedRecords: [],\n  },\n  dispatchCheckboxStatus: () => {},\n  allUnchecked: false,\n  existChecked: false,\n  indeterminate: false,\n});\n\nexport function CheckboxStatusProvider({\n  children,\n  checkboxCount,\n}: {\n  children: JSX.Element;\n  checkboxCount: number;\n}) {\n  return (\n    <CheckboxStatusContext.Provider\n      value={useCheckboxStatusReducer(checkboxCount)}\n    >\n      {children}\n    </CheckboxStatusContext.Provider>\n  );\n}\n\nexport function useCheckboxStatusContext() {\n  return useContext(CheckboxStatusContext);\n}\n\nconst CheckboxContext =\n  createContext<TCheckboxProperty<any>[\"checkbox\"]>(undefined);\n\nexport function CheckboxProvider({\n  children,\n  checkbox,\n}: {\n  children: React.ReactNode;\n  checkbox: TCheckboxProperty<any>[\"checkbox\"];\n}) {\n  return (\n    <CheckboxContext.Provider value={checkbox}>\n      {children}\n    </CheckboxContext.Provider>\n  );\n}\n\nexport function useCheckboxContext() {\n  return useContext(CheckboxContext);\n}\n"],"names":["CheckboxStatusContext","createContext","checkboxStatusState","checkedRecords","dispatchCheckboxStatus","allUnchecked","existChecked","indeterminate","CheckboxStatusProvider","_a","children","checkboxCount","_jsx","Provider","value","useCheckboxStatusReducer","useCheckboxStatusContext","useContext","CheckboxContext","undefined","CheckboxProvider","checkbox","useCheckboxContext"],"mappings":"oJAIA,IAAMA,EAAwBC,EAE5B,CACAC,oBAAqB,CACnBC,eAAgB,IAElBC,uBAAwB,WAAQ,EAChCC,cAAc,EACdC,cAAc,EACdC,eAAe,IAGX,SAAUC,EAAuBC,OACrCC,EAAQD,EAAAC,SACRC,EAAaF,EAAAE,cAKb,OACEC,EAACZ,EAAsBa,UACrBC,MAAOC,EAAyBJ,GAAcD,SAE7CA,GAGP,UAEgBM,IACd,OAAOC,EAAWjB,EACpB,CAEA,IAAMkB,EACJjB,OAAkDkB,GAE9C,SAAUC,EAAiBX,OAC/BC,EAAQD,EAAAC,SACRW,EAAQZ,EAAAY,SAKR,OACET,EAACM,EAAgBL,SAAQ,CAACC,MAAOO,EAAQX,SACtCA,GAGP,UAEgBY,IACd,OAAOL,EAAWC,EACpB"}

package/dist/esm/src/table/hook.js

@@ -1,2 +1,2 @@
-import{useMemo as o,useEffect as r,useCallback as t,useRef as n,useState as e}from"react";import{usePageContext as i}from"./pagenation/providers.js";import"react/jsx-runtime";import{useFilterContext as c}from"./filter/provider.js";import"./filter/constants.js";import{useCellContext as l}from"./sheet/providers.js";import"./sort/icon.js";import{useSortContext as s}from"./sort/provider.js";import{useFocusContext as u}from"./edit/provider.js";function f(t){var n=c().filter,e=s().sort,l=i(),u=l.setRowCount,f=l.pageFilter,d=o((function(){return n(t.rows)}),[n,t.rows]);r((function(){u(d.length)}),[d.length]);var a=o((function(){return e(d)}),[d,e]),p=o((function(){return f(a)}),[f,a]);return{cols:t.cols,rows:p}}function d(){var o=n(null),i=l(),c=i.rowIndex,s=i.colIndex,f=u(),d=f.isEditing,a=f.checkFocus,p=e(!1),v=p[0],m=p[1],x=a(c,s);r((function(){var r;x&&d&&(null===(r=o.current)||void 0===r||r.focus()),m(!1)}),[x,d,v]);var I=t((function(){m(!0)}),[]);return{ref:o,callbackAfterBlur:I}}function a(){var o=l(),n=u(),e=n.isEditing,i=n.checkFocus,c=n.focus,s=n.focusAndEdit,f=n.finishEditing,d=i(o.rowIndex,o.colIndex);r((function(){!o.editable&&d&&e&&f()}),[o.editable,d,e,f]);var a=t((function(r){r.preventDefault(),r.stopPropagation(),c(o.rowIndex,o.colIndex)}),[c,o.rowIndex,o.colIndex]),p=t((function(r){r.preventDefault(),o.editable&&s(o.rowIndex,o.colIndex)}),[o.editable,s,o.rowIndex,o.colIndex]),v=t((function(o){o.preventDefault(),o.stopPropagation()}),[]);return{cell:o,isFocus:d,isEditing:e,onClickCellToFocus:a,onDoubleClickCellToEdit:p,preventPropagation:v}}export{a as useCell,d as useCellFocus,f as useTable};
+import{useMemo as o,useEffect as r,useCallback as t,useRef as e,useState as n}from"react";import{usePageContext as i}from"./pagenation/providers.js";import"react/jsx-runtime";import{useFilterContext as c}from"./filter/provider.js";import"./filter/constants.js";import{useCellContext as u}from"./sheet/providers.js";import"./sort/icon.js";import{useSortContext as s}from"./sort/provider.js";import{useFocusContext as l}from"./edit/provider.js";import{useCheckboxStatusContext as d}from"./checkbox/provider.js";function f(t){var e=c().filter,n=s().sort,u=i(),l=u.setRowCount,f=u.pageFilter,a=d().dispatchCheckboxStatus,p=o((function(){return e(t.rows)}),[e,t.rows]);r((function(){l(p.length)}),[p.length]);var v=o((function(){return t.checkbox?t.rows.filter((function(o){var r;return null===(r=t.checkbox)||void 0===r?void 0:r.checked(o)})):[]}),[t.checkbox,t.rows]);r((function(){a({type:"SET",payload:{checkedRecords:v}})}),[v]);var x=o((function(){return n(p)}),[p,n]),m=o((function(){return f(x)}),[f,x]);return{cols:t.cols,rows:m}}function a(){var o=e(null),i=u(),c=i.rowIndex,s=i.colIndex,d=l(),f=d.isEditing,a=d.checkFocus,p=n(!1),v=p[0],x=p[1],m=a(c,s);r((function(){var r;m&&f&&(null===(r=o.current)||void 0===r||r.focus()),x(!1)}),[m,f,v]);var h=t((function(){x(!0)}),[]);return{ref:o,callbackAfterBlur:h}}function p(){var o=u(),e=l(),n=e.isEditing,i=e.checkFocus,c=e.focus,s=e.focusAndEdit,d=e.finishEditing,f=i(o.rowIndex,o.colIndex);r((function(){!o.editable&&f&&n&&d()}),[o.editable,f,n,d]);var a=t((function(r){r.preventDefault(),r.stopPropagation(),c(o.rowIndex,o.colIndex)}),[c,o.rowIndex,o.colIndex]),p=t((function(r){r.preventDefault(),o.editable&&s(o.rowIndex,o.colIndex)}),[o.editable,s,o.rowIndex,o.colIndex]),v=t((function(o){o.preventDefault(),o.stopPropagation()}),[]);return{cell:o,isFocus:f,isEditing:n,onClickCellToFocus:a,onDoubleClickCellToEdit:p,preventPropagation:v}}export{p as useCell,a as useCellFocus,f as useTable};
 //# sourceMappingURL=hook.js.map

package/dist/esm/src/table/hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { DataRecord, TPropsTable } from \"./type\";\nimport { usePageContext } from \"./pagenation/providers\";\nimport { useFilterContext } from \"./filter\";\nimport { useSortContext } from \"./sort\";\nimport { useFocusContext } from \"./edit/provider\";\nimport { useCellContext } from \"./sheet/providers\";\n\nexport function useTable<T extends DataRecord>(props: TPropsTable<T>) {\n  const { filter } = useFilterContext();\n  const { sort } = useSortContext();\n  const { setRowCount, pageFilter } = usePageContext();\n\n  const filteredRows = useMemo(() => filter(props.rows), [filter, props.rows]);\n\n  useEffect(() => {\n    setRowCount(filteredRows.length);\n  }, [filteredRows.length]);\n\n  const sortedRows = useMemo(() => sort(filteredRows), [filteredRows, sort]);\n\n  const pageRows = useMemo(\n    () => pageFilter(sortedRows),\n    [pageFilter, sortedRows]\n  );\n\n  return {\n    cols: props.cols,\n    rows: pageRows,\n  };\n}\n\nexport function useCellFocus<T extends HTMLElement>() {\n  const ref = useRef<T>(null);\n  const { rowIndex, colIndex } = useCellContext();\n  const { isEditing, checkFocus } = useFocusContext();\n  const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n  const isFocus = checkFocus(rowIndex, colIndex);\n\n  useEffect(() => {\n    if (isFocus && isEditing) {\n      ref.current?.focus();\n    }\n    setOccurredOnCellBlur(false);\n  }, [isFocus, isEditing, occurredOnCellBlur]);\n\n  const callbackAfterBlur = useCallback(() => {\n    setOccurredOnCellBlur(true);\n  }, []);\n\n  return { ref, callbackAfterBlur };\n}\n\nexport function useCell() {\n  const cell = useCellContext();\n  const { isEditing, checkFocus, focus, focusAndEdit, finishEditing } =\n    useFocusContext();\n\n  const isFocus = checkFocus(cell.rowIndex, cell.colIndex);\n\n  useEffect(() => {\n    if (!cell.editable && isFocus && isEditing) {\n      finishEditing();\n    }\n  }, [cell.editable, isFocus, isEditing, finishEditing]);\n\n  const onClickCellToFocus: React.MouseEventHandler<HTMLDivElement> =\n    useCallback(\n      (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        focus(cell.rowIndex, cell.colIndex);\n      },\n      [focus, cell.rowIndex, cell.colIndex]\n    );\n\n  const onDoubleClickCellToEdit: React.MouseEventHandler<HTMLDivElement> =\n    useCallback(\n      (e) => {\n        e.preventDefault();\n        if (cell.editable) {\n          focusAndEdit(cell.rowIndex, cell.colIndex);\n        }\n      },\n      [cell.editable, focusAndEdit, cell.rowIndex, cell.colIndex]\n    );\n\n  const preventPropagation: React.MouseEventHandler<HTMLDivElement> =\n    useCallback((e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    }, []);\n\n  return {\n    cell,\n    isFocus,\n    isEditing,\n    onClickCellToFocus,\n    onDoubleClickCellToEdit,\n    preventPropagation,\n  };\n}\n"],"names":["useTable","props","filter","useFilterContext","sort","useSortContext","_a","usePageContext","setRowCount","pageFilter","filteredRows","useMemo","rows","useEffect","length","sortedRows","pageRows","cols","useCellFocus","ref","useRef","useCellContext","rowIndex","colIndex","_b","useFocusContext","isEditing","checkFocus","_c","useState","occurredOnCellBlur","setOccurredOnCellBlur","isFocus","current","focus","callbackAfterBlur","useCallback","useCell","cell","focusAndEdit","finishEditing","editable","onClickCellToFocus","e","preventDefault","stopPropagation","onDoubleClickCellToEdit","preventPropagation"],"mappings":"2bAQM,SAAUA,EAA+BC,GACrC,IAAAC,EAAWC,WACXC,EAASC,SACXC,EAA8BC,IAA5BC,EAAWF,EAAAE,YAAEC,EAAUH,EAAAG,WAEzBC,EAAeC,GAAQ,WAAM,OAAAT,EAAOD,EAAMW,KAAK,GAAE,CAACV,EAAQD,EAAMW,OAEtEC,GAAU,WACRL,EAAYE,EAAaI,OAC3B,GAAG,CAACJ,EAAaI,SAEjB,IAAMC,EAAaJ,GAAQ,WAAM,OAAAP,EAAKM,KAAe,CAACA,EAAcN,IAE9DY,EAAWL,GACf,WAAM,OAAAF,EAAWM,KACjB,CAACN,EAAYM,IAGf,MAAO,CACLE,KAAMhB,EAAMgB,KACZL,KAAMI,EAEV,UAEgBE,IACd,IAAMC,EAAMC,EAAU,MAChBd,EAAyBe,IAAvBC,EAAQhB,EAAAgB,SAAEC,EAAQjB,EAAAiB,SACpBC,EAA4BC,IAA1BC,EAASF,EAAAE,UAAEC,EAAUH,EAAAG,WACvBC,EAA8CC,GAAS,GAAtDC,EAAkBF,EAAA,GAAEG,EAAqBH,EAAA,GAE1CI,EAAUL,EAAWL,EAAUC,GAErCV,GAAU,iBACJmB,GAAWN,IACA,QAAbpB,EAAAa,EAAIc,eAAS,IAAA3B,GAAAA,EAAA4B,SAEfH,GAAsB,EACvB,GAAE,CAACC,EAASN,EAAWI,IAExB,IAAMK,EAAoBC,GAAY,WACpCL,GAAsB,EACvB,GAAE,IAEH,MAAO,CAAEZ,IAAGA,EAAEgB,kBAAiBA,EACjC,UAEgBE,IACd,IAAMC,EAAOjB,IACPf,EACJmB,IADMC,EAASpB,EAAAoB,UAAEC,EAAUrB,EAAAqB,WAAEO,UAAOK,iBAAcC,kBAG9CR,EAAUL,EAAWW,EAAKhB,SAAUgB,EAAKf,UAE/CV,GAAU,YACHyB,EAAKG,UAAYT,GAAWN,GAC/Bc,GAEJ,GAAG,CAACF,EAAKG,SAAUT,EAASN,EAAWc,IAEvC,IAAME,EACJN,GACE,SAACO,GACCA,EAAEC,iBACFD,EAAEE,kBACFX,EAAMI,EAAKhB,SAAUgB,EAAKf,SAC5B,GACA,CAACW,EAAOI,EAAKhB,SAAUgB,EAAKf,WAG1BuB,EACJV,GACE,SAACO,GACCA,EAAEC,iBACEN,EAAKG,UACPF,EAAaD,EAAKhB,SAAUgB,EAAKf,SAErC,GACA,CAACe,EAAKG,SAAUF,EAAcD,EAAKhB,SAAUgB,EAAKf,WAGhDwB,EACJX,GAAY,SAACO,GACXA,EAAEC,iBACFD,EAAEE,iBACH,GAAE,IAEL,MAAO,CACLP,KAAIA,EACJN,QAAOA,EACPN,UAASA,EACTgB,mBAAkBA,EAClBI,wBAAuBA,EACvBC,mBAAkBA,EAEtB"}
+{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { DataRecord, TPropsTable } from \"./type\";\nimport { usePageContext } from \"./pagenation/providers\";\nimport { useFilterContext } from \"./filter\";\nimport { useSortContext } from \"./sort\";\nimport { useFocusContext } from \"./edit/provider\";\nimport { useCellContext } from \"./sheet/providers\";\nimport { useCheckboxStatusContext } from \"./checkbox/provider\";\n\nexport function useTable<T extends DataRecord>(props: TPropsTable<T>) {\n  const { filter } = useFilterContext();\n  const { sort } = useSortContext();\n  const { setRowCount, pageFilter } = usePageContext();\n  const { dispatchCheckboxStatus } = useCheckboxStatusContext();\n\n  const filteredRows = useMemo(() => filter(props.rows), [filter, props.rows]);\n\n  useEffect(() => {\n    setRowCount(filteredRows.length);\n  }, [filteredRows.length]);\n\n  const checkBoxes = useMemo(() => {\n    if (!props.checkbox) {\n      return [];\n    }\n\n    return props.rows.filter((row) => props.checkbox?.checked(row));\n  }, [props.checkbox, props.rows]);\n\n  useEffect(() => {\n    dispatchCheckboxStatus({\n      type: \"SET\",\n      payload: { checkedRecords: checkBoxes },\n    });\n  }, [checkBoxes]);\n\n  const sortedRows = useMemo(() => sort(filteredRows), [filteredRows, sort]);\n\n  const pageRows = useMemo(\n    () => pageFilter(sortedRows),\n    [pageFilter, sortedRows]\n  );\n\n  return {\n    cols: props.cols,\n    rows: pageRows,\n  };\n}\n\nexport function useCellFocus<T extends HTMLElement>() {\n  const ref = useRef<T>(null);\n  const { rowIndex, colIndex } = useCellContext();\n  const { isEditing, checkFocus } = useFocusContext();\n  const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n  const isFocus = checkFocus(rowIndex, colIndex);\n\n  useEffect(() => {\n    if (isFocus && isEditing) {\n      ref.current?.focus();\n    }\n    setOccurredOnCellBlur(false);\n  }, [isFocus, isEditing, occurredOnCellBlur]);\n\n  const callbackAfterBlur = useCallback(() => {\n    setOccurredOnCellBlur(true);\n  }, []);\n\n  return { ref, callbackAfterBlur };\n}\n\nexport function useCell() {\n  const cell = useCellContext();\n  const { isEditing, checkFocus, focus, focusAndEdit, finishEditing } =\n    useFocusContext();\n\n  const isFocus = checkFocus(cell.rowIndex, cell.colIndex);\n\n  useEffect(() => {\n    if (!cell.editable && isFocus && isEditing) {\n      finishEditing();\n    }\n  }, [cell.editable, isFocus, isEditing, finishEditing]);\n\n  const onClickCellToFocus: React.MouseEventHandler<HTMLDivElement> =\n    useCallback(\n      (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        focus(cell.rowIndex, cell.colIndex);\n      },\n      [focus, cell.rowIndex, cell.colIndex]\n    );\n\n  const onDoubleClickCellToEdit: React.MouseEventHandler<HTMLDivElement> =\n    useCallback(\n      (e) => {\n        e.preventDefault();\n        if (cell.editable) {\n          focusAndEdit(cell.rowIndex, cell.colIndex);\n        }\n      },\n      [cell.editable, focusAndEdit, cell.rowIndex, cell.colIndex]\n    );\n\n  const preventPropagation: React.MouseEventHandler<HTMLDivElement> =\n    useCallback((e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    }, []);\n\n  return {\n    cell,\n    isFocus,\n    isEditing,\n    onClickCellToFocus,\n    onDoubleClickCellToEdit,\n    preventPropagation,\n  };\n}\n"],"names":["useTable","props","filter","useFilterContext","sort","useSortContext","_a","usePageContext","setRowCount","pageFilter","dispatchCheckboxStatus","useCheckboxStatusContext","filteredRows","useMemo","rows","useEffect","length","checkBoxes","checkbox","row","checked","type","payload","checkedRecords","sortedRows","pageRows","cols","useCellFocus","ref","useRef","useCellContext","rowIndex","colIndex","_b","useFocusContext","isEditing","checkFocus","_c","useState","occurredOnCellBlur","setOccurredOnCellBlur","isFocus","current","focus","callbackAfterBlur","useCallback","useCell","cell","focusAndEdit","finishEditing","editable","onClickCellToFocus","e","preventDefault","stopPropagation","onDoubleClickCellToEdit","preventPropagation"],"mappings":"6fASM,SAAUA,EAA+BC,GACrC,IAAAC,EAAWC,WACXC,EAASC,SACXC,EAA8BC,IAA5BC,EAAWF,EAAAE,YAAEC,EAAUH,EAAAG,WACvBC,EAA2BC,2BAE7BC,EAAeC,GAAQ,WAAM,OAAAX,EAAOD,EAAMa,KAAK,GAAE,CAACZ,EAAQD,EAAMa,OAEtEC,GAAU,WACRP,EAAYI,EAAaI,OAC3B,GAAG,CAACJ,EAAaI,SAEjB,IAAMC,EAAaJ,GAAQ,WACzB,OAAKZ,EAAMiB,SAIJjB,EAAMa,KAAKZ,QAAO,SAACiB,GAAG,IAAAb,EAAK,eAAAA,EAAAL,EAAMiB,+BAAUE,QAAQD,EAAI,IAHrD,EAIV,GAAE,CAAClB,EAAMiB,SAAUjB,EAAMa,OAE1BC,GAAU,WACRL,EAAuB,CACrBW,KAAM,MACNC,QAAS,CAAEC,eAAgBN,IAE/B,GAAG,CAACA,IAEJ,IAAMO,EAAaX,GAAQ,WAAM,OAAAT,EAAKQ,KAAe,CAACA,EAAcR,IAE9DqB,EAAWZ,GACf,WAAM,OAAAJ,EAAWe,KACjB,CAACf,EAAYe,IAGf,MAAO,CACLE,KAAMzB,EAAMyB,KACZZ,KAAMW,EAEV,UAEgBE,IACd,IAAMC,EAAMC,EAAU,MAChBvB,EAAyBwB,IAAvBC,EAAQzB,EAAAyB,SAAEC,EAAQ1B,EAAA0B,SACpBC,EAA4BC,IAA1BC,EAASF,EAAAE,UAAEC,EAAUH,EAAAG,WACvBC,EAA8CC,GAAS,GAAtDC,EAAkBF,EAAA,GAAEG,EAAqBH,EAAA,GAE1CI,EAAUL,EAAWL,EAAUC,GAErCjB,GAAU,iBACJ0B,GAAWN,IACA,QAAb7B,EAAAsB,EAAIc,eAAS,IAAApC,GAAAA,EAAAqC,SAEfH,GAAsB,EACvB,GAAE,CAACC,EAASN,EAAWI,IAExB,IAAMK,EAAoBC,GAAY,WACpCL,GAAsB,EACvB,GAAE,IAEH,MAAO,CAAEZ,IAAGA,EAAEgB,kBAAiBA,EACjC,UAEgBE,IACd,IAAMC,EAAOjB,IACPxB,EACJ4B,IADMC,EAAS7B,EAAA6B,UAAEC,EAAU9B,EAAA8B,WAAEO,UAAOK,iBAAcC,kBAG9CR,EAAUL,EAAWW,EAAKhB,SAAUgB,EAAKf,UAE/CjB,GAAU,YACHgC,EAAKG,UAAYT,GAAWN,GAC/Bc,GAEJ,GAAG,CAACF,EAAKG,SAAUT,EAASN,EAAWc,IAEvC,IAAME,EACJN,GACE,SAACO,GACCA,EAAEC,iBACFD,EAAEE,kBACFX,EAAMI,EAAKhB,SAAUgB,EAAKf,SAC5B,GACA,CAACW,EAAOI,EAAKhB,SAAUgB,EAAKf,WAG1BuB,EACJV,GACE,SAACO,GACCA,EAAEC,iBACEN,EAAKG,UACPF,EAAaD,EAAKhB,SAAUgB,EAAKf,SAErC,GACA,CAACe,EAAKG,SAAUF,EAAcD,EAAKhB,SAAUgB,EAAKf,WAGhDwB,EACJX,GAAY,SAACO,GACXA,EAAEC,iBACFD,EAAEE,iBACH,GAAE,IAEL,MAAO,CACLP,KAAIA,EACJN,QAAOA,EACPN,UAASA,EACTgB,mBAAkBA,EAClBI,wBAAuBA,EACvBC,mBAAkBA,EAEtB"}

package/dist/index.d.ts

@@ -52,6 +52,13 @@ type TTableColumn<T extends DataRecord> = {
     disableSort?: boolean;
     disableFilter?: boolean;
 } & TCellEditingCondition<T>;
+type TCheckboxProperty<T extends DataRecord> = {
+    checkbox?: {
+        checked: (row: DataObject<T>) => boolean;
+        onChecked: (row: DataObject<T>) => void;
+        onUnchecked: (row: DataObject<T>) => void;
+    };
+};
 type TailwindCssStyle = string;
 type TPropsTable<T extends DataRecord> = {
     cols: TTableColumn<T>[];
@@ -64,7 +71,7 @@ type TPropsTable<T extends DataRecord> = {
         };
     };
     applyRowFormatting?: (row: DataObject<T>) => TailwindCssStyle;
-};
+} & TCheckboxProperty<T>;
 
 declare function Table<T extends DataRecord>(props: TPropsTable<T>): react_jsx_runtime.JSX.Element;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teppen/react-ui",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "React UI Component",
   "main": "dist/cjs/src/index.js",
   "module": "dist/esm/src/index.js",