@teppen/react-ui 0.7.6 → 1.1.0

package/README.md

@@ -1,4 +1,4 @@
-# React-UI (@teppen/)
+# React-UI
 
 This is a React component library that provides some useful UI elements for your web applications.
 
@@ -6,7 +6,7 @@ This is a React component library that provides some useful UI elements for your
 
 This library includes the following components:
 
-- Table: A simple Table. (0.1.0 ～)
+- Table: A simple Table. (1.0.0 ～) (※ Not compatible with 0.\*.\*)
 
 ## Installation
 
@@ -63,28 +63,28 @@ const App = () => {
             name: "Taro",
             age: 30,
             role: "",
-            button: <button>Click</button>,
+            button: "Click",
           },
           {
             id: 2,
             name: "Yoshiko",
             age: 60,
             role: "1",
-            button: <button>Click</button>,
+            button: "Click",
           },
           {
             id: 3,
             name: "Koki",
             age: 13,
             role: "2",
-            button: <button>Click</button>,
+            button: "Click",
           },
           {
             id: 4,
             name: "Chisato",
             age: 34,
             role: "2",
-            button: <button>Click</button>,
+            button: "Click",
           },
         ]}
         cols={[
@@ -120,8 +120,39 @@ const App = () => {
               completeEditing();
             },
           },
-          { key: "button", type: "component" },
+          {
+            key: "button",
+            label: "ボタン",
+            type: "string",
+            render: (value, row) => (
+              <button
+                className="px-2 py-1 text-white bg-blue-500 rounded-md"
+                onClick={(e) => {
+                  e.preventDefault();
+                  alert(`Clicked button: (id: ${row.id})`);
+                }}
+              >
+                {value}
+              </button>
+            ),
+          },
         ]}
+        initialCondition={{
+          sort: {
+            key: "id",
+            asc: true,
+          },
+        }}
+        onClickRow={(row) => {
+          alert(`Clicked row: (id: ${row.id})`);
+        }}
+        applyRowFormatting={(row) => {
+          if (row.role === "1") {
+            return "bg-red-600 text-white";
+          } else {
+            return "";
+          }
+        }}
       />
     </div>
   );
@@ -135,26 +166,27 @@ export default App;
 A component that displays a table based on the row and column information passed as arguments. The table component has the following features:
 
 - Pagination function
+- Sorting function
 - Filtering function (only when `label` is set in the column information)
-- Sorting 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)
 
 #### Arguments
 
-The table component only accepts the arguments `rows` and `cols`. Details for each argument are described below.
+The table component only accepts the arguments `rows`, `cols`, `initialCondition` and `onClickRow`. Details for each argument are described below.
 
 ##### rows
 
-`rows` is an array of the following associative array (`DataObject`). Only id is required and it must be unique within the array. If onClick is set, it is possible to define the behavior when a row is clicked.
+`rows` is an array of the following associative array (`DataObject`). Only id is required and it must be unique within the array.
 
 ```ts
 export type DataObject = {
-  [key: string]: any;
+  [key: string]: number | string;
   id: number | string;
-  onClick?: React.MouseEventHandler<HTMLTableRowElement>;
 };
 ```
 
+※ `onClick` property has been deprecated since version 1.0.0 in favor of the new Table argument `onClickRow`
+
 ##### cols
 
 In `cols`, you specify the data to be displayed in the table from left to right. The `key` here needs to match the key name in each element of rows. However, it is not necessary to always include the key `id`. `label` is optional, but it is required for some functions, so it is recommended to set it.
@@ -162,7 +194,7 @@ In `cols`, you specify the data to be displayed in the table from left to right.
 When the `type` set `component`, editing, filtering, and sorting functions are not available. However, it is possible to embed a React Component created by the user into a cell.
 
 ```ts
-export type TColumnType = "string" | "number" | "select" | "component";
+export type TColumnType = "string" | "number" | "select";
 
 export type TTableColumn = {
   key: string;
@@ -170,6 +202,7 @@ export type TTableColumn = {
   options: { value: string; label: string }[]; // Only When "type" is "select"
   label?: string;
   editable?: boolean;
+  render?: (value: string | number, row: DataObject) => React.ReactNode; // Only When "editable" is false
   allowEmpty?: boolean; // Only When "type" is "select"
   constraints?: {
     maxLength?: number; // Only when "type" is "string"
@@ -187,6 +220,37 @@ 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`.
+
+##### initialCondition
+
+In `initialCondition`, you can set initial values for each function. This is optional.
+
+```ts
+type TInitialCondition = {
+  sort?: { key: string; asc?: boolean };
+};
+```
+
+##### onClickRow
+
+In `onClickRow`, you may define the behavior when a row is clicked. This is optional.
+
+```ts
+type TOnClickRow = (row: DataObject) => void;
+```
+
+##### applyRowFormatting
+
+In `applyRowFormatting`, depending on the status of each row, you can define the format of the row using TailwindCSS classes. In principle, TailwindCSS classes other than background and text color are not guaranteed to work, but any class can be specified.
+
+```ts
+/**
+ * The return value is a string of one TailwindCSS class or multiple TailwindCSS classes separated by spaces.
+ */
+type TApplyRowFormatting = (row: DataObject) => string;
+```
+
 ## 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"),s=require("./pagenation/providers.js"),i=require("./pagenation/components.js"),a=require("./filter/provider.js"),d=require("./filter/components.js"),c=require("./sort/components.js"),u=require("./sort/provider.js"),v=require("./sheet/providers.js"),x=require("./edit/provider.js");function j(e){var s=n.useTable(e),u=s.cols,j=s.rows,m=x.useFocusContext(),h=m.isFocus,p=m.isEditing,f=m.edit,y=m.moveLeft,g=m.moveRight,b=m.moveUp,k=m.moveDown,w=m.unfocus,N=m.setMaxRowNumber,C=a.useFilterContext(),q=C.selectedFilterKey,F=C.setSelectedFilterKey;return t.useState(!1)[0],t.useEffect((function(){var e=function(e){h&&!p&&("Enter"===e.key?(e.preventDefault(),k()):"Escape"===e.key?(e.preventDefault(),w()):"ArrowRight"===e.key?(e.preventDefault(),g()):"ArrowLeft"===e.key?(e.preventDefault(),y()):"ArrowUp"===e.key?(e.preventDefault(),b()):"ArrowDown"===e.key?(e.preventDefault(),k()):"F2"===e.key?f():console.log(e.key))};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[p,h]),t.useEffect((function(){N(j.length-1)}),[j.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",{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:u.map((function(e){return r.jsx(l.TableHeaderElement,{label:e.label,sortConponent:"component"!==e.type?r.jsx(c.SortButton,{keyName:e.key}):void 0,filterComponent:"component"!==e.type?r.jsx(d.TableFilter,{keyName:e.key,onClick:function(r){r.preventDefault(),F(e.key)}}):void 0},e.key)}))})}),r.jsxs("tbody",{children:[!!q&&r.jsx("tr",{children:r.jsx("td",{colSpan:u.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===j.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:u.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),j.map((function(e,t){var n;return r.jsx(v.RowProvider,{row:e,children:r.jsx("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(n=j[0])||void 0===n?void 0:n.onClick)?"hover:cursor-pointer":""),onClick:e.onClick,"data-testid":e.id,children:u.map((function(e,n){return r.jsx(v.CellProvider,{columnKey:e.key,rowIndex:t,colIndex:n,children:r.jsx(o.TableCell,{})},e.key)}))})},e.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 n;return r.jsx(a.FilterProvider,{children:r.jsx(u.SortProvider,{initialCondition:null===(n=t.initialCondition)||void 0===n?void 0:n.sort,children:r.jsx(s.PagenationProvider,{rowCount:t.rows.length,children:r.jsx(v.ColumnsProvider,{cols:t.cols,children:r.jsx(x.FocusProvider,{columnCount:t.cols.length,children:r.jsx(j,e.__assign({},t))})})})})})};
+"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"),v=require("./edit/provider.js");function f(e){var i=n.useTable(e),c=i.cols,f=i.rows,h=v.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(f.length-1)}),[f.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",{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===f.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"})})}),f.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(v.FocusProvider,{columnCount:t.cols.length,children:r.jsx(f,e.__assign({},t))})})})})})};
 //# sourceMappingURL=base.js.map

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

