@teppen/react-ui 0.7.6 → 1.0.0

package/README.md

@@ -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,32 @@ 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})`);
+        }}
       />
     </div>
   );
@@ -135,26 +159,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 +187,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 +195,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 +213,26 @@ 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;
+```
+
 ## 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"),i=require("./header.js"),s=require("./pagenation/providers.js"),l=require("./pagenation/components.js"),d=require("./filter/provider.js"),a=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 x(e){var s=n.useTable(e),c=s.cols,x=s.rows,h=v.useFocusContext(),j=h.isFocus,m=h.isEditing,f=h.edit,p=h.moveLeft,y=h.moveRight,g=h.moveUp,w=h.moveDown,b=h.unfocus,k=h.setMaxRowNumber,q=d.useFilterContext().selectedFilterKey;return t.useEffect((function(){var e=function(e){j&&!m&&("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&&f())};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[m,j]),t.useEffect((function(){k(x.length-1)}),[x.length]),r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end mb-1 mr-3",children:r.jsx(a.TableFilterRemoveButton,{children:r.jsx("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r.jsx("div",{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(i.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(a.TableFilterForm,{})})}),0===x.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"})})}),x.map((function(t,n){return r.jsx(u.RowProvider,{row:t,children:r.jsx("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat(e.onClickRow?"hover:cursor-pointer":""),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(l.DisplayRange,{}),r.jsx("div",{className:"mt-2",children:r.jsx(l.Pagenation,{})})]})]})}module.exports=function(t){var n;return r.jsx(d.FilterProvider,{children:r.jsx(c.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(u.ColumnsProvider,{cols:t.cols,children:r.jsx(v.FocusProvider,{columnCount:t.cols.length,children:r.jsx(x,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",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],p=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(),p(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 p(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],p=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]+\.$/)?p(e.target.value):isNaN(Number(e.target.value))||p(Number(e.target.value).toString()):p("-0"):p("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 p(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],p=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:x,onChange:function(e){e.preventDefault(),p(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&&(p(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(),p(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 o}from"react/jsx-runtime";import{useEffect as t}from"react";import{useTable as n}from"./hook.js";import{TableCell as i}from"./cell.js";import{TableHeaderElement as l}from"./header.js";import{PagenationProvider as c}from"./pagenation/providers.js";import{DisplayRange as d,Pagenation as a}from"./pagenation/components.js";import{FilterProvider as s,useFilterContext as m}from"./filter/provider.js";import{TableFilterRemoveButton as u,TableFilterForm as f}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(o){var t;return r(s,{children:r(p,{initialCondition:null===(t=o.initialCondition)||void 0===t?void 0:t.sort,children:r(c,{rowCount:o.rows.length,children:r(h,{cols:o.cols,children:r(w,{columnCount:o.cols.length,children:r(b,e({},o))})})})})})}function b(e){var c=n(e),s=c.cols,p=c.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,A=h.setMaxRowNumber,R=m().selectedFilterKey;return t((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]),t((function(){A(p.length-1)}),[p.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:s.map((function(e){return r(l,{columnKey:e.key},e.key)}))})}),o("tbody",{children:[!!R&&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(f,{})})}),0===p.length&&r("tr",{children:r("td",{colSpan:s.length,className:"py-5",children:r("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),p.map((function(o,t){return r(v,{row:o,children:r("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat(e.onClickRow?"hover:cursor-pointer":""),onClick:function(r){r.preventDefault(),e.onClickRow&&e.onClickRow(o)},"data-testid":o.id,children:s.map((function(e,o){return r(y,{columnKey:e.key,rowIndex:t,colIndex:o,children:r(i,{})},e.key)}))})},o.id)}))]})]})}),o("div",{className:"mt-1",children:[r(d,{}),r("div",{className:"mt-2",children:r(a,{})})]})]})}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",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",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,16 +39,13 @@ 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;
@@ -55,6 +53,7 @@ type TTableColumn = {
 type TPropsTable = {
     cols: TTableColumn[];
     rows: DataObject[];
+    onClickRow?: (row: DataObject) => void;
     initialCondition?: {
         sort?: {
             key: string;

package/package.json

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