@@ -1,3 +1,3 @@
 "use client";
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./edit-icon.js"),l=require("./cancel-icon.js"),o=require("./sheet/providers.js"),r=require("./edit/provider.js"),u=require("./hook.js"),i=t.forwardRef((function(t,n){return e.jsxs("div",{className:"flex justify-between gap-1 w-full items-center",children:[e.jsx("input",{ref:n,className:"w-full py-1 px-2",type:"text",value:t.value,onChange:t.onChange,onBlur:t.onBlur,onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(t.reset(),t.endEditing())}}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),t.reset(),t.endEditing()},children:e.jsx(l.CancelIcon,{size:16})})]})}));function a(){var n=o.useCellContext(),l=o.useColumnContext(n.columnKey),a=o.useRowContext(),s=r.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,v=c.callbackAfterBlur,d=t.useState(a[n.columnKey]),p=d[0],x=d[1];if(!l.editable||"string"!==l.type)throw new Error("Invalid condition");return e.jsx(i,{ref:f,value:p,onChange:function(e){e.preventDefault(),x(e.target.value)},onBlur:function(e){e.preventDefault(),p!==a[n.columnKey]?!function(){var e,t,n;return(null===(e=l.constraints)||void 0===e?void 0:e.maxLength)&&p.length>l.constraints.maxLength?(alert("最大文字数(".concat(l.constraints.maxLength,")を超過しています。(現在").concat(p.length,"文字)")),!1):(null===(t=l.constraints)||void 0===t?void 0:t.minLength)&&p.length<l.constraints.minLength?(alert("最小文字数(".concat(l.constraints.minLength,")を下回っています。(現在").concat(p.length,"文字)")),!1):!((null===(n=l.constraints)||void 0===n?void 0:n.pattern)&&!new RegExp(l.constraints.pattern).test(p)&&(alert("パターンに一致しません。(パターン".concat(l.constraints.pattern,")")),1))}()?setTimeout((function(){e.target.focus()}),100):(l.onCellBlur(n.columnKey,p,a,s),v()):s()},reset:function(){return x(a[n.columnKey])},endEditing:s})}function s(){var n=o.useCellContext(),l=o.useColumnContext(n.columnKey),a=o.useRowContext(),s=r.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,v=c.callbackAfterBlur,d=t.useState(n.value.toString()),p=d[0],x=d[1];if(!l.editable||"number"!==l.type)throw new Error("Invalid condition");return e.jsx(i,{ref:f,value:p,onChange:function(e){e.preventDefault(),""!==e.target.value?"-"!==e.target.value&&"0-"!==e.target.value?e.target.value.match(/^-?[0-9]+\.$/)?x(e.target.value):isNaN(Number(e.target.value))||x(Number(e.target.value).toString()):x("-0"):x("0")},onBlur:function(e){e.preventDefault(),Number(p)!==n.value?!function(){var e,t,n=parseInt(p);return(null===(e=l.constraints)||void 0===e?void 0:e.max)&&n>l.constraints.max?(alert("最大値(".concat(l.constraints.max,")を超過しています。(入力値:").concat(n,")")),!1):!((null===(t=l.constraints)||void 0===t?void 0:t.min)&&n<l.constraints.min&&(alert("最小値(".concat(l.constraints.min,")を下回っています。(入力値:").concat(n,")")),1))}()?setTimeout((function(){e.target.focus()}),100):(l.onCellBlur(n.columnKey,Number(p),a,s),v()):s()},reset:function(){return x(n.value.toString())},endEditing:s})}function c(){var n=o.useCellContext(),i=o.useColumnContext(n.columnKey),a=o.useRowContext(),s=r.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,v=c.callbackAfterBlur,d=t.useState(n.value),p=d[0],x=d[1];if(!i.editable||"select"!==i.type)throw new Error("Invalid condition");return e.jsxs("div",{className:"flex justify-between gap-1 w-full items-center",children:[e.jsxs("select",{ref:f,className:"w-full py-1 px-2",value:p,onChange:function(e){e.preventDefault(),x(e.target.value)},onBlur:function(e){e.preventDefault(),p!==n.value?(i.onCellBlur(n.columnKey,p,a,s),v()):s()},onKeyDown:function(e){"Enter"===e.key&&e.preventDefault()},onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(x(n.value),s())},children:[i.allowEmpty&&e.jsx("option",{value:"",children:""==n.value?"-- 未選択 --":"-- 選択解除 --"},"TEPPEN/ReactUI Empty Option"),i.options.map((function(t){return e.jsx("option",{value:t.value,children:t.label},t.value)}))]}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),x(n.value),s()},children:e.jsx(l.CancelIcon,{size:16})})]})}var f=t.memo((function(){var t=o.useCellContext(),l=r.useFocusContext().focusAndEdit;return e.jsx("button",{className:"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200",onClick:function(e){e.preventDefault(),l(t.rowIndex,t.colIndex)},children:e.jsx(n.EditIcon,{size:12})})}));exports.TableCell=function(){var t=u.useCell(),n=t.cell,l=t.isFocus,o=t.isEditing,r=t.onClickCellToFocus,i=t.onDoubleClickCellToEdit,v=t.preventPropagation;return e.jsx("td",{className:"".concat(l?"outline outline-1 -outline-offset-1 outline-gray-400":""),children:e.jsxs("div",{className:"relative",children:[e.jsxs("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default ".concat(l&&o?"opacity-0":""),onClick:r,children:["component"===n.type?n.label:e.jsx("div",{onDoubleClick:i,children:e.jsx("p",{className:"text-left",children:n.label})}),n.editable&&e.jsx(f,{})]}),n.editable&&l&&o&&e.jsxs("div",{className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:v,children:["string"===n.type&&e.jsx(a,{}),"number"===n.type&&e.jsx(s,{}),"select"===n.type&&e.jsx(c,{})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./edit-icon.js"),l=require("./cancel-icon.js"),r=require("./sheet/providers.js"),o=require("./edit/provider.js"),u=require("./hook.js"),i=t.forwardRef((function(t,n){return e.jsxs("div",{className:"flex justify-between gap-1 w-full items-center",children:[e.jsx("input",{ref:n,className:"w-full py-1 px-2 bg-white text-gray-900",type:"text",value:t.value,onChange:t.onChange,onBlur:t.onBlur,onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(t.reset(),t.endEditing())}}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),t.reset(),t.endEditing()},children:e.jsx(l.CancelIcon,{size:16})})]})}));function a(){var n=r.useCellContext(),l=r.useColumnContext(n.columnKey),a=r.useRowContext(),s=o.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,v=c.callbackAfterBlur,d=t.useState(a[n.columnKey]),x=d[0],g=d[1];if(!l.editable||"string"!==l.type)throw new Error("Invalid condition");return e.jsx(i,{ref:f,value:x,onChange:function(e){e.preventDefault(),g(e.target.value)},onBlur:function(e){e.preventDefault(),x!==a[n.columnKey]?!function(){var e,t,n;return(null===(e=l.constraints)||void 0===e?void 0:e.maxLength)&&x.length>l.constraints.maxLength?(alert("最大文字数(".concat(l.constraints.maxLength,")を超過しています。(現在").concat(x.length,"文字)")),!1):(null===(t=l.constraints)||void 0===t?void 0:t.minLength)&&x.length<l.constraints.minLength?(alert("最小文字数(".concat(l.constraints.minLength,")を下回っています。(現在").concat(x.length,"文字)")),!1):!((null===(n=l.constraints)||void 0===n?void 0:n.pattern)&&!new RegExp(l.constraints.pattern).test(x)&&(alert("パターンに一致しません。(パターン".concat(l.constraints.pattern,")")),1))}()?setTimeout((function(){e.target.focus()}),100):(l.onCellBlur(n.columnKey,x,a,s),v()):s()},reset:function(){return g(a[n.columnKey].toString())},endEditing:s})}function s(){var n=r.useCellContext(),l=r.useColumnContext(n.columnKey),a=r.useRowContext(),s=o.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,v=c.callbackAfterBlur,d=t.useState(n.value.toString()),x=d[0],g=d[1];if(!l.editable||"number"!==l.type)throw new Error("Invalid condition");return e.jsx(i,{ref:f,value:x,onChange:function(e){e.preventDefault(),""!==e.target.value?"-"!==e.target.value&&"0-"!==e.target.value?e.target.value.match(/^-?[0-9]+\.$/)?g(e.target.value):isNaN(Number(e.target.value))||g(Number(e.target.value).toString()):g("-0"):g("0")},onBlur:function(e){e.preventDefault(),Number(x)!==n.value?!function(){var e,t,n=parseInt(x);return(null===(e=l.constraints)||void 0===e?void 0:e.max)&&n>l.constraints.max?(alert("最大値(".concat(l.constraints.max,")を超過しています。(入力値:").concat(n,")")),!1):!((null===(t=l.constraints)||void 0===t?void 0:t.min)&&n<l.constraints.min&&(alert("最小値(".concat(l.constraints.min,")を下回っています。(入力値:").concat(n,")")),1))}()?setTimeout((function(){e.target.focus()}),100):(l.onCellBlur(n.columnKey,Number(x),a,s),v()):s()},reset:function(){return g(n.value.toString())},endEditing:s})}function c(){var n=r.useCellContext(),i=r.useColumnContext(n.columnKey),a=r.useRowContext(),s=o.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,v=c.callbackAfterBlur,d=t.useState(n.value),x=d[0],g=d[1];if(!i.editable||"select"!==i.type)throw new Error("Invalid condition");return e.jsxs("div",{className:"flex justify-between gap-1 w-full items-center",children:[e.jsxs("select",{ref:f,className:"w-full py-1 px-2 bg-white text-gray-900",value:x,onChange:function(e){e.preventDefault(),g(e.target.value)},onBlur:function(e){e.preventDefault(),x!==n.value?(i.onCellBlur(n.columnKey,x,a,s),v()):s()},onKeyDown:function(e){"Enter"===e.key&&e.preventDefault()},onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(g(n.value),s())},children:[i.allowEmpty&&e.jsx("option",{value:"",children:""==n.value?"-- 未選択 --":"-- 選択解除 --"},"TEPPEN/ReactUI Empty Option"),i.options.map((function(t){return e.jsx("option",{value:t.value,children:t.label},t.value)}))]}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),g(n.value),s()},children:e.jsx(l.CancelIcon,{size:16})})]})}var f=t.memo((function(){var t=r.useCellContext(),l=o.useFocusContext().focusAndEdit;return e.jsx("button",{className:"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200",onClick:function(e){e.preventDefault(),l(t.rowIndex,t.colIndex)},children:e.jsx(n.EditIcon,{size:12})})}));exports.TableCell=function(){var t=u.useCell(),n=t.cell,l=t.isFocus,o=t.isEditing,i=t.onClickCellToFocus,v=t.onDoubleClickCellToEdit,d=t.preventPropagation,x=r.useRowContext();return e.jsx("td",{className:"".concat(l?"outline outline-1 -outline-offset-1 outline-gray-400":""),children:e.jsxs("div",{className:"relative",children:[e.jsxs("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default ".concat(l&&o?"opacity-0":""),onClick:i,children:[n.render?n.render(n.value,x):e.jsx("div",{onDoubleClick:v,children:e.jsx("p",{className:"text-left",children:n.label})}),n.editable&&e.jsx(f,{})]}),n.editable&&l&&o&&e.jsxs("div",{className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:d,children:["string"===n.type&&e.jsx(a,{}),"number"===n.type&&e.jsx(s,{}),"select"===n.type&&e.jsx(c,{})]})]})})};
 //# sourceMappingURL=cell.js.map

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

@@ -1,3 +1,3 @@
 "use client";
-"use strict";var e=require("react/jsx-runtime"),t=require("./filter-icon.js"),l=require("./provider.js"),n=require("react"),r=require("../cancel-icon.js"),i=require("./constants.js"),a=require("../sheet/providers.js");function s(t){var n=t.children,r=l.useFilterContext(),i=r.removeFilter,a=r.filterConditions,s=r.selectedFilterKey;if(0!==a.filter((function(e){return e.key===s})).length){return e.jsx("button",{onClick:function(e){e.preventDefault(),a.filter((function(e){return e.key===s})).forEach((function(e){i(e.id)}))},children:n})}}function o(t){var n=t.value,r=t.onChange,s=l.useFilterContext().selectedFilterKey,o=a.useColumnContext(s);return e.jsxs("select",{value:n,onChange:r,className:"px-2 py-1 rounded-md",children:[e.jsx("option",{value:"",children:s?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===o.type&&i.STRING_FILTER_OPERATOR.map((function(t){return e.jsx("option",{value:t.key,children:t.label},t.key)})),"number"===o.type&&i.NUMBER_FILTER_OPERATOR.map((function(t){return e.jsx("option",{value:t.key,children:t.label},t.key)})),"select"===o.type&&i.SELECT_FILTER_OPERATOR.map((function(t){return e.jsx("option",{value:t.key,children:t.label},t.key)}))]})}function u(t){return e.jsxs("select",{className:"w-full px-2 py-1 rounded-md min-w-32",value:t.value,onChange:function(e){e.preventDefault(),t.setValue(e.target.value)},children:[e.jsx("option",{value:"",children:"-- 未選択 --"}),t.options.map((function(t){return e.jsx("option",{value:t.value,children:t.label},t.value)}))]})}function c(t){return e.jsx("input",{className:"w-full px-2 py-1 rounded-md min-w-32",type:"text",value:t.value,onChange:function(e){e.preventDefault(),t.setValue(e.target.value)},placeholder:"-- 値を入力 --"})}function d(t){var n=l.useFilterContext(),r=n.selectedFilterKey,i=n.addFilter,s=a.useColumnContext(r);return e.jsx("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md text-nowrap",onClick:function(e){var l;e.preventDefault(),r&&t.selectingOperator&&("select"===s.type||t.value)?i("string"===s.type?{key:r,operator:t.selectingOperator,value:[t.value]}:"select"===s.type?{key:r,operator:t.selectingOperator,value:t.value,label:null===(l=s.options.find((function(e){return e.value===t.value})))||void 0===l?void 0:l.label}:{key:r,operator:t.selectingOperator,value:Number(t.value)}):alert("全ての項目を入力してください")},children:"追加"})}exports.TableFilter=function(n){var r=l.useFilterContext().filterConditions;return e.jsx("div",{className:"relative cursor-pointer",onClick:n.onClick,children:e.jsx(t.FIlterIcon,{isFilterActive:r.filter((function(e){return e.key===n.keyName})).length>0})})},exports.TableFilterForm=function(){var t=a.useColumnsContext(),x=l.useFilterContext(),f=x.removeFilter,p=x.filterConditions,v=x.selectedFilterKey,m=x.setSelectedFilterKey,h=n.useState(""),y=h[0],j=h[1],g=n.useState(""),b=g[0],C=g[1],k=a.useColumnContext(v);n.useEffect((function(){C(""),j("")}),[v]);var F=n.useCallback((function(e){e.preventDefault,j(e.target.value)}),[]);return e.jsxs("div",{className:"flex w-full max-h-[50vh] bg-gray-200",children:[e.jsx("ul",{className:"flex flex-col items-end min-w-16 md:w-[20%] max-h-full overflow-y-auto no_scrollbar bg-white",children:t.filter((function(e){return!!e.label&&"component"!==e.type})).map((function(t){return e.jsxs("li",{className:"relative pl-2 pr-8 md:px-8 py-3 w-full cursor-pointer border-y border-gray-300 ".concat(v===t.key?"bg-gray-200":"hover:bg-gray-100"),onClick:function(e){e.preventDefault(),m(t.key)},children:[e.jsx("p",{className:"text-right text-nowrap",children:t.label}),p.filter((function(e){return e.key===t.key})).length>0&&e.jsx("div",{className:"absolute top-1/2 right-1",children:e.jsx("div",{className:"-translate-y-1/2 rounded-full border border-gray-400 bg-gray-100 aspect-square w-5",children:e.jsx("p",{className:"text-xs text-center",children:p.filter((function(e){return e.key===t.key})).length})})})]},t.key)}))}),e.jsxs("div",{className:"relative flex flex-col gap-4 ml-4 mr-4 md:ml-16 md:mr-auto py-5",children:[e.jsx("div",{className:"absolute top-5 right-0",children:e.jsx("button",{onClick:function(e){e.preventDefault(),m(null)},children:"閉じる"})}),e.jsx("p",{className:"font-bold text-xl",children:"フィルタリング条件"}),e.jsxs("div",{className:"flex items-center gap-3 max-w-6xl",children:[e.jsxs("p",{className:"text-gray-600 text-lg text-nowrap",children:["「",e.jsx("strong",{children:k.label}),"」 は"]}),e.jsx(o,{value:y,onChange:F}),"select"===k.type?e.jsx(u,{value:b,options:k.options,setValue:C}):e.jsx(c,{value:b,setValue:C}),e.jsx(d,{value:b,selectingOperator:y})]}),e.jsx("ul",{className:"flex flex-col gap-1 my-5 max-h-32 overflow-auto",children:p.filter((function(e){return e.key===v})).map((function(l){var n,a;return e.jsxs("li",{className:"flex justify-between mr-5",children:[e.jsxs("p",{children:["「",e.jsx("strong",{children:null===(n=t.find((function(e){return e.key===l.key})))||void 0===n?void 0:n.label}),"」 は",e.jsx("span",{children:null===(a=i.FILTER_OPERATOR.find((function(e){return e.key===l.operator})))||void 0===a?void 0:a.label}),"：",e.jsx("span",{children:l.label?l.label:l.value})]}),e.jsx("button",{onClick:function(e){e.preventDefault(),f(l.id)},children:e.jsx(r.CancelIcon,{size:16})})]},l.id)}))}),e.jsx("div",{className:"flex justify-center",children:e.jsx(s,{children:e.jsxs("p",{className:"text-xs text-gray-600 underline hover:text-gray-800",children:["「",k.label,"」のフィルタを全て解除"]})})})]})]})},exports.TableFilterRemoveButton=function(t){var n=t.children,r=l.useFilterContext(),i=r.clearFilter;if(0!==r.filterConditions.length)return e.jsx("button",{onClick:function(e){e.preventDefault(),i()},children:n})},exports.TableSpecifyKeyFilterRemoveButton=s;
+"use strict";var e=require("react/jsx-runtime"),t=require("./filter-icon.js"),l=require("./provider.js"),n=require("react"),r=require("../cancel-icon.js"),i=require("./constants.js"),a=require("../sheet/providers.js");function s(t){var n=t.children,r=l.useFilterContext(),i=r.removeFilter,a=r.filterConditions,s=r.selectedFilterKey;if(0!==a.filter((function(e){return e.key===s})).length){return e.jsx("button",{onClick:function(e){e.preventDefault(),a.filter((function(e){return e.key===s})).forEach((function(e){i(e.id)}))},children:n})}}function o(t){var n=t.value,r=t.onChange,s=l.useFilterContext().selectedFilterKey,o=a.useColumnContext(s);return e.jsxs("select",{value:n,onChange:r,className:"px-2 py-1 rounded-md",children:[e.jsx("option",{value:"",children:s?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===o.type&&i.STRING_FILTER_OPERATOR.map((function(t){return e.jsx("option",{value:t.key,children:t.label},t.key)})),"number"===o.type&&i.NUMBER_FILTER_OPERATOR.map((function(t){return e.jsx("option",{value:t.key,children:t.label},t.key)})),"select"===o.type&&i.SELECT_FILTER_OPERATOR.map((function(t){return e.jsx("option",{value:t.key,children:t.label},t.key)}))]})}function u(t){return e.jsxs("select",{className:"w-full px-2 py-1 rounded-md min-w-32",value:t.value,onChange:function(e){e.preventDefault(),t.setValue(e.target.value)},children:[e.jsx("option",{value:"",children:"-- 未選択 --"}),t.options.map((function(t){return e.jsx("option",{value:t.value,children:t.label},t.value)}))]})}function c(t){return e.jsx("input",{className:"w-full px-2 py-1 rounded-md min-w-32",type:"text",value:t.value,onChange:function(e){e.preventDefault(),t.setValue(e.target.value)},placeholder:"-- 値を入力 --"})}function d(t){var n=l.useFilterContext(),r=n.selectedFilterKey,i=n.addFilter,s=a.useColumnContext(r);return e.jsx("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md text-nowrap",onClick:function(e){var l;e.preventDefault(),r&&t.selectingOperator&&("select"===s.type||t.value)?i("string"===s.type?{key:r,operator:t.selectingOperator,value:[t.value]}:"select"===s.type?{key:r,operator:t.selectingOperator,value:t.value,label:null===(l=s.options.find((function(e){return e.value===t.value})))||void 0===l?void 0:l.label}:{key:r,operator:t.selectingOperator,value:Number(t.value)}):alert("全ての項目を入力してください")},children:"追加"})}exports.TableFilter=function(n){var r=a.useColumnContext(n.columnKey),i=l.useFilterContext(),s=i.filterConditions,o=i.setSelectedFilterKey;return r.label?e.jsx("div",{className:"relative cursor-pointer",onClick:function(e){e.preventDefault(),o(n.columnKey)},children:e.jsx(t.FIlterIcon,{isFilterActive:s.filter((function(e){return e.key===n.columnKey})).length>0})}):e.jsx(e.Fragment,{})},exports.TableFilterForm=function(){var t=a.useColumnsContext(),x=l.useFilterContext(),f=x.removeFilter,p=x.filterConditions,v=x.selectedFilterKey,m=x.setSelectedFilterKey,y=n.useState(""),h=y[0],j=y[1],g=n.useState(""),b=g[0],C=g[1],k=a.useColumnContext(v);n.useEffect((function(){C(""),j("")}),[v]);var F=n.useCallback((function(e){e.preventDefault,j(e.target.value)}),[]);return e.jsxs("div",{className:"flex w-full max-h-[50vh] bg-gray-200",children:[e.jsx("ul",{className:"flex flex-col items-end min-w-16 md:w-[20%] max-h-full overflow-y-auto no_scrollbar bg-white",children:t.filter((function(e){return!!e.label})).map((function(t){return e.jsxs("li",{className:"relative pl-2 pr-8 md:px-8 py-3 w-full cursor-pointer border-y border-gray-300 ".concat(v===t.key?"bg-gray-200":"hover:bg-gray-100"),onClick:function(e){e.preventDefault(),m(t.key)},children:[e.jsx("p",{className:"text-right text-nowrap",children:t.label}),p.filter((function(e){return e.key===t.key})).length>0&&e.jsx("div",{className:"absolute top-1/2 right-1",children:e.jsx("div",{className:"-translate-y-1/2 rounded-full border border-gray-400 bg-gray-100 aspect-square w-5",children:e.jsx("p",{className:"text-xs text-center",children:p.filter((function(e){return e.key===t.key})).length})})})]},t.key)}))}),e.jsxs("div",{className:"relative flex flex-col gap-4 ml-4 mr-4 md:ml-16 md:mr-auto py-5",children:[e.jsx("div",{className:"absolute top-5 right-0",children:e.jsx("button",{onClick:function(e){e.preventDefault(),m(null)},children:"閉じる"})}),e.jsx("p",{className:"font-bold text-xl",children:"フィルタリング条件"}),e.jsxs("div",{className:"flex items-center gap-3 max-w-6xl",children:[e.jsxs("p",{className:"text-gray-600 text-lg text-nowrap",children:["「",e.jsx("strong",{children:k.label}),"」 は"]}),e.jsx(o,{value:h,onChange:F}),"select"===k.type?e.jsx(u,{value:b,options:k.options,setValue:C}):e.jsx(c,{value:b,setValue:C}),e.jsx(d,{value:b,selectingOperator:h})]}),e.jsx("ul",{className:"flex flex-col gap-1 my-5 max-h-32 overflow-auto",children:p.filter((function(e){return e.key===v})).map((function(l){var n,a;return e.jsxs("li",{className:"flex justify-between mr-5",children:[e.jsxs("p",{children:["「",e.jsx("strong",{children:null===(n=t.find((function(e){return e.key===l.key})))||void 0===n?void 0:n.label}),"」 は",e.jsx("span",{children:null===(a=i.FILTER_OPERATOR.find((function(e){return e.key===l.operator})))||void 0===a?void 0:a.label}),"：",e.jsx("span",{children:l.label?l.label:l.value})]}),e.jsx("button",{onClick:function(e){e.preventDefault(),f(l.id)},children:e.jsx(r.CancelIcon,{size:16})})]},l.id)}))}),e.jsx("div",{className:"flex justify-center",children:e.jsx(s,{children:e.jsxs("p",{className:"text-xs text-gray-600 underline hover:text-gray-800",children:["「",k.label,"」のフィルタを全て解除"]})})})]})]})},exports.TableFilterRemoveButton=function(t){var n=t.children,r=l.useFilterContext(),i=r.clearFilter;if(0!==r.filterConditions.length)return e.jsx("button",{onClick:function(e){e.preventDefault(),i()},children:n})},exports.TableSpecifyKeyFilterRemoveButton=s;
 //# sourceMappingURL=components.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../../../src/table/filter/hooks.ts"],"sourcesContent":["import { useCallback, useReducer } from \"react\";\nimport { TFilter, TFilterReducer, TReturnUseFilterReducer } from \"./types\";\nimport { DataObject } from \"../type\";\n\nconst reducer: TFilterReducer = (state, action) => {\n  switch (action.type) {\n    case \"add\":\n      return {\n        filters: [\n          ...state.filters,\n          { id: new Date().getTime(), ...action.payload.filter },\n        ],\n      };\n    case \"remove\":\n      return {\n        filters: state.filters.filter((f) => f.id !== action.payload.id),\n      };\n    case \"clear\":\n      return { filters: [] };\n  }\n};\n\nexport function useFilterReducer(): TReturnUseFilterReducer {\n  const [state, dispatch] = useReducer(reducer, { filters: [] });\n\n  const addFilter = useCallback(\n    (filter: TFilter) => dispatch({ type: \"add\", payload: { filter } }),\n    [dispatch]\n  );\n  const removeFilter = useCallback(\n    (id: number) => dispatch({ type: \"remove\", payload: { id } }),\n    [dispatch]\n  );\n  const clearFilter = useCallback(\n    () => dispatch({ type: \"clear\" }),\n    [dispatch]\n  );\n\n  const filter = useCallback(\n    (rows: DataObject[]): DataObject[] => {\n      return state.filters.reduce((acc, filter) => {\n        switch (filter.operator) {\n          case \"includeText\":\n            return acc.filter((row) => {\n              const value = row[filter.key];\n              if (typeof value === \"string\") {\n                return filter.value.some((v) => value.includes(v));\n              }\n              return false;\n            });\n          case \"eq\":\n            return acc.filter((row) => row[filter.key] === filter.value);\n          case \"ne\":\n            return acc.filter((row) => row[filter.key] !== filter.value);\n          case \"gt\":\n            return acc.filter((row) => row[filter.key] > filter.value);\n          case \"lt\":\n            return acc.filter((row) => row[filter.key] < filter.value);\n          case \"gte\":\n            return acc.filter((row) => row[filter.key] >= filter.value);\n          case \"lte\":\n            return acc.filter((row) => row[filter.key] <= filter.value);\n          case \"selected\":\n            return acc.filter((row) => row[filter.key] === filter.value);\n          case \"notSelected\":\n            return acc.filter((row) => row[filter.key] !== filter.value);\n        }\n      }, rows);\n    },\n    [state]\n  );\n\n  return {\n    addFilter,\n    removeFilter,\n    clearFilter,\n    filter,\n    filterConditions: state.filters,\n  };\n}\n"],"names":["reducer","state","action","type","filters","__spreadArray","__assign","id","Date","getTime","payload","filter","f","_a","useReducer","dispatch","addFilter","useCallback","removeFilter","clearFilter","rows","reduce","acc","operator","row","value","key","some","v","includes","filterConditions"],"mappings":"0FAIMA,EAA0B,SAACC,EAAOC,GACtC,OAAQA,EAAOC,MACb,IAAK,MACH,MAAO,CACLC,QAAOC,EAAAA,cAAAA,gBAAA,GACFJ,EAAMG,SAAO,GAAA,CACdE,WAAA,CAAAC,IAAI,IAAIC,MAAOC,WAAcP,EAAOQ,QAAQC,UAC/C,IAEL,IAAK,SACH,MAAO,CACLP,QAASH,EAAMG,QAAQO,QAAO,SAACC,GAAM,OAAAA,EAAEL,KAAOL,EAAOQ,QAAQH,EAAxB,KAEzC,IAAK,QACH,MAAO,CAAEH,QAAS,IAExB,sCAGQ,IAAAS,EAAoBC,EAAUA,WAACd,EAAS,CAAEI,QAAS,KAAlDH,OAAOc,OAiDd,MAAO,CACLC,UAhDgBC,EAAAA,aAChB,SAACN,GAAoB,OAAAI,EAAS,CAAEZ,KAAM,MAAOO,QAAS,CAAEC,OAAMA,OAC9D,CAACI,IA+CDG,aA7CmBD,EAAAA,aACnB,SAACV,GAAe,OAAAQ,EAAS,CAAEZ,KAAM,SAAUO,QAAS,CAAEH,GAAEA,OACxD,CAACQ,IA4CDI,YA1CkBF,EAAAA,aAClB,WAAM,OAAAF,EAAS,CAAEZ,KAAM,SAAjB,GACN,CAACY,IAyCDJ,OAtCaM,eACb,SAACG,GACC,OAAOnB,EAAMG,QAAQiB,QAAO,SAACC,EAAKX,GAChC,OAAQA,EAAOY,UACb,IAAK,cACH,OAAOD,EAAIX,QAAO,SAACa,GACjB,IAAMC,EAAQD,EAAIb,EAAOe,KACzB,MAAqB,iBAAVD,GACFd,EAAOc,MAAME,MAAK,SAACC,GAAM,OAAAH,EAAMI,SAASD,EAAE,GAGrD,IACF,IAAK,KAYL,IAAK,WACH,OAAON,EAAIX,QAAO,SAACa,GAAQ,OAAAA,EAAIb,EAAOe,OAASf,EAAOc,KAAK,IAX7D,IAAK,KAYL,IAAK,cACH,OAAOH,EAAIX,QAAO,SAACa,GAAQ,OAAAA,EAAIb,EAAOe,OAASf,EAAOc,KAAK,IAX7D,IAAK,KACH,OAAOH,EAAIX,QAAO,SAACa,GAAQ,OAAAA,EAAIb,EAAOe,KAAOf,EAAOc,KAAK,IAC3D,IAAK,KACH,OAAOH,EAAIX,QAAO,SAACa,GAAQ,OAAAA,EAAIb,EAAOe,KAAOf,EAAOc,KAAK,IAC3D,IAAK,MACH,OAAOH,EAAIX,QAAO,SAACa,GAAQ,OAAAA,EAAIb,EAAOe,MAAQf,EAAOc,KAAK,IAC5D,IAAK,MACH,OAAOH,EAAIX,QAAO,SAACa,GAAQ,OAAAA,EAAIb,EAAOe,MAAQf,EAAOc,KAAK,IAM/D,GAAEL,EACL,GACA,CAACnB,IAQD6B,iBAAkB7B,EAAMG,QAE5B"}
+{"version":3,"file":"hooks.js","sources":["../../../../../src/table/filter/hooks.ts"],"sourcesContent":["import { useCallback, useReducer } from \"react\";\nimport { TFilter, TFilterReducer, TReturnUseFilterReducer } from \"./types\";\nimport { DataObject } from \"../type\";\n\nconst reducer: TFilterReducer = (state, action) => {\n  switch (action.type) {\n    case \"add\":\n      return {\n        filters: [\n          ...state.filters,\n          { id: new Date().getTime(), ...action.payload.filter },\n        ],\n      };\n    case \"remove\":\n      return {\n        filters: state.filters.filter((f) => f.id !== action.payload.id),\n      };\n    case \"clear\":\n      return { filters: [] };\n  }\n};\n\nexport function useFilterReducer(): TReturnUseFilterReducer {\n  const [state, dispatch] = useReducer(reducer, { filters: [] });\n\n  const addFilter = useCallback(\n    (filter: TFilter) => dispatch({ type: \"add\", payload: { filter } }),\n    [dispatch]\n  );\n  const removeFilter = useCallback(\n    (id: number) => dispatch({ type: \"remove\", payload: { id } }),\n    [dispatch]\n  );\n  const clearFilter = useCallback(\n    () => dispatch({ type: \"clear\" }),\n    [dispatch]\n  );\n\n  const filter = useCallback(\n    (rows: DataObject[]): DataObject[] => {\n      return state.filters.reduce((acc, filter) => {\n        switch (filter.operator) {\n          case \"includeText\":\n            return acc.filter((row) => {\n              const value = row[filter.key];\n              if (typeof value === \"string\") {\n                return filter.value.some((v) => value.includes(v));\n              }\n              return false;\n            });\n          case \"eq\":\n            return acc.filter((row) => row[filter.key] === filter.value);\n          case \"ne\":\n            return acc.filter((row) => row[filter.key] !== filter.value);\n          case \"gt\":\n            return acc.filter(\n              (row) => (row[filter.key] as number) > filter.value\n            );\n          case \"lt\":\n            return acc.filter(\n              (row) => (row[filter.key] as number) < filter.value\n            );\n          case \"gte\":\n            return acc.filter(\n              (row) => (row[filter.key] as number) >= filter.value\n            );\n          case \"lte\":\n            return acc.filter(\n              (row) => (row[filter.key] as number) <= filter.value\n            );\n          case \"selected\":\n            return acc.filter((row) => row[filter.key] === filter.value);\n          case \"notSelected\":\n            return acc.filter((row) => row[filter.key] !== filter.value);\n        }\n      }, rows);\n    },\n    [state]\n  );\n\n  return {\n    addFilter,\n    removeFilter,\n    clearFilter,\n    filter,\n    filterConditions: state.filters,\n  };\n}\n"],"names":["reducer","state","action","type","filters","__spreadArray","__assign","id","Date","getTime","payload","filter","f","_a","useReducer","dispatch","addFilter","useCallback","removeFilter","clearFilter","rows","reduce","acc","operator","row","value","key","some","v","includes","filterConditions"],"mappings":"0FAIMA,EAA0B,SAACC,EAAOC,GACtC,OAAQA,EAAOC,MACb,IAAK,MACH,MAAO,CACLC,QAAOC,EAAAA,cAAAA,gBAAA,GACFJ,EAAMG,SAAO,GAAA,CACdE,WAAA,CAAAC,IAAI,IAAIC,MAAOC,WAAcP,EAAOQ,QAAQC,UAC/C,IAEL,IAAK,SACH,MAAO,CACLP,QAASH,EAAMG,QAAQO,QAAO,SAACC,GAAM,OAAAA,EAAEL,KAAOL,EAAOQ,QAAQH,EAAxB,KAEzC,IAAK,QACH,MAAO,CAAEH,QAAS,IAExB,sCAGQ,IAAAS,EAAoBC,EAAUA,WAACd,EAAS,CAAEI,QAAS,KAAlDH,OAAOc,OAyDd,MAAO,CACLC,UAxDgBC,EAAAA,aAChB,SAACN,GAAoB,OAAAI,EAAS,CAAEZ,KAAM,MAAOO,QAAS,CAAEC,OAAMA,OAC9D,CAACI,IAuDDG,aArDmBD,EAAAA,aACnB,SAACV,GAAe,OAAAQ,EAAS,CAAEZ,KAAM,SAAUO,QAAS,CAAEH,GAAEA,OACxD,CAACQ,IAoDDI,YAlDkBF,EAAAA,aAClB,WAAM,OAAAF,EAAS,CAAEZ,KAAM,SAAjB,GACN,CAACY,IAiDDJ,OA9CaM,eACb,SAACG,GACC,OAAOnB,EAAMG,QAAQiB,QAAO,SAACC,EAAKX,GAChC,OAAQA,EAAOY,UACb,IAAK,cACH,OAAOD,EAAIX,QAAO,SAACa,GACjB,IAAMC,EAAQD,EAAIb,EAAOe,KACzB,MAAqB,iBAAVD,GACFd,EAAOc,MAAME,MAAK,SAACC,GAAM,OAAAH,EAAMI,SAASD,EAAE,GAGrD,IACF,IAAK,KAoBL,IAAK,WACH,OAAON,EAAIX,QAAO,SAACa,GAAQ,OAAAA,EAAIb,EAAOe,OAASf,EAAOc,KAAK,IAnB7D,IAAK,KAoBL,IAAK,cACH,OAAOH,EAAIX,QAAO,SAACa,GAAQ,OAAAA,EAAIb,EAAOe,OAASf,EAAOc,KAAK,IAnB7D,IAAK,KACH,OAAOH,EAAIX,QACT,SAACa,GAAQ,OAACA,EAAIb,EAAOe,KAAkBf,EAAOc,KAAK,IAEvD,IAAK,KACH,OAAOH,EAAIX,QACT,SAACa,GAAQ,OAACA,EAAIb,EAAOe,KAAkBf,EAAOc,KAAK,IAEvD,IAAK,MACH,OAAOH,EAAIX,QACT,SAACa,GAAQ,OAACA,EAAIb,EAAOe,MAAmBf,EAAOc,KAAK,IAExD,IAAK,MACH,OAAOH,EAAIX,QACT,SAACa,GAAQ,OAACA,EAAIb,EAAOe,MAAmBf,EAAOc,KAAK,IAO3D,GAAEL,EACL,GACA,CAACnB,IAQD6B,iBAAkB7B,EAAMG,QAE5B"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");exports.TableHeaderElement=function(t){return e.jsxs("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[t.label&&e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis ".concat(t.filterComponent&&t.sortConponent?"w-[80%] min-w-20":t.filterComponent||t.sortConponent?"w-[90%] min-w-20":"min-w-10"," "),children:t.label})}),t.label&&e.jsxs("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[t.filterComponent&&t.filterComponent,t.sortConponent&&t.sortConponent]})]})};
+"use strict";var e=require("react/jsx-runtime");require("./filter/provider.js");var r=require("./filter/components.js"),t=require("./sheet/providers.js"),s=require("./sort/components.js");require("./sort/provider.js"),exports.TableHeaderElement=function(l){var i=t.useColumnContext(l.columnKey);return e.jsxs("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[i.label&&e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20",children:i.label})}),e.jsxs("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[e.jsx(s.SortButton,{columnKey:l.columnKey}),e.jsx(r.TableFilter,{columnKey:l.columnKey})]})]})};
 //# sourceMappingURL=header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n  label?: string;\n  sortConponent?: JSX.Element;\n  filterComponent?: JSX.Element;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n  return (\n    <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n      {props.label && (\n        <div className=\"px-2\">\n          <p\n            className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis ${\n              props.filterComponent && props.sortConponent\n                ? \"w-[80%] min-w-20\"\n                : !props.filterComponent && !props.sortConponent\n                ? \"min-w-10\"\n                : \"w-[90%] min-w-20\"\n            } `}\n          >\n            {props.label}\n          </p>\n        </div>\n      )}\n\n      {props.label && (\n        <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n          {props.filterComponent && props.filterComponent}\n          {props.sortConponent && props.sortConponent}\n        </div>\n      )}\n    </th>\n  );\n}\n"],"names":["props","_jsxs","className","children","label","_jsx","jsx","concat","filterComponent","sortConponent"],"mappings":"2EAMM,SAA6BA,GACjC,OACEC,OAAI,KAAA,CAAAC,UAAW,8CACZC,SAAA,CAAAH,EAAMI,OACLC,EAAKC,IAAA,MAAA,CAAAJ,UAAU,OAAMC,SACnBE,MACE,IAAA,CAAAH,UAAW,iEAAAK,OACTP,EAAMQ,iBAAmBR,EAAMS,cAC3B,mBACCT,EAAMQ,iBAAoBR,EAAMS,cAEjC,mBADA,WACkB,cAGvBT,EAAMI,UAKZJ,EAAMI,OACLH,EAAAA,KAAA,MAAA,CAAKC,UAAU,oEACZC,SAAA,CAAAH,EAAMQ,iBAAmBR,EAAMQ,gBAC/BR,EAAMS,eAAiBT,EAAMS,mBAKxC"}
+{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["import { TableFilter } from \"./filter\";\nimport { useColumnContext } from \"./sheet\";\nimport { SortButton } from \"./sort\";\n\ntype TPropsTableHeader = {\n  columnKey: string;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n  const col = useColumnContext(props.columnKey);\n\n  return (\n    <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n      {col.label && (\n        <div className=\"px-2\">\n          <p\n            className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20`}\n          >\n            {col.label}\n          </p>\n        </div>\n      )}\n\n      <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n        <SortButton columnKey={props.columnKey} />\n        <TableFilter columnKey={props.columnKey} />\n      </div>\n    </th>\n  );\n}\n"],"names":["props","col","useColumnContext","columnKey","_jsxs","jsxs","className","label","_jsx","children","jsx","SortButton","TableFilter"],"mappings":"qPAQM,SAA6BA,GACjC,IAAMC,EAAMC,EAAAA,iBAAiBF,EAAMG,WAEnC,OACEC,EAAIC,KAAA,KAAA,CAAAC,UAAW,wDACZL,EAAIM,OACHC,EAAAA,IAAA,MAAA,CAAKF,UAAU,OACbG,SAAAD,EAAAE,IAAA,IAAA,CACEJ,UAAW,iFAAgFG,SAE1FR,EAAIM,UAKXH,OAAK,MAAA,CAAAE,UAAU,oEACbG,SAAA,CAAAD,MAACG,EAAAA,WAAU,CAACR,UAAWH,EAAMG,YAC7BK,EAACE,IAAAE,cAAY,CAAAT,UAAWH,EAAMG,iBAItC"}

package/dist/cjs/src/table/sheet/providers.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=t.createContext({id:""});function o(){return t.useContext(n)}var l=t.createContext({cols:[],colMaps:{}});function u(e){return t.useContext(l).colMaps[e]}var s=t.createContext({columnKey:"",value:"",label:"",type:"string",rowIndex:0,colIndex:0});exports.CellProvider=function(e){var t,n,l=e.children,i=e.columnKey,c=e.rowIndex,d=e.colIndex,x=u(i),a=o()[i];return r.jsx(s.Provider,{value:{columnKey:i,value:a,label:"select"===x.type?null===(n=null===(t=x.options)||void 0===t?void 0:t.find((function(e){return e.value===a})))||void 0===n?void 0:n.label:a,editable:x.editable,type:x.type,rowIndex:c,colIndex:d},children:l})},exports.ColumnsProvider=function(t){var n=t.children,o=t.cols,u=o.reduce((function(r,t){var n=t.key,o=e.__rest(t,["key"]);return r[n]=o,r}),{});return r.jsx(l.Provider,{value:{cols:o,colMaps:u},children:n})},exports.RowProvider=function(e){var t=e.children,o=e.row;return r.jsx(n.Provider,{value:o,children:t})},exports.useCellContext=function(){return t.useContext(s)},exports.useColumnContext=u,exports.useColumnsContext=function(){return t.useContext(l).cols},exports.useRowContext=o;
+"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react"),n=t.createContext({id:""});function o(){return t.useContext(n)}var l=t.createContext({cols:[],colMaps:{}});function u(e){return t.useContext(l).colMaps[e]}var i=t.createContext({columnKey:"",value:"",label:"",type:"string",rowIndex:0,colIndex:0});exports.CellProvider=function(e){var t,n,l=e.children,s=e.columnKey,c=e.rowIndex,d=e.colIndex,x=u(s),a=o()[s];return r.jsx(i.Provider,{value:{columnKey:s,value:a,label:"select"===x.type?null===(n=null===(t=x.options)||void 0===t?void 0:t.find((function(e){return e.value===a})))||void 0===n?void 0:n.label:a,editable:x.editable,render:x.editable?void 0:x.render,type:x.type,rowIndex:c,colIndex:d},children:l})},exports.ColumnsProvider=function(t){var n=t.children,o=t.cols,u=o.reduce((function(r,t){var n=t.key,o=e.__rest(t,["key"]);return r[n]=o,r}),{});return r.jsx(l.Provider,{value:{cols:o,colMaps:u},children:n})},exports.RowProvider=function(e){var t=e.children,o=e.row;return r.jsx(n.Provider,{value:o,children:t})},exports.useCellContext=function(){return t.useContext(i)},exports.useColumnContext=u,exports.useColumnsContext=function(){return t.useContext(l).cols},exports.useRowContext=o;
 //# sourceMappingURL=providers.js.map

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

@@ -1,3 +1,3 @@
 "use client";
-"use strict";var e=require("react/jsx-runtime"),r=require("./icon.js"),t=require("./provider.js");exports.SortButton=function(n){var o=t.useSortContext(),i=o.key,s=o.asc,c=o.changeKey,u=o.changeOrder,a=i===n.keyName;return e.jsx("div",{onClick:function(e){e.preventDefault(),a?u():c(n.keyName)},className:"cursor-pointer",children:e.jsx(r.SortIcon,{sortOrder:a?s?"ASC":"DESC":"ASC",isSortActive:a})})};
+"use strict";var r=require("react/jsx-runtime"),e=require("./icon.js"),t=require("./provider.js");exports.SortButton=function(n){var o=t.useSortContext(),c=o.key,i=o.asc,s=o.changeKey,u=o.changeOrder,a=c===n.columnKey;return r.jsx("div",{onClick:function(r){r.preventDefault(),a?u():s(n.columnKey)},className:"cursor-pointer",children:r.jsx(e.SortIcon,{sortOrder:a?i?"ASC":"DESC":"ASC",isSortActive:a})})};
 //# sourceMappingURL=components.js.map

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 o}from"react/jsx-runtime";import{useState as t,useEffect as n}from"react";import{useTable as l}from"./hook.js";import{TableCell as i}from"./cell.js";import{TableHeaderElement as d}from"./header.js";import{PagenationProvider as c}from"./pagenation/providers.js";import{DisplayRange as a,Pagenation as s}from"./pagenation/components.js";import{FilterProvider as m,useFilterContext as p}from"./filter/provider.js";import{TableFilterRemoveButton as u,TableFilter as f,TableFilterForm as h}from"./filter/components.js";import{SortButton as v}from"./sort/components.js";import{SortProvider as y}from"./sort/provider.js";import{ColumnsProvider as k,RowProvider as g,CellProvider as w}from"./sheet/providers.js";import{FocusProvider as b,useFocusContext as N}from"./edit/provider.js";function j(o){var t;return r(m,{children:r(y,{initialCondition:null===(t=o.initialCondition)||void 0===t?void 0:t.sort,children:r(c,{rowCount:o.rows.length,children:r(k,{cols:o.cols,children:r(b,{columnCount:o.cols.length,children:r(x,e({},o))})})})})})}function x(e){var c=l(e),m=c.cols,y=c.rows,k=N(),b=k.isFocus,j=k.isEditing,x=k.edit,C=k.moveLeft,D=k.moveRight,A=k.moveUp,E=k.moveDown,F=k.unfocus,L=k.setMaxRowNumber,K=p(),R=K.selectedFilterKey,S=K.setSelectedFilterKey;return t(!1)[0],n((function(){var e=function(e){b&&!j&&("Enter"===e.key?(e.preventDefault(),E()):"Escape"===e.key?(e.preventDefault(),F()):"ArrowRight"===e.key?(e.preventDefault(),D()):"ArrowLeft"===e.key?(e.preventDefault(),C()):"ArrowUp"===e.key?(e.preventDefault(),A()):"ArrowDown"===e.key?(e.preventDefault(),E()):"F2"===e.key?x():console.log(e.key))};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[j,b]),n((function(){L(y.length-1)}),[y.length]),o("div",{className:"w-full",children:[r("div",{className:"flex justify-end mb-1 mr-3",children:r(u,{children:r("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r("div",{className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:o("table",{className:"table table-auto w-full",children:[r("thead",{children:r("tr",{className:"sticky top-0 border-gray-200 z-20",children:m.map((function(e){return r(d,{label:e.label,sortConponent:"component"!==e.type?r(v,{keyName:e.key}):void 0,filterComponent:"component"!==e.type?r(f,{keyName:e.key,onClick:function(r){r.preventDefault(),S(e.key)}}):void 0},e.key)}))})}),o("tbody",{children:[!!R&&r("tr",{children:r("td",{colSpan:m.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===y.length&&r("tr",{children:r("td",{colSpan:m.length,className:"py-5",children:r("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),y.map((function(e,o){var t;return r(g,{row:e,children:r("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(t=y[0])||void 0===t?void 0:t.onClick)?"hover:cursor-pointer":""),onClick:e.onClick,"data-testid":e.id,children:m.map((function(e,t){return r(w,{columnKey:e.key,rowIndex:o,colIndex:t,children:r(i,{})},e.key)}))})},e.id)}))]})]})}),o("div",{className:"mt-1",children:[r(a,{}),r("div",{className:"mt-2",children:r(s,{})})]})]})}export{j 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 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",{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};
 //# sourceMappingURL=base.js.map

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

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as n,memo as r,useState as l}from"react";import{EditIcon as o}from"./edit-icon.js";import{CancelIcon as i}from"./cancel-icon.js";import{useCellContext as a,useColumnContext as u,useRowContext as c}from"./sheet/providers.js";import{useFocusContext as s}from"./edit/provider.js";import{useCell as f,useCellFocus as v}from"./hook.js";var d=n((function(n,r){return e("div",{className:"flex justify-between gap-1 w-full items-center",children:[t("input",{ref:r,className:"w-full py-1 px-2",type:"text",value:n.value,onChange:n.onChange,onBlur:n.onBlur,onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(n.reset(),n.endEditing())}}),t("button",{onMouseDown:function(e){e.preventDefault(),n.reset(),n.endEditing()},children:t(i,{size:16})})]})}));function p(){var e=a(),n=u(e.columnKey),r=c(),o=s().finishEditing,i=v(),f=i.ref,p=i.callbackAfterBlur,m=l(r[e.columnKey]),g=m[0],h=m[1];if(!n.editable||"string"!==n.type)throw new Error("Invalid condition");return t(d,{ref:f,value:g,onChange:function(e){e.preventDefault(),h(e.target.value)},onBlur:function(t){t.preventDefault(),g!==r[e.columnKey]?!function(){var e,t,r;return(null===(e=n.constraints)||void 0===e?void 0:e.maxLength)&&g.length>n.constraints.maxLength?(alert("最大文字数(".concat(n.constraints.maxLength,")を超過しています。(現在").concat(g.length,"文字)")),!1):(null===(t=n.constraints)||void 0===t?void 0:t.minLength)&&g.length<n.constraints.minLength?(alert("最小文字数(".concat(n.constraints.minLength,")を下回っています。(現在").concat(g.length,"文字)")),!1):!((null===(r=n.constraints)||void 0===r?void 0:r.pattern)&&!new RegExp(n.constraints.pattern).test(g)&&(alert("パターンに一致しません。(パターン".concat(n.constraints.pattern,")")),1))}()?setTimeout((function(){t.target.focus()}),100):(n.onCellBlur(e.columnKey,g,r,o),p()):o()},reset:function(){return h(r[e.columnKey])},endEditing:o})}function m(){var e=a(),n=u(e.columnKey),r=c(),o=s().finishEditing,i=v(),f=i.ref,p=i.callbackAfterBlur,m=l(e.value.toString()),g=m[0],h=m[1];if(!n.editable||"number"!==n.type)throw new Error("Invalid condition");return t(d,{ref:f,value:g,onChange:function(e){e.preventDefault(),""!==e.target.value?"-"!==e.target.value&&"0-"!==e.target.value?e.target.value.match(/^-?[0-9]+\.$/)?h(e.target.value):isNaN(Number(e.target.value))||h(Number(e.target.value).toString()):h("-0"):h("0")},onBlur:function(t){t.preventDefault(),Number(g)!==e.value?!function(){var e,t,r=parseInt(g);return(null===(e=n.constraints)||void 0===e?void 0:e.max)&&r>n.constraints.max?(alert("最大値(".concat(n.constraints.max,")を超過しています。(入力値:").concat(r,")")),!1):!((null===(t=n.constraints)||void 0===t?void 0:t.min)&&r<n.constraints.min&&(alert("最小値(".concat(n.constraints.min,")を下回っています。(入力値:").concat(r,")")),1))}()?setTimeout((function(){t.target.focus()}),100):(n.onCellBlur(e.columnKey,Number(g),r,o),p()):o()},reset:function(){return h(e.value.toString())},endEditing:o})}function g(){var n=a(),r=u(n.columnKey),o=c(),f=s().finishEditing,d=v(),p=d.ref,m=d.callbackAfterBlur,g=l(n.value),h=g[0],y=g[1];if(!r.editable||"select"!==r.type)throw new Error("Invalid condition");return e("div",{className:"flex justify-between gap-1 w-full items-center",children:[e("select",{ref:p,className:"w-full py-1 px-2",value:h,onChange:function(e){e.preventDefault(),y(e.target.value)},onBlur:function(e){e.preventDefault(),h!==n.value?(r.onCellBlur(n.columnKey,h,o,f),m()):f()},onKeyDown:function(e){"Enter"===e.key&&e.preventDefault()},onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(y(n.value),f())},children:[r.allowEmpty&&t("option",{value:"",children:""==n.value?"-- 未選択 --":"-- 選択解除 --"},"TEPPEN/ReactUI Empty Option"),r.options.map((function(e){return t("option",{value:e.value,children:e.label},e.value)}))]}),t("button",{onMouseDown:function(e){e.preventDefault(),y(n.value),f()},children:t(i,{size:16})})]})}var h=r((function(){var e=a(),n=s().focusAndEdit;return t("button",{className:"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200",onClick:function(t){t.preventDefault(),n(e.rowIndex,e.colIndex)},children:t(o,{size:12})})}));function y(){var n=f(),r=n.cell,l=n.isFocus,o=n.isEditing,i=n.onClickCellToFocus,a=n.onDoubleClickCellToEdit,u=n.preventPropagation;return t("td",{className:"".concat(l?"outline outline-1 -outline-offset-1 outline-gray-400":""),children:e("div",{className:"relative",children:[e("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default ".concat(l&&o?"opacity-0":""),onClick:i,children:["component"===r.type?r.label:t("div",{onDoubleClick:a,children:t("p",{className:"text-left",children:r.label})}),r.editable&&t(h,{})]}),r.editable&&l&&o&&e("div",{className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:u,children:["string"===r.type&&t(p,{}),"number"===r.type&&t(m,{}),"select"===r.type&&t(g,{})]})]})})}export{y as TableCell};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as n,memo as r,useState as l}from"react";import{EditIcon as i}from"./edit-icon.js";import{CancelIcon as o}from"./cancel-icon.js";import{useCellContext as a,useRowContext as u,useColumnContext as c}from"./sheet/providers.js";import{useFocusContext as s}from"./edit/provider.js";import{useCell as f,useCellFocus as v}from"./hook.js";var d=n((function(n,r){return e("div",{className:"flex justify-between gap-1 w-full items-center",children:[t("input",{ref:r,className:"w-full py-1 px-2 bg-white text-gray-900",type:"text",value:n.value,onChange:n.onChange,onBlur:n.onBlur,onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(n.reset(),n.endEditing())}}),t("button",{onMouseDown:function(e){e.preventDefault(),n.reset(),n.endEditing()},children:t(o,{size:16})})]})}));function m(){var e=a(),n=c(e.columnKey),r=u(),i=s().finishEditing,o=v(),f=o.ref,m=o.callbackAfterBlur,p=l(r[e.columnKey]),g=p[0],h=p[1];if(!n.editable||"string"!==n.type)throw new Error("Invalid condition");return t(d,{ref:f,value:g,onChange:function(e){e.preventDefault(),h(e.target.value)},onBlur:function(t){t.preventDefault(),g!==r[e.columnKey]?!function(){var e,t,r;return(null===(e=n.constraints)||void 0===e?void 0:e.maxLength)&&g.length>n.constraints.maxLength?(alert("最大文字数(".concat(n.constraints.maxLength,")を超過しています。(現在").concat(g.length,"文字)")),!1):(null===(t=n.constraints)||void 0===t?void 0:t.minLength)&&g.length<n.constraints.minLength?(alert("最小文字数(".concat(n.constraints.minLength,")を下回っています。(現在").concat(g.length,"文字)")),!1):!((null===(r=n.constraints)||void 0===r?void 0:r.pattern)&&!new RegExp(n.constraints.pattern).test(g)&&(alert("パターンに一致しません。(パターン".concat(n.constraints.pattern,")")),1))}()?setTimeout((function(){t.target.focus()}),100):(n.onCellBlur(e.columnKey,g,r,i),m()):i()},reset:function(){return h(r[e.columnKey].toString())},endEditing:i})}function p(){var e=a(),n=c(e.columnKey),r=u(),i=s().finishEditing,o=v(),f=o.ref,m=o.callbackAfterBlur,p=l(e.value.toString()),g=p[0],h=p[1];if(!n.editable||"number"!==n.type)throw new Error("Invalid condition");return t(d,{ref:f,value:g,onChange:function(e){e.preventDefault(),""!==e.target.value?"-"!==e.target.value&&"0-"!==e.target.value?e.target.value.match(/^-?[0-9]+\.$/)?h(e.target.value):isNaN(Number(e.target.value))||h(Number(e.target.value).toString()):h("-0"):h("0")},onBlur:function(t){t.preventDefault(),Number(g)!==e.value?!function(){var e,t,r=parseInt(g);return(null===(e=n.constraints)||void 0===e?void 0:e.max)&&r>n.constraints.max?(alert("最大値(".concat(n.constraints.max,")を超過しています。(入力値:").concat(r,")")),!1):!((null===(t=n.constraints)||void 0===t?void 0:t.min)&&r<n.constraints.min&&(alert("最小値(".concat(n.constraints.min,")を下回っています。(入力値:").concat(r,")")),1))}()?setTimeout((function(){t.target.focus()}),100):(n.onCellBlur(e.columnKey,Number(g),r,i),m()):i()},reset:function(){return h(e.value.toString())},endEditing:i})}function g(){var n=a(),r=c(n.columnKey),i=u(),f=s().finishEditing,d=v(),m=d.ref,p=d.callbackAfterBlur,g=l(n.value),h=g[0],y=g[1];if(!r.editable||"select"!==r.type)throw new Error("Invalid condition");return e("div",{className:"flex justify-between gap-1 w-full items-center",children:[e("select",{ref:m,className:"w-full py-1 px-2 bg-white text-gray-900",value:h,onChange:function(e){e.preventDefault(),y(e.target.value)},onBlur:function(e){e.preventDefault(),h!==n.value?(r.onCellBlur(n.columnKey,h,i,f),p()):f()},onKeyDown:function(e){"Enter"===e.key&&e.preventDefault()},onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(y(n.value),f())},children:[r.allowEmpty&&t("option",{value:"",children:""==n.value?"-- 未選択 --":"-- 選択解除 --"},"TEPPEN/ReactUI Empty Option"),r.options.map((function(e){return t("option",{value:e.value,children:e.label},e.value)}))]}),t("button",{onMouseDown:function(e){e.preventDefault(),y(n.value),f()},children:t(o,{size:16})})]})}var h=r((function(){var e=a(),n=s().focusAndEdit;return t("button",{className:"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200",onClick:function(t){t.preventDefault(),n(e.rowIndex,e.colIndex)},children:t(i,{size:12})})}));function y(){var n=f(),r=n.cell,l=n.isFocus,i=n.isEditing,o=n.onClickCellToFocus,a=n.onDoubleClickCellToEdit,c=n.preventPropagation,s=u();return t("td",{className:"".concat(l?"outline outline-1 -outline-offset-1 outline-gray-400":""),children:e("div",{className:"relative",children:[e("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default ".concat(l&&i?"opacity-0":""),onClick:o,children:[r.render?r.render(r.value,s):t("div",{onDoubleClick:a,children:t("p",{className:"text-left",children:r.label})}),r.editable&&t(h,{})]}),r.editable&&l&&i&&e("div",{className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:c,children:["string"===r.type&&t(m,{}),"number"===r.type&&t(p,{}),"select"===r.type&&t(g,{})]})]})})}export{y as TableCell};
 //# sourceMappingURL=cell.js.map

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

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{FIlterIcon as l}from"./filter-icon.js";import{useFilterContext as n}from"./provider.js";import{useState as r,useEffect as i,useCallback as a}from"react";import{CancelIcon as o}from"../cancel-icon.js";import{FILTER_OPERATOR as c,STRING_FILTER_OPERATOR as u,NUMBER_FILTER_OPERATOR as s,SELECT_FILTER_OPERATOR as d}from"./constants.js";import{useColumnsContext as f,useColumnContext as p}from"../sheet/providers.js";function v(t){var r=n().filterConditions;return e("div",{className:"relative cursor-pointer",onClick:t.onClick,children:e(l,{isFilterActive:r.filter((function(e){return e.key===t.keyName})).length>0})})}function m(t){var l=t.children,r=n(),i=r.clearFilter;if(0!==r.filterConditions.length)return e("button",{onClick:function(e){e.preventDefault(),i()},children:l})}function h(t){var l=t.children,r=n(),i=r.removeFilter,a=r.filterConditions,o=r.selectedFilterKey;if(0!==a.filter((function(e){return e.key===o})).length){return e("button",{onClick:function(e){e.preventDefault(),a.filter((function(e){return e.key===o})).forEach((function(e){i(e.id)}))},children:l})}}function y(l){var r=l.value,i=l.onChange,a=n().selectedFilterKey,o=p(a);return t("select",{value:r,onChange:i,className:"px-2 py-1 rounded-md",children:[e("option",{value:"",children:a?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===o.type&&u.map((function(t){return e("option",{value:t.key,children:t.label},t.key)})),"number"===o.type&&s.map((function(t){return e("option",{value:t.key,children:t.label},t.key)})),"select"===o.type&&d.map((function(t){return e("option",{value:t.key,children:t.label},t.key)}))]})}function g(l){return t("select",{className:"w-full px-2 py-1 rounded-md min-w-32",value:l.value,onChange:function(e){e.preventDefault(),l.setValue(e.target.value)},children:[e("option",{value:"",children:"-- 未選択 --"}),l.options.map((function(t){return e("option",{value:t.value,children:t.label},t.value)}))]})}function x(t){return e("input",{className:"w-full px-2 py-1 rounded-md min-w-32",type:"text",value:t.value,onChange:function(e){e.preventDefault(),t.setValue(e.target.value)},placeholder:"-- 値を入力 --"})}function b(t){var l=n(),r=l.selectedFilterKey,i=l.addFilter,a=p(r);return e("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md text-nowrap",onClick:function(e){var l;e.preventDefault(),r&&t.selectingOperator&&("select"===a.type||t.value)?i("string"===a.type?{key:r,operator:t.selectingOperator,value:[t.value]}:"select"===a.type?{key:r,operator:t.selectingOperator,value:t.value,label:null===(l=a.options.find((function(e){return e.value===t.value})))||void 0===l?void 0:l.label}:{key:r,operator:t.selectingOperator,value:Number(t.value)}):alert("全ての項目を入力してください")},children:"追加"})}function k(){var l=f(),u=n(),s=u.removeFilter,d=u.filterConditions,v=u.selectedFilterKey,m=u.setSelectedFilterKey,k=r(""),N=k[0],w=k[1],C=r(""),F=C[0],D=C[1],j=p(v);i((function(){D(""),w("")}),[v]);var K=a((function(e){e.preventDefault,w(e.target.value)}),[]);return t("div",{className:"flex w-full max-h-[50vh] bg-gray-200",children:[e("ul",{className:"flex flex-col items-end min-w-16 md:w-[20%] max-h-full overflow-y-auto no_scrollbar bg-white",children:l.filter((function(e){return!!e.label&&"component"!==e.type})).map((function(l){return t("li",{className:"relative pl-2 pr-8 md:px-8 py-3 w-full cursor-pointer border-y border-gray-300 ".concat(v===l.key?"bg-gray-200":"hover:bg-gray-100"),onClick:function(e){e.preventDefault(),m(l.key)},children:[e("p",{className:"text-right text-nowrap",children:l.label}),d.filter((function(e){return e.key===l.key})).length>0&&e("div",{className:"absolute top-1/2 right-1",children:e("div",{className:"-translate-y-1/2 rounded-full border border-gray-400 bg-gray-100 aspect-square w-5",children:e("p",{className:"text-xs text-center",children:d.filter((function(e){return e.key===l.key})).length})})})]},l.key)}))}),t("div",{className:"relative flex flex-col gap-4 ml-4 mr-4 md:ml-16 md:mr-auto py-5",children:[e("div",{className:"absolute top-5 right-0",children:e("button",{onClick:function(e){e.preventDefault(),m(null)},children:"閉じる"})}),e("p",{className:"font-bold text-xl",children:"フィルタリング条件"}),t("div",{className:"flex items-center gap-3 max-w-6xl",children:[t("p",{className:"text-gray-600 text-lg text-nowrap",children:["「",e("strong",{children:j.label}),"」 は"]}),e(y,{value:N,onChange:K}),"select"===j.type?e(g,{value:F,options:j.options,setValue:D}):e(x,{value:F,setValue:D}),e(b,{value:F,selectingOperator:N})]}),e("ul",{className:"flex flex-col gap-1 my-5 max-h-32 overflow-auto",children:d.filter((function(e){return e.key===v})).map((function(n){var r,i;return t("li",{className:"flex justify-between mr-5",children:[t("p",{children:["「",e("strong",{children:null===(r=l.find((function(e){return e.key===n.key})))||void 0===r?void 0:r.label}),"」 は",e("span",{children:null===(i=c.find((function(e){return e.key===n.operator})))||void 0===i?void 0:i.label}),"：",e("span",{children:n.label?n.label:n.value})]}),e("button",{onClick:function(e){e.preventDefault(),s(n.id)},children:e(o,{size:16})})]},n.id)}))}),e("div",{className:"flex justify-center",children:e(h,{children:t("p",{className:"text-xs text-gray-600 underline hover:text-gray-800",children:["「",j.label,"」のフィルタを全て解除"]})})})]})]})}export{v as TableFilter,k as TableFilterForm,m as TableFilterRemoveButton,h as TableSpecifyKeyFilterRemoveButton};
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{FIlterIcon as n}from"./filter-icon.js";import{useFilterContext as r}from"./provider.js";import{useState as i,useEffect as a,useCallback as o}from"react";import{CancelIcon as c}from"../cancel-icon.js";import{FILTER_OPERATOR as u,STRING_FILTER_OPERATOR as s,NUMBER_FILTER_OPERATOR as d,SELECT_FILTER_OPERATOR as f}from"./constants.js";import{useColumnsContext as p,useColumnContext as v}from"../sheet/providers.js";function m(t){var i=v(t.columnKey),a=r(),o=a.filterConditions,c=a.setSelectedFilterKey;return i.label?e("div",{className:"relative cursor-pointer",onClick:function(e){e.preventDefault(),c(t.columnKey)},children:e(n,{isFilterActive:o.filter((function(e){return e.key===t.columnKey})).length>0})}):e(l,{})}function h(t){var l=t.children,n=r(),i=n.clearFilter;if(0!==n.filterConditions.length)return e("button",{onClick:function(e){e.preventDefault(),i()},children:l})}function y(t){var l=t.children,n=r(),i=n.removeFilter,a=n.filterConditions,o=n.selectedFilterKey;if(0!==a.filter((function(e){return e.key===o})).length){return e("button",{onClick:function(e){e.preventDefault(),a.filter((function(e){return e.key===o})).forEach((function(e){i(e.id)}))},children:l})}}function g(l){var n=l.value,i=l.onChange,a=r().selectedFilterKey,o=v(a);return t("select",{value:n,onChange:i,className:"px-2 py-1 rounded-md",children:[e("option",{value:"",children:a?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===o.type&&s.map((function(t){return e("option",{value:t.key,children:t.label},t.key)})),"number"===o.type&&d.map((function(t){return e("option",{value:t.key,children:t.label},t.key)})),"select"===o.type&&f.map((function(t){return e("option",{value:t.key,children:t.label},t.key)}))]})}function x(l){return t("select",{className:"w-full px-2 py-1 rounded-md min-w-32",value:l.value,onChange:function(e){e.preventDefault(),l.setValue(e.target.value)},children:[e("option",{value:"",children:"-- 未選択 --"}),l.options.map((function(t){return e("option",{value:t.value,children:t.label},t.value)}))]})}function b(t){return e("input",{className:"w-full px-2 py-1 rounded-md min-w-32",type:"text",value:t.value,onChange:function(e){e.preventDefault(),t.setValue(e.target.value)},placeholder:"-- 値を入力 --"})}function k(t){var l=r(),n=l.selectedFilterKey,i=l.addFilter,a=v(n);return e("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md text-nowrap",onClick:function(e){var l;e.preventDefault(),n&&t.selectingOperator&&("select"===a.type||t.value)?i("string"===a.type?{key:n,operator:t.selectingOperator,value:[t.value]}:"select"===a.type?{key:n,operator:t.selectingOperator,value:t.value,label:null===(l=a.options.find((function(e){return e.value===t.value})))||void 0===l?void 0:l.label}:{key:n,operator:t.selectingOperator,value:Number(t.value)}):alert("全ての項目を入力してください")},children:"追加"})}function N(){var l=p(),n=r(),s=n.removeFilter,d=n.filterConditions,f=n.selectedFilterKey,m=n.setSelectedFilterKey,h=i(""),N=h[0],w=h[1],C=i(""),F=C[0],D=C[1],K=v(f);a((function(){D(""),w("")}),[f]);var j=o((function(e){e.preventDefault,w(e.target.value)}),[]);return t("div",{className:"flex w-full max-h-[50vh] bg-gray-200",children:[e("ul",{className:"flex flex-col items-end min-w-16 md:w-[20%] max-h-full overflow-y-auto no_scrollbar bg-white",children:l.filter((function(e){return!!e.label})).map((function(l){return t("li",{className:"relative pl-2 pr-8 md:px-8 py-3 w-full cursor-pointer border-y border-gray-300 ".concat(f===l.key?"bg-gray-200":"hover:bg-gray-100"),onClick:function(e){e.preventDefault(),m(l.key)},children:[e("p",{className:"text-right text-nowrap",children:l.label}),d.filter((function(e){return e.key===l.key})).length>0&&e("div",{className:"absolute top-1/2 right-1",children:e("div",{className:"-translate-y-1/2 rounded-full border border-gray-400 bg-gray-100 aspect-square w-5",children:e("p",{className:"text-xs text-center",children:d.filter((function(e){return e.key===l.key})).length})})})]},l.key)}))}),t("div",{className:"relative flex flex-col gap-4 ml-4 mr-4 md:ml-16 md:mr-auto py-5",children:[e("div",{className:"absolute top-5 right-0",children:e("button",{onClick:function(e){e.preventDefault(),m(null)},children:"閉じる"})}),e("p",{className:"font-bold text-xl",children:"フィルタリング条件"}),t("div",{className:"flex items-center gap-3 max-w-6xl",children:[t("p",{className:"text-gray-600 text-lg text-nowrap",children:["「",e("strong",{children:K.label}),"」 は"]}),e(g,{value:N,onChange:j}),"select"===K.type?e(x,{value:F,options:K.options,setValue:D}):e(b,{value:F,setValue:D}),e(k,{value:F,selectingOperator:N})]}),e("ul",{className:"flex flex-col gap-1 my-5 max-h-32 overflow-auto",children:d.filter((function(e){return e.key===f})).map((function(n){var r,i;return t("li",{className:"flex justify-between mr-5",children:[t("p",{children:["「",e("strong",{children:null===(r=l.find((function(e){return e.key===n.key})))||void 0===r?void 0:r.label}),"」 は",e("span",{children:null===(i=u.find((function(e){return e.key===n.operator})))||void 0===i?void 0:i.label}),"：",e("span",{children:n.label?n.label:n.value})]}),e("button",{onClick:function(e){e.preventDefault(),s(n.id)},children:e(c,{size:16})})]},n.id)}))}),e("div",{className:"flex justify-center",children:e(y,{children:t("p",{className:"text-xs text-gray-600 underline hover:text-gray-800",children:["「",K.label,"」のフィルタを全て解除"]})})})]})]})}export{m as TableFilter,N as TableFilterForm,h as TableFilterRemoveButton,y as TableSpecifyKeyFilterRemoveButton};
 //# sourceMappingURL=components.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../../../src/table/filter/hooks.ts"],"sourcesContent":["import { useCallback, useReducer } from \"react\";\nimport { TFilter, TFilterReducer, TReturnUseFilterReducer } from \"./types\";\nimport { DataObject } from \"../type\";\n\nconst reducer: TFilterReducer = (state, action) => {\n  switch (action.type) {\n    case \"add\":\n      return {\n        filters: [\n          ...state.filters,\n          { id: new Date().getTime(), ...action.payload.filter },\n        ],\n      };\n    case \"remove\":\n      return {\n        filters: state.filters.filter((f) => f.id !== action.payload.id),\n      };\n    case \"clear\":\n      return { filters: [] };\n  }\n};\n\nexport function useFilterReducer(): TReturnUseFilterReducer {\n  const [state, dispatch] = useReducer(reducer, { filters: [] });\n\n  const addFilter = useCallback(\n    (filter: TFilter) => dispatch({ type: \"add\", payload: { filter } }),\n    [dispatch]\n  );\n  const removeFilter = useCallback(\n    (id: number) => dispatch({ type: \"remove\", payload: { id } }),\n    [dispatch]\n  );\n  const clearFilter = useCallback(\n    () => dispatch({ type: \"clear\" }),\n    [dispatch]\n  );\n\n  const filter = useCallback(\n    (rows: DataObject[]): DataObject[] => {\n      return state.filters.reduce((acc, filter) => {\n        switch (filter.operator) {\n          case \"includeText\":\n            return acc.filter((row) => {\n              const value = row[filter.key];\n              if (typeof value === \"string\") {\n                return filter.value.some((v) => value.includes(v));\n              }\n              return false;\n            });\n          case \"eq\":\n            return acc.filter((row) => row[filter.key] === filter.value);\n          case \"ne\":\n            return acc.filter((row) => row[filter.key] !== filter.value);\n          case \"gt\":\n            return acc.filter((row) => row[filter.key] > filter.value);\n          case \"lt\":\n            return acc.filter((row) => row[filter.key] < filter.value);\n          case \"gte\":\n            return acc.filter((row) => row[filter.key] >= filter.value);\n          case \"lte\":\n            return acc.filter((row) => row[filter.key] <= filter.value);\n          case \"selected\":\n            return acc.filter((row) => row[filter.key] === filter.value);\n          case \"notSelected\":\n            return acc.filter((row) => row[filter.key] !== filter.value);\n        }\n      }, rows);\n    },\n    [state]\n  );\n\n  return {\n    addFilter,\n    removeFilter,\n    clearFilter,\n    filter,\n    filterConditions: state.filters,\n  };\n}\n"],"names":["reducer","state","action","type","filters","__spreadArray","__assign","id","Date","getTime","payload","filter","f","useFilterReducer","_a","useReducer","dispatch","addFilter","useCallback","removeFilter","clearFilter","rows","reduce","acc","operator","row","value","key","some","v","includes","filterConditions"],"mappings":"2IAIA,IAAMA,EAA0B,SAACC,EAAOC,GACtC,OAAQA,EAAOC,MACb,IAAK,MACH,MAAO,CACLC,QAAOC,EAAAA,EAAA,GACFJ,EAAMG,SAAO,GAAA,CACdE,EAAA,CAAAC,IAAI,IAAIC,MAAOC,WAAcP,EAAOQ,QAAQC,UAC/C,IAEL,IAAK,SACH,MAAO,CACLP,QAASH,EAAMG,QAAQO,QAAO,SAACC,GAAM,OAAAA,EAAEL,KAAOL,EAAOQ,QAAQH,EAAxB,KAEzC,IAAK,QACH,MAAO,CAAEH,QAAS,IAExB,WAEgBS,IACR,IAAAC,EAAoBC,EAAWf,EAAS,CAAEI,QAAS,KAAlDH,OAAOe,OAERC,EAAYC,GAChB,SAACP,GAAoB,OAAAK,EAAS,CAAEb,KAAM,MAAOO,QAAS,CAAEC,OAAMA,OAC9D,CAACK,IA6CH,MAAO,CACLC,UAASA,EACTE,aA7CmBD,GACnB,SAACX,GAAe,OAAAS,EAAS,CAAEb,KAAM,SAAUO,QAAS,CAAEH,GAAEA,OACxD,CAACS,IA4CDI,YA1CkBF,GAClB,WAAM,OAAAF,EAAS,CAAEb,KAAM,SAAjB,GACN,CAACa,IAyCDL,OAtCaO,GACb,SAACG,GACC,OAAOpB,EAAMG,QAAQkB,QAAO,SAACC,EAAKZ,GAChC,OAAQA,EAAOa,UACb,IAAK,cACH,OAAOD,EAAIZ,QAAO,SAACc,GACjB,IAAMC,EAAQD,EAAId,EAAOgB,KACzB,MAAqB,iBAAVD,GACFf,EAAOe,MAAME,MAAK,SAACC,GAAM,OAAAH,EAAMI,SAASD,EAAE,GAGrD,IACF,IAAK,KAYL,IAAK,WACH,OAAON,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOgB,OAAShB,EAAOe,KAAK,IAX7D,IAAK,KAYL,IAAK,cACH,OAAOH,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOgB,OAAShB,EAAOe,KAAK,IAX7D,IAAK,KACH,OAAOH,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOgB,KAAOhB,EAAOe,KAAK,IAC3D,IAAK,KACH,OAAOH,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOgB,KAAOhB,EAAOe,KAAK,IAC3D,IAAK,MACH,OAAOH,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOgB,MAAQhB,EAAOe,KAAK,IAC5D,IAAK,MACH,OAAOH,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOgB,MAAQhB,EAAOe,KAAK,IAM/D,GAAEL,EACL,GACA,CAACpB,IAQD8B,iBAAkB9B,EAAMG,QAE5B"}
+{"version":3,"file":"hooks.js","sources":["../../../../../src/table/filter/hooks.ts"],"sourcesContent":["import { useCallback, useReducer } from \"react\";\nimport { TFilter, TFilterReducer, TReturnUseFilterReducer } from \"./types\";\nimport { DataObject } from \"../type\";\n\nconst reducer: TFilterReducer = (state, action) => {\n  switch (action.type) {\n    case \"add\":\n      return {\n        filters: [\n          ...state.filters,\n          { id: new Date().getTime(), ...action.payload.filter },\n        ],\n      };\n    case \"remove\":\n      return {\n        filters: state.filters.filter((f) => f.id !== action.payload.id),\n      };\n    case \"clear\":\n      return { filters: [] };\n  }\n};\n\nexport function useFilterReducer(): TReturnUseFilterReducer {\n  const [state, dispatch] = useReducer(reducer, { filters: [] });\n\n  const addFilter = useCallback(\n    (filter: TFilter) => dispatch({ type: \"add\", payload: { filter } }),\n    [dispatch]\n  );\n  const removeFilter = useCallback(\n    (id: number) => dispatch({ type: \"remove\", payload: { id } }),\n    [dispatch]\n  );\n  const clearFilter = useCallback(\n    () => dispatch({ type: \"clear\" }),\n    [dispatch]\n  );\n\n  const filter = useCallback(\n    (rows: DataObject[]): DataObject[] => {\n      return state.filters.reduce((acc, filter) => {\n        switch (filter.operator) {\n          case \"includeText\":\n            return acc.filter((row) => {\n              const value = row[filter.key];\n              if (typeof value === \"string\") {\n                return filter.value.some((v) => value.includes(v));\n              }\n              return false;\n            });\n          case \"eq\":\n            return acc.filter((row) => row[filter.key] === filter.value);\n          case \"ne\":\n            return acc.filter((row) => row[filter.key] !== filter.value);\n          case \"gt\":\n            return acc.filter(\n              (row) => (row[filter.key] as number) > filter.value\n            );\n          case \"lt\":\n            return acc.filter(\n              (row) => (row[filter.key] as number) < filter.value\n            );\n          case \"gte\":\n            return acc.filter(\n              (row) => (row[filter.key] as number) >= filter.value\n            );\n          case \"lte\":\n            return acc.filter(\n              (row) => (row[filter.key] as number) <= filter.value\n            );\n          case \"selected\":\n            return acc.filter((row) => row[filter.key] === filter.value);\n          case \"notSelected\":\n            return acc.filter((row) => row[filter.key] !== filter.value);\n        }\n      }, rows);\n    },\n    [state]\n  );\n\n  return {\n    addFilter,\n    removeFilter,\n    clearFilter,\n    filter,\n    filterConditions: state.filters,\n  };\n}\n"],"names":["reducer","state","action","type","filters","__spreadArray","__assign","id","Date","getTime","payload","filter","f","useFilterReducer","_a","useReducer","dispatch","addFilter","useCallback","removeFilter","clearFilter","rows","reduce","acc","operator","row","value","key","some","v","includes","filterConditions"],"mappings":"2IAIA,IAAMA,EAA0B,SAACC,EAAOC,GACtC,OAAQA,EAAOC,MACb,IAAK,MACH,MAAO,CACLC,QAAOC,EAAAA,EAAA,GACFJ,EAAMG,SAAO,GAAA,CACdE,EAAA,CAAAC,IAAI,IAAIC,MAAOC,WAAcP,EAAOQ,QAAQC,UAC/C,IAEL,IAAK,SACH,MAAO,CACLP,QAASH,EAAMG,QAAQO,QAAO,SAACC,GAAM,OAAAA,EAAEL,KAAOL,EAAOQ,QAAQH,EAAxB,KAEzC,IAAK,QACH,MAAO,CAAEH,QAAS,IAExB,WAEgBS,IACR,IAAAC,EAAoBC,EAAWf,EAAS,CAAEI,QAAS,KAAlDH,OAAOe,OAERC,EAAYC,GAChB,SAACP,GAAoB,OAAAK,EAAS,CAAEb,KAAM,MAAOO,QAAS,CAAEC,OAAMA,OAC9D,CAACK,IAqDH,MAAO,CACLC,UAASA,EACTE,aArDmBD,GACnB,SAACX,GAAe,OAAAS,EAAS,CAAEb,KAAM,SAAUO,QAAS,CAAEH,GAAEA,OACxD,CAACS,IAoDDI,YAlDkBF,GAClB,WAAM,OAAAF,EAAS,CAAEb,KAAM,SAAjB,GACN,CAACa,IAiDDL,OA9CaO,GACb,SAACG,GACC,OAAOpB,EAAMG,QAAQkB,QAAO,SAACC,EAAKZ,GAChC,OAAQA,EAAOa,UACb,IAAK,cACH,OAAOD,EAAIZ,QAAO,SAACc,GACjB,IAAMC,EAAQD,EAAId,EAAOgB,KACzB,MAAqB,iBAAVD,GACFf,EAAOe,MAAME,MAAK,SAACC,GAAM,OAAAH,EAAMI,SAASD,EAAE,GAGrD,IACF,IAAK,KAoBL,IAAK,WACH,OAAON,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOgB,OAAShB,EAAOe,KAAK,IAnB7D,IAAK,KAoBL,IAAK,cACH,OAAOH,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOgB,OAAShB,EAAOe,KAAK,IAnB7D,IAAK,KACH,OAAOH,EAAIZ,QACT,SAACc,GAAQ,OAACA,EAAId,EAAOgB,KAAkBhB,EAAOe,KAAK,IAEvD,IAAK,KACH,OAAOH,EAAIZ,QACT,SAACc,GAAQ,OAACA,EAAId,EAAOgB,KAAkBhB,EAAOe,KAAK,IAEvD,IAAK,MACH,OAAOH,EAAIZ,QACT,SAACc,GAAQ,OAACA,EAAId,EAAOgB,MAAmBhB,EAAOe,KAAK,IAExD,IAAK,MACH,OAAOH,EAAIZ,QACT,SAACc,GAAQ,OAACA,EAAId,EAAOgB,MAAmBhB,EAAOe,KAAK,IAO3D,GAAEL,EACL,GACA,CAACpB,IAQD8B,iBAAkB9B,EAAMG,QAE5B"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";function n(n){return e("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[n.label&&t("div",{className:"px-2",children:t("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis ".concat(n.filterComponent&&n.sortConponent?"w-[80%] min-w-20":n.filterComponent||n.sortConponent?"w-[90%] min-w-20":"min-w-10"," "),children:n.label})}),n.label&&e("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[n.filterComponent&&n.filterComponent,n.sortConponent&&n.sortConponent]})]})}export{n as TableHeaderElement};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import"./filter/provider.js";import{TableFilter as t}from"./filter/components.js";import{useColumnContext as o}from"./sheet/providers.js";import{SortButton as l}from"./sort/components.js";import"./sort/provider.js";function i(i){var s=o(i.columnKey);return e("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[s.label&&r("div",{className:"px-2",children:r("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20",children:s.label})}),e("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[r(l,{columnKey:i.columnKey}),r(t,{columnKey:i.columnKey})]})]})}export{i as TableHeaderElement};
 //# sourceMappingURL=header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n  label?: string;\n  sortConponent?: JSX.Element;\n  filterComponent?: JSX.Element;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n  return (\n    <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n      {props.label && (\n        <div className=\"px-2\">\n          <p\n            className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis ${\n              props.filterComponent && props.sortConponent\n                ? \"w-[80%] min-w-20\"\n                : !props.filterComponent && !props.sortConponent\n                ? \"min-w-10\"\n                : \"w-[90%] min-w-20\"\n            } `}\n          >\n            {props.label}\n          </p>\n        </div>\n      )}\n\n      {props.label && (\n        <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n          {props.filterComponent && props.filterComponent}\n          {props.sortConponent && props.sortConponent}\n        </div>\n      )}\n    </th>\n  );\n}\n"],"names":["TableHeaderElement","props","_jsxs","className","children","label","_jsx","concat","filterComponent","sortConponent"],"mappings":"kDAMM,SAAUA,EAAmBC,GACjC,OACEC,EAAI,KAAA,CAAAC,UAAW,8CACZC,SAAA,CAAAH,EAAMI,OACLC,EAAK,MAAA,CAAAH,UAAU,OAAMC,SACnBE,EACE,IAAA,CAAAH,UAAW,iEAAAI,OACTN,EAAMO,iBAAmBP,EAAMQ,cAC3B,mBACCR,EAAMO,iBAAoBP,EAAMQ,cAEjC,mBADA,WACkB,cAGvBR,EAAMI,UAKZJ,EAAMI,OACLH,EAAA,MAAA,CAAKC,UAAU,oEACZC,SAAA,CAAAH,EAAMO,iBAAmBP,EAAMO,gBAC/BP,EAAMQ,eAAiBR,EAAMQ,mBAKxC"}
+{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["import { TableFilter } from \"./filter\";\nimport { useColumnContext } from \"./sheet\";\nimport { SortButton } from \"./sort\";\n\ntype TPropsTableHeader = {\n  columnKey: string;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n  const col = useColumnContext(props.columnKey);\n\n  return (\n    <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n      {col.label && (\n        <div className=\"px-2\">\n          <p\n            className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20`}\n          >\n            {col.label}\n          </p>\n        </div>\n      )}\n\n      <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n        <SortButton columnKey={props.columnKey} />\n        <TableFilter columnKey={props.columnKey} />\n      </div>\n    </th>\n  );\n}\n"],"names":["TableHeaderElement","props","col","useColumnContext","columnKey","_jsxs","className","label","_jsx","children","SortButton","TableFilter"],"mappings":"yQAQM,SAAUA,EAAmBC,GACjC,IAAMC,EAAMC,EAAiBF,EAAMG,WAEnC,OACEC,EAAI,KAAA,CAAAC,UAAW,wDACZJ,EAAIK,OACHC,EAAA,MAAA,CAAKF,UAAU,OACbG,SAAAD,EAAA,IAAA,CACEF,UAAW,iFAAgFG,SAE1FP,EAAIK,UAKXF,EAAK,MAAA,CAAAC,UAAU,oEACbG,SAAA,CAAAD,EAACE,EAAU,CAACN,UAAWH,EAAMG,YAC7BI,EAACG,EAAY,CAAAP,UAAWH,EAAMG,iBAItC"}

package/dist/esm/src/table/sheet/providers.js

@@ -1,3 +1,3 @@
 "use client";
-import{__rest as e}from"../../../node_modules/tslib/tslib.es6.js";import{jsx as r}from"react/jsx-runtime";import{createContext as n,useContext as o}from"react";var l=n({id:""});function t(e){var n=e.children,o=e.row;return r(l.Provider,{value:o,children:n})}function i(){return o(l)}var c=n({cols:[],colMaps:{}});function u(n){var o=n.children,l=n.cols,t=l.reduce((function(r,n){var o=n.key,l=e(n,["key"]);return r[o]=l,r}),{});return r(c.Provider,{value:{cols:l,colMaps:t},children:o})}function d(e){return o(c).colMaps[e]}function a(){return o(c).cols}var v=n({columnKey:"",value:"",label:"",type:"string",rowIndex:0,colIndex:0});function s(e){var n,o,l=e.children,t=e.columnKey,c=e.rowIndex,u=e.colIndex,a=d(t),s=i()[t];return r(v.Provider,{value:{columnKey:t,value:s,label:"select"===a.type?null===(o=null===(n=a.options)||void 0===n?void 0:n.find((function(e){return e.value===s})))||void 0===o?void 0:o.label:s,editable:a.editable,type:a.type,rowIndex:c,colIndex:u},children:l})}function f(){return o(v)}export{s as CellProvider,u as ColumnsProvider,t as RowProvider,f as useCellContext,d as useColumnContext,a as useColumnsContext,i as useRowContext};
+import{__rest as e}from"../../../node_modules/tslib/tslib.es6.js";import{jsx as r}from"react/jsx-runtime";import{createContext as n,useContext as o}from"react";var l=n({id:""});function t(e){var n=e.children,o=e.row;return r(l.Provider,{value:o,children:n})}function i(){return o(l)}var c=n({cols:[],colMaps:{}});function u(n){var o=n.children,l=n.cols,t=l.reduce((function(r,n){var o=n.key,l=e(n,["key"]);return r[o]=l,r}),{});return r(c.Provider,{value:{cols:l,colMaps:t},children:o})}function d(e){return o(c).colMaps[e]}function a(){return o(c).cols}var v=n({columnKey:"",value:"",label:"",type:"string",rowIndex:0,colIndex:0});function s(e){var n,o,l=e.children,t=e.columnKey,c=e.rowIndex,u=e.colIndex,a=d(t),s=i()[t];return r(v.Provider,{value:{columnKey:t,value:s,label:"select"===a.type?null===(o=null===(n=a.options)||void 0===n?void 0:n.find((function(e){return e.value===s})))||void 0===o?void 0:o.label:s,editable:a.editable,render:a.editable?void 0:a.render,type:a.type,rowIndex:c,colIndex:u},children:l})}function f(){return o(v)}export{s as CellProvider,u as ColumnsProvider,t as RowProvider,f as useCellContext,d as useColumnContext,a as useColumnsContext,i as useRowContext};
 //# sourceMappingURL=providers.js.map

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

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import{SortIcon as e}from"./icon.js";import{useSortContext as o}from"./provider.js";function t(t){var i=o(),n=i.key,c=i.asc,a=i.changeKey,m=i.changeOrder,s=n===t.keyName;return r("div",{onClick:function(r){r.preventDefault(),s?m():a(t.keyName)},className:"cursor-pointer",children:r(e,{sortOrder:s?c?"ASC":"DESC":"ASC",isSortActive:s})})}export{t as SortButton};
+import{jsx as r}from"react/jsx-runtime";import{SortIcon as e}from"./icon.js";import{useSortContext as o}from"./provider.js";function n(n){var t=o(),c=t.key,i=t.asc,m=t.changeKey,s=t.changeOrder,a=c===n.columnKey;return r("div",{onClick:function(r){r.preventDefault(),a?s():m(n.columnKey)},className:"cursor-pointer",children:r(e,{sortOrder:a?i?"ASC":"DESC":"ASC",isSortActive:a})})}export{n as SortButton};
 //# sourceMappingURL=components.js.map

package/dist/index.d.ts

@@ -1,14 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type DataObject = {
-    [key: string]: any;
+    [key: string]: number | string;
     id: number | string;
-    onClick?: React.MouseEventHandler<HTMLTableRowElement>;
 };
 type TStringCellEditingCondition = ({
     type: "string";
 } & ({
     editable?: false;
+    render?: (value: string, row: DataObject) => React.ReactNode;
 } | {
     editable: true;
     onCellBlur: (key: string, value: string, current: DataObject, completeEditing: () => void) => void;
@@ -22,6 +22,7 @@ type TNumberCellEditingCondition = ({
     type: "number";
 } & ({
     editable?: false;
+    render?: (value: number, row: DataObject) => React.ReactNode;
 } | {
     editable: true;
     onCellBlur: (key: string, value: number, current: DataObject, completeEditing: () => void) => void;
@@ -38,29 +39,29 @@ type TSelectCellEditingCondition = ({
     }[];
 } & ({
     editable?: false;
+    render?: (value: string, row: DataObject) => React.ReactNode;
 } | {
     editable: true;
     allowEmpty?: boolean;
     onCellBlur: (key: string, value: string, current: DataObject, completeEditing: () => void) => void;
 }));
-type TComponentCellEditingCondition = {
-    type: "component";
-    editable?: false;
-};
-type TCellEditingCondition = TStringCellEditingCondition | TNumberCellEditingCondition | TSelectCellEditingCondition | TComponentCellEditingCondition;
+type TCellEditingCondition = TStringCellEditingCondition | TNumberCellEditingCondition | TSelectCellEditingCondition;
 type TTableColumn = {
     key: string;
     label?: string;
 } & TCellEditingCondition;
+type TailwindCssStyle = string;
 type TPropsTable = {
     cols: TTableColumn[];
     rows: DataObject[];
+    onClickRow?: (row: DataObject) => void;
     initialCondition?: {
         sort?: {
             key: string;
             asc?: boolean;
         };
     };
+    applyRowFormatting?: (row: DataObject) => TailwindCssStyle;
 };
 
 declare function Table(props: TPropsTable): react_jsx_runtime.JSX.Element;

package/package.json

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