@teppen/react-ui 0.6.0 → 0.7.1

package/README.md

@@ -58,10 +58,34 @@ const App = () => {
     <div>
       <Table
         rows={[
-          { id: "1", name: "Taro", age: 30, role: "" },
-          { id: "2", name: "Yoshiko", age: 60, role: "1" },
-          { id: "3", name: "Koki", age: 13, role: "2" },
-          { id: "4", name: "Chisato", age: 34, role: "2" },
+          {
+            id: "1",
+            name: "Taro",
+            age: 30,
+            role: "",
+            button: <button>Click</button>,
+          },
+          {
+            id: "2",
+            name: "Yoshiko",
+            age: 60,
+            role: "1",
+            button: <button>Click</button>,
+          },
+          {
+            id: "3",
+            name: "Koki",
+            age: 13,
+            role: "2",
+            button: <button>Click</button>,
+          },
+          {
+            id: "4",
+            name: "Chisato",
+            age: 34,
+            role: "2",
+            button: <button>Click</button>,
+          },
         ]}
         cols={[
           { key: "id", label: "ID", type: "number" },
@@ -96,6 +120,7 @@ const App = () => {
               completeEditing();
             },
           },
+          { key: "button", type: "component" },
         ]}
       />
     </div>
@@ -132,10 +157,12 @@ export type DataObject = {
 
 ##### 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` and `type`. `label` is optional, but it is required for some functions, so it is recommended to set it.
+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.
+
+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";
+export type TColumnType = "string" | "number" | "select" | "component";
 
 export type TTableColumn = {
   key: string;

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"),l=require("./hook.js"),t=require("./cell.js"),s=require("./sort.js"),n=require("./header.js"),i=require("./page.js"),a=require("./filter.js"),o=require("react"),c=require("./filter-form.js");function d(d){var u=l.useTable(d),x=u.cols,j=u.rows,m=u.rowCount,h=u.sortKey,p=u.sortOrder,f=u.page,v=f.count,b=f.current,y=f.from,g=f.to,N=f.next,k=f.prev,C=f.jump,q=o.useState(!1),T=q[0],w=q[1];return r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end",children:r.jsx(a.TableFilterRemoveButton,{children:"remove all filters"})}),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:x.map((function(e){return r.jsx(n.TableHeaderElement,{label:e.label,columnType:e.type,sortConponent:r.jsx(s.Sort,{onClick:e.onClick,isSortedByThis:h===e.key,sortOrder:p}),filterComponent:r.jsx(a.TableFilter,{keyName:e.key,onClick:function(e){e.preventDefault(),w((function(e){return!e}))}})},e.key)}))})}),r.jsxs("tbody",{children:[T&&r.jsx("tr",{children:r.jsx("td",{colSpan:x.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl py-5 px-2 z-20",children:r.jsx("div",{className:"container max-w-[768px] mx-auto",children:r.jsxs("div",{className:"relative",children:[r.jsx("div",{className:"absolute top-0 right-0",children:r.jsx("button",{onClick:function(e){e.preventDefault(),w(!1)},children:"close"})}),r.jsx("div",{children:r.jsx(c.TableFilterForm,{cols:x})})]})})})}),0===j.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:x.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),j.map((function(l){var s;return r.jsx("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(s=j[0])||void 0===s?void 0:s.onClick)?"hover:cursor-pointer":""),onClick:l.onClick,"data-testid":l.id,children:x.map((function(s){return r.jsx(t.TableCell,e.__assign({},s,{columnKey:s.key,currentRecord:l,children:l[s.key]}))}))},l.id)}))]})]})}),r.jsxs("div",{className:"mt-1",children:[r.jsxs("p",{className:"text-center text-sm text-gray-600",children:[y+1," - ",g<m?g:m," of ",m]}),r.jsx("div",{className:"mt-2",children:r.jsx(i.Pagenation,{count:v,current:b,jump:C,next:N,prev:k})})]})]})}module.exports=function(l){return r.jsx(a.TableFilterProvider,{children:r.jsx(d,e.__assign({},l))})};
+"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("./hook.js"),l=require("./cell.js"),s=require("./sort.js"),n=require("./header.js"),i=require("./page.js"),o=require("./filter.js"),a=require("react"),c=require("./filter-form.js");function d(d){var u=t.useTable(d),x=u.cols,j=u.rows,m=u.rowCount,h=u.sortKey,p=u.sortOrder,v=u.page,f=v.count,b=v.current,y=v.from,g=v.to,N=v.next,k=v.prev,C=v.jump,q=a.useState(!1),w=q[0],T=q[1];return r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end",children:r.jsx(o.TableFilterRemoveButton,{children:"remove all filters"})}),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:x.map((function(e){return r.jsx(n.TableHeaderElement,{label:e.label,sortConponent:"component"!==e.type?r.jsx(s.Sort,{onClick:e.onClick,isSortedByThis:h===e.key,sortOrder:p}):void 0,filterComponent:"component"!==e.type?r.jsx(o.TableFilter,{keyName:e.key,onClick:function(e){e.preventDefault(),T((function(e){return!e}))}}):void 0},e.key)}))})}),r.jsxs("tbody",{children:[w&&r.jsx("tr",{children:r.jsx("td",{colSpan:x.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl py-5 px-2 z-20",children:r.jsx("div",{className:"container max-w-[768px] mx-auto",children:r.jsxs("div",{className:"relative",children:[r.jsx("div",{className:"absolute top-0 right-0",children:r.jsx("button",{onClick:function(e){e.preventDefault(),T(!1)},children:"close"})}),r.jsx("div",{children:r.jsx(c.TableFilterForm,{cols:x})})]})})})}),0===j.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:x.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),j.map((function(t){var s;return r.jsx("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(s=j[0])||void 0===s?void 0:s.onClick)?"hover:cursor-pointer":""),onClick:t.onClick,"data-testid":t.id,children:x.map((function(s){return r.jsx(l.TableCell,e.__assign({},s,{columnKey:s.key,currentRecord:t,children:t[s.key]}))}))},t.id)}))]})]})}),r.jsxs("div",{className:"mt-1",children:[r.jsxs("p",{className:"text-center text-sm text-gray-600",children:[y+1," - ",g<m?g:m," of ",m]}),r.jsx("div",{className:"mt-2",children:r.jsx(i.Pagenation,{count:f,current:b,jump:C,next:N,prev:k})})]})]})}module.exports=function(t){return r.jsx(o.TableFilterProvider,{children:r.jsx(d,e.__assign({},t))})};
 //# sourceMappingURL=base.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"cell.js","sources":["../../../../src/table/cell.tsx"],"sourcesContent":["import {\n  memo,\n  useEffect,\n  useRef,\n  useState,\n  forwardRef,\n  useCallback,\n} from \"react\";\nimport { DataObject, TCellEditingCondition } from \"./type\";\nimport { EditIcon } from \"./edit-icon\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsCell = {\n  currentRecord: DataObject;\n  columnKey: string;\n  children: string | number;\n} & TCellEditingCondition;\n\nconst CellInput = forwardRef(function CI<T extends string | number>(\n  props: {\n    value: T;\n    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;\n    reset: () => void;\n    endEditing: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  return (\n    <div className=\"flex justify-between gap-1 w-full items-center\">\n      <input\n        ref={ref}\n        className=\"w-full py-1 px-2\"\n        type=\"text\"\n        value={props.value}\n        onChange={props.onChange}\n        onBlur={props.onBlur}\n        onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {\n          e.preventDefault();\n          if (e.key === \"Enter\") {\n            (e.target as HTMLInputElement).blur();\n          } else if (e.key === \"Escape\") {\n            props.reset();\n            props.endEditing();\n          }\n        }}\n      />\n      <button\n        onMouseDown={(e) => {\n          e.preventDefault();\n          props.reset();\n          props.endEditing();\n        }}\n      >\n        <CancelIcon size={16} />\n      </button>\n    </div>\n  );\n});\n\nconst StringCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    onCellBlur: (\n      key: string,\n      value: string,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    constraints?: { maxLength?: number; minLength?: number; pattern?: string };\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  const [value, setValue] = useState(\n    props.currentRecord[props.columnKey] as string\n  );\n\n  const validate = () => {\n    if (props.constraints?.maxLength) {\n      if (value.length > props.constraints.maxLength) {\n        alert(\n          `最大文字数(${props.constraints.maxLength})を超過しています。(現在${value.length}文字)`\n        );\n        return false;\n      }\n    }\n    if (props.constraints?.minLength) {\n      if (value.length < props.constraints.minLength) {\n        alert(\n          `最小文字数(${props.constraints.minLength})を下回っています。(現在${value.length}文字)`\n        );\n        return false;\n      }\n    }\n    if (props.constraints?.pattern) {\n      if (!new RegExp(props.constraints.pattern).test(value)) {\n        alert(`パターンに一致しません。(パターン${props.constraints.pattern})`);\n        return false;\n      }\n    }\n    return true;\n  };\n\n  return (\n    <CellInput\n      ref={ref}\n      value={value}\n      onChange={(e) => {\n        e.preventDefault();\n        setValue(e.target.value);\n      }}\n      onBlur={(e) => {\n        e.preventDefault();\n\n        if (value === props.currentRecord[props.columnKey]) {\n          props.compEditing();\n          return;\n        }\n\n        if (!validate()) {\n          setTimeout(() => {\n            e.target.focus();\n          }, 100);\n          return;\n        }\n\n        props.onCellBlur(\n          props.columnKey,\n          value,\n          props.currentRecord,\n          props.compEditing\n        );\n\n        props.setOccurredOnCellBlur();\n      }}\n      reset={() => setValue(props.currentRecord[props.columnKey])}\n      endEditing={props.compEditing}\n    />\n  );\n});\n\nconst NumberCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    onCellBlur: (\n      key: string,\n      value: number,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    constraints?: { max?: number; min?: number };\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  const [value, setValue] = useState(\n    (props.currentRecord[props.columnKey] as number).toString()\n  );\n\n  const validate = () => {\n    const v = parseInt(value);\n\n    if (props.constraints?.max) {\n      if (v > props.constraints.max) {\n        alert(\n          `最大値(${props.constraints.max})を超過しています。(入力値:${v})`\n        );\n        return false;\n      }\n    }\n\n    if (props.constraints?.min) {\n      if (v < props.constraints.min) {\n        alert(\n          `最小値(${props.constraints.min})を下回っています。(入力値:${v})`\n        );\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  return (\n    <CellInput\n      ref={ref}\n      value={value}\n      onChange={(e) => {\n        e.preventDefault();\n\n        if (e.target.value === \"\") {\n          setValue(\"0\");\n          return;\n        }\n\n        if (e.target.value === \"-\" || e.target.value === \"0-\") {\n          setValue(\"-0\");\n          return;\n        }\n\n        if (e.target.value.match(/^-?[0-9]+\\.$/)) {\n          setValue(e.target.value);\n          return;\n        }\n\n        if (isNaN(Number(e.target.value))) {\n          return;\n        }\n\n        setValue(Number(e.target.value).toString());\n      }}\n      onBlur={(e) => {\n        e.preventDefault();\n\n        if (Number(value) === props.currentRecord[props.columnKey]) {\n          props.compEditing();\n          return;\n        }\n\n        if (!validate()) {\n          setTimeout(() => {\n            e.target.focus();\n          }, 100);\n          return;\n        }\n\n        props.onCellBlur(\n          props.columnKey,\n          Number(value),\n          props.currentRecord,\n          props.compEditing\n        );\n\n        props.setOccurredOnCellBlur();\n      }}\n      reset={() =>\n        setValue((props.currentRecord[props.columnKey] as number).toString())\n      }\n      endEditing={props.compEditing}\n    />\n  );\n});\n\nconst SelectCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    options: { value: string; label: string }[];\n    allowEmpty?: boolean;\n    onCellBlur: (\n      key: string,\n      value: string,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLSelectElement>\n) {\n  const [value, setValue] = useState(\n    props.currentRecord[props.columnKey] as string\n  );\n\n  return (\n    <div className=\"flex justify-between gap-1 w-full items-center\">\n      <select\n        ref={ref}\n        className=\"w-full py-1 px-2\"\n        value={value}\n        onChange={(e) => {\n          e.preventDefault();\n          setValue(e.target.value);\n        }}\n        onBlur={(e) => {\n          e.preventDefault();\n\n          props.onCellBlur(\n            props.columnKey,\n            value,\n            props.currentRecord,\n            props.compEditing\n          );\n\n          props.setOccurredOnCellBlur();\n        }}\n        onKeyDown={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n          }\n        }}\n        onKeyUp={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n          e.preventDefault();\n          if (e.key === \"Enter\") {\n            (e.target as HTMLSelectElement).blur();\n          } else if (e.key === \"Escape\") {\n            setValue(props.currentRecord[props.columnKey] as string);\n            props.compEditing();\n          }\n        }}\n      >\n        {props.allowEmpty && (\n          <option key=\"TEPPEN/ReactUI Empty Option\" value=\"\">\n            {props.currentRecord[props.columnKey] == \"\"\n              ? \"-- 未選択 --\"\n              : \"-- 選択解除 --\"}\n          </option>\n        )}\n        {props.options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n      <button\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setValue(props.currentRecord[props.columnKey] as string);\n          props.compEditing();\n        }}\n      >\n        <CancelIcon size={16} />\n      </button>\n    </div>\n  );\n});\n\nexport const TableCell = memo(function TC(props: TPropsCell) {\n  const [isEditing, setIsEditing] = useState(false);\n  const ref = useRef<HTMLElement>(null);\n  const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n  const compEditing = useCallback(() => {\n    setIsEditing(false);\n  }, [setIsEditing]);\n\n  useEffect(() => {\n    if (isEditing) {\n      ref.current?.focus();\n    }\n    setOccurredOnCellBlur(false);\n  }, [isEditing, occurredOnCellBlur]);\n\n  return (\n    <td>\n      <div className=\"relative\">\n        <div\n          className={`flex items-center gap-3 w-fit p-2 cursor-default ${\n            isEditing ? \"opacity-0\" : \"\"\n          }`}\n          onClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n        >\n          <div\n            onDoubleClick={(e) => {\n              e.preventDefault();\n              if (props.editable) {\n                setIsEditing(true);\n              }\n            }}\n          >\n            <p className=\"text-left\">\n              {props.type === \"select\"\n                ? props.options.find((op) => op.value === props.children)?.label\n                : props.children}\n            </p>\n          </div>\n          {props.editable && (\n            <button\n              className=\"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200\"\n              onClick={(e) => {\n                e.preventDefault();\n                if (props.editable) {\n                  setIsEditing(true);\n                }\n              }}\n            >\n              <EditIcon size={12} />\n            </button>\n          )}\n        </div>\n        {props.editable && isEditing && (\n          <div\n            className=\"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2\"\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n          >\n            {props.type === \"string\" && (\n              <StringCellInput\n                ref={ref as React.RefObject<HTMLInputElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                onCellBlur={props.onCellBlur}\n                constraints={props.constraints}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n            {props.type === \"number\" && (\n              <NumberCellInput\n                ref={ref as React.RefObject<HTMLInputElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                onCellBlur={props.onCellBlur}\n                constraints={props.constraints}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n            {props.type === \"select\" && (\n              <SelectCellInput\n                ref={ref as React.RefObject<HTMLSelectElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                options={props.options}\n                allowEmpty={props.allowEmpty}\n                onCellBlur={props.onCellBlur}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    </td>\n  );\n});\n"],"names":["CellInput","forwardRef","props","ref","_jsxs","jsxs","className","children","_jsx","type","value","onChange","onBlur","onKeyUp","e","preventDefault","key","target","blur","reset","endEditing","onMouseDown","CancelIcon","size","StringCellInput","_a","useState","currentRecord","columnKey","setValue","jsx","constraints","maxLength","length","alert","concat","_b","minLength","_c","pattern","RegExp","test","validate","setTimeout","focus","onCellBlur","compEditing","setOccurredOnCellBlur","NumberCellInput","toString","match","isNaN","Number","v","parseInt","max","min","SelectCellInput","onKeyDown","allowEmpty","options","map","option","label","TableCell","memo","isEditing","setIsEditing","useRef","occurredOnCellBlur","useCallback","useEffect","current","onClick","stopPropagation","onDoubleClick","editable","find","op","EditIcon"],"mappings":"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"}
+{"version":3,"file":"cell.js","sources":["../../../../src/table/cell.tsx"],"sourcesContent":["import {\n  memo,\n  useEffect,\n  useRef,\n  useState,\n  forwardRef,\n  useCallback,\n} from \"react\";\nimport { DataObject, TCellEditingCondition } from \"./type\";\nimport { EditIcon } from \"./edit-icon\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsCell = {\n  currentRecord: DataObject;\n  columnKey: string;\n  children: string | number;\n} & TCellEditingCondition;\n\nconst CellInput = forwardRef(function CI<T extends string | number>(\n  props: {\n    value: T;\n    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;\n    reset: () => void;\n    endEditing: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  return (\n    <div className=\"flex justify-between gap-1 w-full items-center\">\n      <input\n        ref={ref}\n        className=\"w-full py-1 px-2\"\n        type=\"text\"\n        value={props.value}\n        onChange={props.onChange}\n        onBlur={props.onBlur}\n        onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {\n          e.preventDefault();\n          if (e.key === \"Enter\") {\n            (e.target as HTMLInputElement).blur();\n          } else if (e.key === \"Escape\") {\n            props.reset();\n            props.endEditing();\n          }\n        }}\n      />\n      <button\n        onMouseDown={(e) => {\n          e.preventDefault();\n          props.reset();\n          props.endEditing();\n        }}\n      >\n        <CancelIcon size={16} />\n      </button>\n    </div>\n  );\n});\n\nconst StringCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    onCellBlur: (\n      key: string,\n      value: string,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    constraints?: { maxLength?: number; minLength?: number; pattern?: string };\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  const [value, setValue] = useState(\n    props.currentRecord[props.columnKey] as string\n  );\n\n  const validate = () => {\n    if (props.constraints?.maxLength) {\n      if (value.length > props.constraints.maxLength) {\n        alert(\n          `最大文字数(${props.constraints.maxLength})を超過しています。(現在${value.length}文字)`\n        );\n        return false;\n      }\n    }\n    if (props.constraints?.minLength) {\n      if (value.length < props.constraints.minLength) {\n        alert(\n          `最小文字数(${props.constraints.minLength})を下回っています。(現在${value.length}文字)`\n        );\n        return false;\n      }\n    }\n    if (props.constraints?.pattern) {\n      if (!new RegExp(props.constraints.pattern).test(value)) {\n        alert(`パターンに一致しません。(パターン${props.constraints.pattern})`);\n        return false;\n      }\n    }\n    return true;\n  };\n\n  return (\n    <CellInput\n      ref={ref}\n      value={value}\n      onChange={(e) => {\n        e.preventDefault();\n        setValue(e.target.value);\n      }}\n      onBlur={(e) => {\n        e.preventDefault();\n\n        if (value === props.currentRecord[props.columnKey]) {\n          props.compEditing();\n          return;\n        }\n\n        if (!validate()) {\n          setTimeout(() => {\n            e.target.focus();\n          }, 100);\n          return;\n        }\n\n        props.onCellBlur(\n          props.columnKey,\n          value,\n          props.currentRecord,\n          props.compEditing\n        );\n\n        props.setOccurredOnCellBlur();\n      }}\n      reset={() => setValue(props.currentRecord[props.columnKey])}\n      endEditing={props.compEditing}\n    />\n  );\n});\n\nconst NumberCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    onCellBlur: (\n      key: string,\n      value: number,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    constraints?: { max?: number; min?: number };\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  const [value, setValue] = useState(\n    (props.currentRecord[props.columnKey] as number).toString()\n  );\n\n  const validate = () => {\n    const v = parseInt(value);\n\n    if (props.constraints?.max) {\n      if (v > props.constraints.max) {\n        alert(\n          `最大値(${props.constraints.max})を超過しています。(入力値:${v})`\n        );\n        return false;\n      }\n    }\n\n    if (props.constraints?.min) {\n      if (v < props.constraints.min) {\n        alert(\n          `最小値(${props.constraints.min})を下回っています。(入力値:${v})`\n        );\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  return (\n    <CellInput\n      ref={ref}\n      value={value}\n      onChange={(e) => {\n        e.preventDefault();\n\n        if (e.target.value === \"\") {\n          setValue(\"0\");\n          return;\n        }\n\n        if (e.target.value === \"-\" || e.target.value === \"0-\") {\n          setValue(\"-0\");\n          return;\n        }\n\n        if (e.target.value.match(/^-?[0-9]+\\.$/)) {\n          setValue(e.target.value);\n          return;\n        }\n\n        if (isNaN(Number(e.target.value))) {\n          return;\n        }\n\n        setValue(Number(e.target.value).toString());\n      }}\n      onBlur={(e) => {\n        e.preventDefault();\n\n        if (Number(value) === props.currentRecord[props.columnKey]) {\n          props.compEditing();\n          return;\n        }\n\n        if (!validate()) {\n          setTimeout(() => {\n            e.target.focus();\n          }, 100);\n          return;\n        }\n\n        props.onCellBlur(\n          props.columnKey,\n          Number(value),\n          props.currentRecord,\n          props.compEditing\n        );\n\n        props.setOccurredOnCellBlur();\n      }}\n      reset={() =>\n        setValue((props.currentRecord[props.columnKey] as number).toString())\n      }\n      endEditing={props.compEditing}\n    />\n  );\n});\n\nconst SelectCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    options: { value: string; label: string }[];\n    allowEmpty?: boolean;\n    onCellBlur: (\n      key: string,\n      value: string,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLSelectElement>\n) {\n  const [value, setValue] = useState(\n    props.currentRecord[props.columnKey] as string\n  );\n\n  return (\n    <div className=\"flex justify-between gap-1 w-full items-center\">\n      <select\n        ref={ref}\n        className=\"w-full py-1 px-2\"\n        value={value}\n        onChange={(e) => {\n          e.preventDefault();\n          setValue(e.target.value);\n        }}\n        onBlur={(e) => {\n          e.preventDefault();\n\n          props.onCellBlur(\n            props.columnKey,\n            value,\n            props.currentRecord,\n            props.compEditing\n          );\n\n          props.setOccurredOnCellBlur();\n        }}\n        onKeyDown={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n          }\n        }}\n        onKeyUp={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n          e.preventDefault();\n          if (e.key === \"Enter\") {\n            (e.target as HTMLSelectElement).blur();\n          } else if (e.key === \"Escape\") {\n            setValue(props.currentRecord[props.columnKey] as string);\n            props.compEditing();\n          }\n        }}\n      >\n        {props.allowEmpty && (\n          <option key=\"TEPPEN/ReactUI Empty Option\" value=\"\">\n            {props.currentRecord[props.columnKey] == \"\"\n              ? \"-- 未選択 --\"\n              : \"-- 選択解除 --\"}\n          </option>\n        )}\n        {props.options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n      <button\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setValue(props.currentRecord[props.columnKey] as string);\n          props.compEditing();\n        }}\n      >\n        <CancelIcon size={16} />\n      </button>\n    </div>\n  );\n});\n\nexport const TableCell = memo(function TC(props: TPropsCell) {\n  const [isEditing, setIsEditing] = useState(false);\n  const ref = useRef<HTMLElement>(null);\n  const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n  const compEditing = useCallback(() => {\n    setIsEditing(false);\n  }, [setIsEditing]);\n\n  useEffect(() => {\n    if (isEditing) {\n      ref.current?.focus();\n    }\n    setOccurredOnCellBlur(false);\n  }, [isEditing, occurredOnCellBlur]);\n\n  return (\n    <td>\n      <div className=\"relative\">\n        <div\n          className={`flex items-center gap-3 w-fit p-2 cursor-default ${\n            isEditing ? \"opacity-0\" : \"\"\n          }`}\n          onClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n        >\n          {props.type === \"component\" ? (\n            props.children\n          ) : (\n            <div\n              onDoubleClick={(e) => {\n                e.preventDefault();\n                if (props.editable) {\n                  setIsEditing(true);\n                }\n              }}\n            >\n              <p className=\"text-left\">\n                {props.type === \"select\"\n                  ? props.options.find((op) => op.value === props.children)\n                      ?.label\n                  : props.children}\n              </p>\n            </div>\n          )}\n\n          {props.editable && (\n            <button\n              className=\"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200\"\n              onClick={(e) => {\n                e.preventDefault();\n                if (props.editable) {\n                  setIsEditing(true);\n                }\n              }}\n            >\n              <EditIcon size={12} />\n            </button>\n          )}\n        </div>\n        {props.editable && isEditing && (\n          <div\n            className=\"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2\"\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n          >\n            {props.type === \"string\" && (\n              <StringCellInput\n                ref={ref as React.RefObject<HTMLInputElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                onCellBlur={props.onCellBlur}\n                constraints={props.constraints}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n            {props.type === \"number\" && (\n              <NumberCellInput\n                ref={ref as React.RefObject<HTMLInputElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                onCellBlur={props.onCellBlur}\n                constraints={props.constraints}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n            {props.type === \"select\" && (\n              <SelectCellInput\n                ref={ref as React.RefObject<HTMLSelectElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                options={props.options}\n                allowEmpty={props.allowEmpty}\n                onCellBlur={props.onCellBlur}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    </td>\n  );\n});\n"],"names":["CellInput","forwardRef","props","ref","_jsxs","jsxs","className","children","_jsx","type","value","onChange","onBlur","onKeyUp","e","preventDefault","key","target","blur","reset","endEditing","onMouseDown","CancelIcon","size","StringCellInput","_a","useState","currentRecord","columnKey","setValue","jsx","constraints","maxLength","length","alert","concat","_b","minLength","_c","pattern","RegExp","test","validate","setTimeout","focus","onCellBlur","compEditing","setOccurredOnCellBlur","NumberCellInput","toString","match","isNaN","Number","v","parseInt","max","min","SelectCellInput","onKeyDown","allowEmpty","options","map","option","label","TableCell","memo","isEditing","setIsEditing","useRef","occurredOnCellBlur","useCallback","useEffect","current","onClick","stopPropagation","onDoubleClick","editable","find","op","EditIcon"],"mappings":"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"}

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:[e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[80%] min-w-20",children:t.label})}),t.label&&t.columnType&&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");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]})]})};
 //# 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  columnType?: 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      <div className=\"px-2\">\n        <p className=\"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[80%] min-w-20\">\n          {props.label}\n        </p>\n      </div>\n\n      {props.label && props.columnType && (\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","jsxs","className","_jsx","children","label","columnType","filterComponent","sortConponent"],"mappings":"2EAOM,SAA6BA,GACjC,OACEC,EAAIC,KAAA,KAAA,CAAAC,UAAW,wDACbC,EAAAA,IAAK,MAAA,CAAAD,UAAU,OACbE,SAAAD,EAAAA,IAAA,IAAA,CAAGD,UAAU,iFACVE,SAAAL,EAAMM,UAIVN,EAAMM,OAASN,EAAMO,YACpBN,EAAAC,KAAA,MAAA,CAAKC,UAAU,oEAAmEE,SAAA,CAC/EL,EAAMQ,iBAAmBR,EAAMQ,gBAC/BR,EAAMS,eAAiBT,EAAMS,mBAKxC"}
+{"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"}

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

@@ -1,3 +1,3 @@
 "use client";
-import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{useTable as l}from"./hook.js";import{TableCell as o}from"./cell.js";import{Sort as n}from"./sort.js";import{TableHeaderElement as i}from"./header.js";import{Pagenation as c}from"./page.js";import{TableFilterProvider as a,TableFilterRemoveButton as d,TableFilter as s}from"./filter.js";import{useState as m}from"react";import{TableFilterForm as u}from"./filter-form.js";function f(t){return r(a,{children:r(h,e({},t))})}function h(a){var f=l(a),h=f.cols,p=f.rows,v=f.rowCount,y=f.sortKey,b=f.sortOrder,N=f.page,g=N.count,k=N.current,x=N.from,j=N.to,C=N.next,w=N.prev,D=N.jump,O=m(!1),S=O[0],T=O[1];return t("div",{className:"w-full",children:[r("div",{className:"flex justify-end",children:r(d,{children:"remove all filters"})}),r("div",{className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:t("table",{className:"table table-auto w-full",children:[r("thead",{children:r("tr",{className:"sticky top-0 border-gray-200 z-20",children:h.map((function(e){return r(i,{label:e.label,columnType:e.type,sortConponent:r(n,{onClick:e.onClick,isSortedByThis:y===e.key,sortOrder:b}),filterComponent:r(s,{keyName:e.key,onClick:function(e){e.preventDefault(),T((function(e){return!e}))}})},e.key)}))})}),t("tbody",{children:[S&&r("tr",{children:r("td",{colSpan:h.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl py-5 px-2 z-20",children:r("div",{className:"container max-w-[768px] mx-auto",children:t("div",{className:"relative",children:[r("div",{className:"absolute top-0 right-0",children:r("button",{onClick:function(e){e.preventDefault(),T(!1)},children:"close"})}),r("div",{children:r(u,{cols:h})})]})})})}),0===p.length&&r("tr",{children:r("td",{colSpan:h.length,className:"py-5",children:r("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),p.map((function(t){var l;return r("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(l=p[0])||void 0===l?void 0:l.onClick)?"hover:cursor-pointer":""),onClick:t.onClick,"data-testid":t.id,children:h.map((function(l){return r(o,e({},l,{columnKey:l.key,currentRecord:t,children:t[l.key]}))}))},t.id)}))]})]})}),t("div",{className:"mt-1",children:[t("p",{className:"text-center text-sm text-gray-600",children:[x+1," - ",j<v?j:v," of ",v]}),r("div",{className:"mt-2",children:r(c,{count:g,current:k,jump:D,next:C,prev:w})})]})]})}export{f as default};
+import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{useTable as o}from"./hook.js";import{TableCell as l}from"./cell.js";import{Sort as n}from"./sort.js";import{TableHeaderElement as i}from"./header.js";import{Pagenation as c}from"./page.js";import{TableFilterProvider as a,TableFilterRemoveButton as d,TableFilter as s}from"./filter.js";import{useState as m}from"react";import{TableFilterForm as u}from"./filter-form.js";function p(t){return r(a,{children:r(f,e({},t))})}function f(a){var p=o(a),f=p.cols,h=p.rows,v=p.rowCount,y=p.sortKey,b=p.sortOrder,N=p.page,g=N.count,k=N.current,x=N.from,j=N.to,C=N.next,w=N.prev,D=N.jump,O=m(!1),S=O[0],z=O[1];return t("div",{className:"w-full",children:[r("div",{className:"flex justify-end",children:r(d,{children:"remove all filters"})}),r("div",{className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:t("table",{className:"table table-auto w-full",children:[r("thead",{children:r("tr",{className:"sticky top-0 border-gray-200 z-20",children:f.map((function(e){return r(i,{label:e.label,sortConponent:"component"!==e.type?r(n,{onClick:e.onClick,isSortedByThis:y===e.key,sortOrder:b}):void 0,filterComponent:"component"!==e.type?r(s,{keyName:e.key,onClick:function(e){e.preventDefault(),z((function(e){return!e}))}}):void 0},e.key)}))})}),t("tbody",{children:[S&&r("tr",{children:r("td",{colSpan:f.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl py-5 px-2 z-20",children:r("div",{className:"container max-w-[768px] mx-auto",children:t("div",{className:"relative",children:[r("div",{className:"absolute top-0 right-0",children:r("button",{onClick:function(e){e.preventDefault(),z(!1)},children:"close"})}),r("div",{children:r(u,{cols:f})})]})})})}),0===h.length&&r("tr",{children:r("td",{colSpan:f.length,className:"py-5",children:r("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),h.map((function(t){var o;return r("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(o=h[0])||void 0===o?void 0:o.onClick)?"hover:cursor-pointer":""),onClick:t.onClick,"data-testid":t.id,children:f.map((function(o){return r(l,e({},o,{columnKey:o.key,currentRecord:t,children:t[o.key]}))}))},t.id)}))]})]})}),t("div",{className:"mt-1",children:[t("p",{className:"text-center text-sm text-gray-600",children:[x+1," - ",j<v?j:v," of ",v]}),r("div",{className:"mt-2",children:r(c,{count:g,current:k,jump:D,next:C,prev:w})})]})]})}export{p as default};
 //# sourceMappingURL=base.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"cell.js","sources":["../../../../src/table/cell.tsx"],"sourcesContent":["import {\n  memo,\n  useEffect,\n  useRef,\n  useState,\n  forwardRef,\n  useCallback,\n} from \"react\";\nimport { DataObject, TCellEditingCondition } from \"./type\";\nimport { EditIcon } from \"./edit-icon\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsCell = {\n  currentRecord: DataObject;\n  columnKey: string;\n  children: string | number;\n} & TCellEditingCondition;\n\nconst CellInput = forwardRef(function CI<T extends string | number>(\n  props: {\n    value: T;\n    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;\n    reset: () => void;\n    endEditing: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  return (\n    <div className=\"flex justify-between gap-1 w-full items-center\">\n      <input\n        ref={ref}\n        className=\"w-full py-1 px-2\"\n        type=\"text\"\n        value={props.value}\n        onChange={props.onChange}\n        onBlur={props.onBlur}\n        onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {\n          e.preventDefault();\n          if (e.key === \"Enter\") {\n            (e.target as HTMLInputElement).blur();\n          } else if (e.key === \"Escape\") {\n            props.reset();\n            props.endEditing();\n          }\n        }}\n      />\n      <button\n        onMouseDown={(e) => {\n          e.preventDefault();\n          props.reset();\n          props.endEditing();\n        }}\n      >\n        <CancelIcon size={16} />\n      </button>\n    </div>\n  );\n});\n\nconst StringCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    onCellBlur: (\n      key: string,\n      value: string,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    constraints?: { maxLength?: number; minLength?: number; pattern?: string };\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  const [value, setValue] = useState(\n    props.currentRecord[props.columnKey] as string\n  );\n\n  const validate = () => {\n    if (props.constraints?.maxLength) {\n      if (value.length > props.constraints.maxLength) {\n        alert(\n          `最大文字数(${props.constraints.maxLength})を超過しています。(現在${value.length}文字)`\n        );\n        return false;\n      }\n    }\n    if (props.constraints?.minLength) {\n      if (value.length < props.constraints.minLength) {\n        alert(\n          `最小文字数(${props.constraints.minLength})を下回っています。(現在${value.length}文字)`\n        );\n        return false;\n      }\n    }\n    if (props.constraints?.pattern) {\n      if (!new RegExp(props.constraints.pattern).test(value)) {\n        alert(`パターンに一致しません。(パターン${props.constraints.pattern})`);\n        return false;\n      }\n    }\n    return true;\n  };\n\n  return (\n    <CellInput\n      ref={ref}\n      value={value}\n      onChange={(e) => {\n        e.preventDefault();\n        setValue(e.target.value);\n      }}\n      onBlur={(e) => {\n        e.preventDefault();\n\n        if (value === props.currentRecord[props.columnKey]) {\n          props.compEditing();\n          return;\n        }\n\n        if (!validate()) {\n          setTimeout(() => {\n            e.target.focus();\n          }, 100);\n          return;\n        }\n\n        props.onCellBlur(\n          props.columnKey,\n          value,\n          props.currentRecord,\n          props.compEditing\n        );\n\n        props.setOccurredOnCellBlur();\n      }}\n      reset={() => setValue(props.currentRecord[props.columnKey])}\n      endEditing={props.compEditing}\n    />\n  );\n});\n\nconst NumberCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    onCellBlur: (\n      key: string,\n      value: number,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    constraints?: { max?: number; min?: number };\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  const [value, setValue] = useState(\n    (props.currentRecord[props.columnKey] as number).toString()\n  );\n\n  const validate = () => {\n    const v = parseInt(value);\n\n    if (props.constraints?.max) {\n      if (v > props.constraints.max) {\n        alert(\n          `最大値(${props.constraints.max})を超過しています。(入力値:${v})`\n        );\n        return false;\n      }\n    }\n\n    if (props.constraints?.min) {\n      if (v < props.constraints.min) {\n        alert(\n          `最小値(${props.constraints.min})を下回っています。(入力値:${v})`\n        );\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  return (\n    <CellInput\n      ref={ref}\n      value={value}\n      onChange={(e) => {\n        e.preventDefault();\n\n        if (e.target.value === \"\") {\n          setValue(\"0\");\n          return;\n        }\n\n        if (e.target.value === \"-\" || e.target.value === \"0-\") {\n          setValue(\"-0\");\n          return;\n        }\n\n        if (e.target.value.match(/^-?[0-9]+\\.$/)) {\n          setValue(e.target.value);\n          return;\n        }\n\n        if (isNaN(Number(e.target.value))) {\n          return;\n        }\n\n        setValue(Number(e.target.value).toString());\n      }}\n      onBlur={(e) => {\n        e.preventDefault();\n\n        if (Number(value) === props.currentRecord[props.columnKey]) {\n          props.compEditing();\n          return;\n        }\n\n        if (!validate()) {\n          setTimeout(() => {\n            e.target.focus();\n          }, 100);\n          return;\n        }\n\n        props.onCellBlur(\n          props.columnKey,\n          Number(value),\n          props.currentRecord,\n          props.compEditing\n        );\n\n        props.setOccurredOnCellBlur();\n      }}\n      reset={() =>\n        setValue((props.currentRecord[props.columnKey] as number).toString())\n      }\n      endEditing={props.compEditing}\n    />\n  );\n});\n\nconst SelectCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    options: { value: string; label: string }[];\n    allowEmpty?: boolean;\n    onCellBlur: (\n      key: string,\n      value: string,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLSelectElement>\n) {\n  const [value, setValue] = useState(\n    props.currentRecord[props.columnKey] as string\n  );\n\n  return (\n    <div className=\"flex justify-between gap-1 w-full items-center\">\n      <select\n        ref={ref}\n        className=\"w-full py-1 px-2\"\n        value={value}\n        onChange={(e) => {\n          e.preventDefault();\n          setValue(e.target.value);\n        }}\n        onBlur={(e) => {\n          e.preventDefault();\n\n          props.onCellBlur(\n            props.columnKey,\n            value,\n            props.currentRecord,\n            props.compEditing\n          );\n\n          props.setOccurredOnCellBlur();\n        }}\n        onKeyDown={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n          }\n        }}\n        onKeyUp={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n          e.preventDefault();\n          if (e.key === \"Enter\") {\n            (e.target as HTMLSelectElement).blur();\n          } else if (e.key === \"Escape\") {\n            setValue(props.currentRecord[props.columnKey] as string);\n            props.compEditing();\n          }\n        }}\n      >\n        {props.allowEmpty && (\n          <option key=\"TEPPEN/ReactUI Empty Option\" value=\"\">\n            {props.currentRecord[props.columnKey] == \"\"\n              ? \"-- 未選択 --\"\n              : \"-- 選択解除 --\"}\n          </option>\n        )}\n        {props.options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n      <button\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setValue(props.currentRecord[props.columnKey] as string);\n          props.compEditing();\n        }}\n      >\n        <CancelIcon size={16} />\n      </button>\n    </div>\n  );\n});\n\nexport const TableCell = memo(function TC(props: TPropsCell) {\n  const [isEditing, setIsEditing] = useState(false);\n  const ref = useRef<HTMLElement>(null);\n  const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n  const compEditing = useCallback(() => {\n    setIsEditing(false);\n  }, [setIsEditing]);\n\n  useEffect(() => {\n    if (isEditing) {\n      ref.current?.focus();\n    }\n    setOccurredOnCellBlur(false);\n  }, [isEditing, occurredOnCellBlur]);\n\n  return (\n    <td>\n      <div className=\"relative\">\n        <div\n          className={`flex items-center gap-3 w-fit p-2 cursor-default ${\n            isEditing ? \"opacity-0\" : \"\"\n          }`}\n          onClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n        >\n          <div\n            onDoubleClick={(e) => {\n              e.preventDefault();\n              if (props.editable) {\n                setIsEditing(true);\n              }\n            }}\n          >\n            <p className=\"text-left\">\n              {props.type === \"select\"\n                ? props.options.find((op) => op.value === props.children)?.label\n                : props.children}\n            </p>\n          </div>\n          {props.editable && (\n            <button\n              className=\"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200\"\n              onClick={(e) => {\n                e.preventDefault();\n                if (props.editable) {\n                  setIsEditing(true);\n                }\n              }}\n            >\n              <EditIcon size={12} />\n            </button>\n          )}\n        </div>\n        {props.editable && isEditing && (\n          <div\n            className=\"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2\"\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n          >\n            {props.type === \"string\" && (\n              <StringCellInput\n                ref={ref as React.RefObject<HTMLInputElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                onCellBlur={props.onCellBlur}\n                constraints={props.constraints}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n            {props.type === \"number\" && (\n              <NumberCellInput\n                ref={ref as React.RefObject<HTMLInputElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                onCellBlur={props.onCellBlur}\n                constraints={props.constraints}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n            {props.type === \"select\" && (\n              <SelectCellInput\n                ref={ref as React.RefObject<HTMLSelectElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                options={props.options}\n                allowEmpty={props.allowEmpty}\n                onCellBlur={props.onCellBlur}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    </td>\n  );\n});\n"],"names":["CellInput","forwardRef","props","ref","_jsxs","className","children","_jsx","type","value","onChange","onBlur","onKeyUp","e","preventDefault","key","target","blur","reset","endEditing","onMouseDown","CancelIcon","size","StringCellInput","_a","useState","currentRecord","columnKey","setValue","constraints","maxLength","length","alert","concat","_b","minLength","_c","pattern","RegExp","test","validate","setTimeout","focus","onCellBlur","compEditing","setOccurredOnCellBlur","NumberCellInput","toString","match","isNaN","Number","v","parseInt","max","min","SelectCellInput","onKeyDown","allowEmpty","options","map","option","label","TableCell","memo","isEditing","setIsEditing","useRef","occurredOnCellBlur","useCallback","useEffect","current","onClick","stopPropagation","onDoubleClick","editable","find","op","EditIcon"],"mappings":"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"}
+{"version":3,"file":"cell.js","sources":["../../../../src/table/cell.tsx"],"sourcesContent":["import {\n  memo,\n  useEffect,\n  useRef,\n  useState,\n  forwardRef,\n  useCallback,\n} from \"react\";\nimport { DataObject, TCellEditingCondition } from \"./type\";\nimport { EditIcon } from \"./edit-icon\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsCell = {\n  currentRecord: DataObject;\n  columnKey: string;\n  children: string | number;\n} & TCellEditingCondition;\n\nconst CellInput = forwardRef(function CI<T extends string | number>(\n  props: {\n    value: T;\n    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;\n    reset: () => void;\n    endEditing: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  return (\n    <div className=\"flex justify-between gap-1 w-full items-center\">\n      <input\n        ref={ref}\n        className=\"w-full py-1 px-2\"\n        type=\"text\"\n        value={props.value}\n        onChange={props.onChange}\n        onBlur={props.onBlur}\n        onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {\n          e.preventDefault();\n          if (e.key === \"Enter\") {\n            (e.target as HTMLInputElement).blur();\n          } else if (e.key === \"Escape\") {\n            props.reset();\n            props.endEditing();\n          }\n        }}\n      />\n      <button\n        onMouseDown={(e) => {\n          e.preventDefault();\n          props.reset();\n          props.endEditing();\n        }}\n      >\n        <CancelIcon size={16} />\n      </button>\n    </div>\n  );\n});\n\nconst StringCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    onCellBlur: (\n      key: string,\n      value: string,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    constraints?: { maxLength?: number; minLength?: number; pattern?: string };\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  const [value, setValue] = useState(\n    props.currentRecord[props.columnKey] as string\n  );\n\n  const validate = () => {\n    if (props.constraints?.maxLength) {\n      if (value.length > props.constraints.maxLength) {\n        alert(\n          `最大文字数(${props.constraints.maxLength})を超過しています。(現在${value.length}文字)`\n        );\n        return false;\n      }\n    }\n    if (props.constraints?.minLength) {\n      if (value.length < props.constraints.minLength) {\n        alert(\n          `最小文字数(${props.constraints.minLength})を下回っています。(現在${value.length}文字)`\n        );\n        return false;\n      }\n    }\n    if (props.constraints?.pattern) {\n      if (!new RegExp(props.constraints.pattern).test(value)) {\n        alert(`パターンに一致しません。(パターン${props.constraints.pattern})`);\n        return false;\n      }\n    }\n    return true;\n  };\n\n  return (\n    <CellInput\n      ref={ref}\n      value={value}\n      onChange={(e) => {\n        e.preventDefault();\n        setValue(e.target.value);\n      }}\n      onBlur={(e) => {\n        e.preventDefault();\n\n        if (value === props.currentRecord[props.columnKey]) {\n          props.compEditing();\n          return;\n        }\n\n        if (!validate()) {\n          setTimeout(() => {\n            e.target.focus();\n          }, 100);\n          return;\n        }\n\n        props.onCellBlur(\n          props.columnKey,\n          value,\n          props.currentRecord,\n          props.compEditing\n        );\n\n        props.setOccurredOnCellBlur();\n      }}\n      reset={() => setValue(props.currentRecord[props.columnKey])}\n      endEditing={props.compEditing}\n    />\n  );\n});\n\nconst NumberCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    onCellBlur: (\n      key: string,\n      value: number,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    constraints?: { max?: number; min?: number };\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLInputElement>\n) {\n  const [value, setValue] = useState(\n    (props.currentRecord[props.columnKey] as number).toString()\n  );\n\n  const validate = () => {\n    const v = parseInt(value);\n\n    if (props.constraints?.max) {\n      if (v > props.constraints.max) {\n        alert(\n          `最大値(${props.constraints.max})を超過しています。(入力値:${v})`\n        );\n        return false;\n      }\n    }\n\n    if (props.constraints?.min) {\n      if (v < props.constraints.min) {\n        alert(\n          `最小値(${props.constraints.min})を下回っています。(入力値:${v})`\n        );\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  return (\n    <CellInput\n      ref={ref}\n      value={value}\n      onChange={(e) => {\n        e.preventDefault();\n\n        if (e.target.value === \"\") {\n          setValue(\"0\");\n          return;\n        }\n\n        if (e.target.value === \"-\" || e.target.value === \"0-\") {\n          setValue(\"-0\");\n          return;\n        }\n\n        if (e.target.value.match(/^-?[0-9]+\\.$/)) {\n          setValue(e.target.value);\n          return;\n        }\n\n        if (isNaN(Number(e.target.value))) {\n          return;\n        }\n\n        setValue(Number(e.target.value).toString());\n      }}\n      onBlur={(e) => {\n        e.preventDefault();\n\n        if (Number(value) === props.currentRecord[props.columnKey]) {\n          props.compEditing();\n          return;\n        }\n\n        if (!validate()) {\n          setTimeout(() => {\n            e.target.focus();\n          }, 100);\n          return;\n        }\n\n        props.onCellBlur(\n          props.columnKey,\n          Number(value),\n          props.currentRecord,\n          props.compEditing\n        );\n\n        props.setOccurredOnCellBlur();\n      }}\n      reset={() =>\n        setValue((props.currentRecord[props.columnKey] as number).toString())\n      }\n      endEditing={props.compEditing}\n    />\n  );\n});\n\nconst SelectCellInput = forwardRef(function SI(\n  props: {\n    columnKey: string;\n    currentRecord: DataObject;\n    compEditing: () => void;\n    options: { value: string; label: string }[];\n    allowEmpty?: boolean;\n    onCellBlur: (\n      key: string,\n      value: string,\n      current: DataObject,\n      completeEditing: () => void\n    ) => void;\n    setOccurredOnCellBlur: () => void;\n  },\n  ref: React.ForwardedRef<HTMLSelectElement>\n) {\n  const [value, setValue] = useState(\n    props.currentRecord[props.columnKey] as string\n  );\n\n  return (\n    <div className=\"flex justify-between gap-1 w-full items-center\">\n      <select\n        ref={ref}\n        className=\"w-full py-1 px-2\"\n        value={value}\n        onChange={(e) => {\n          e.preventDefault();\n          setValue(e.target.value);\n        }}\n        onBlur={(e) => {\n          e.preventDefault();\n\n          props.onCellBlur(\n            props.columnKey,\n            value,\n            props.currentRecord,\n            props.compEditing\n          );\n\n          props.setOccurredOnCellBlur();\n        }}\n        onKeyDown={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n          }\n        }}\n        onKeyUp={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n          e.preventDefault();\n          if (e.key === \"Enter\") {\n            (e.target as HTMLSelectElement).blur();\n          } else if (e.key === \"Escape\") {\n            setValue(props.currentRecord[props.columnKey] as string);\n            props.compEditing();\n          }\n        }}\n      >\n        {props.allowEmpty && (\n          <option key=\"TEPPEN/ReactUI Empty Option\" value=\"\">\n            {props.currentRecord[props.columnKey] == \"\"\n              ? \"-- 未選択 --\"\n              : \"-- 選択解除 --\"}\n          </option>\n        )}\n        {props.options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n      <button\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setValue(props.currentRecord[props.columnKey] as string);\n          props.compEditing();\n        }}\n      >\n        <CancelIcon size={16} />\n      </button>\n    </div>\n  );\n});\n\nexport const TableCell = memo(function TC(props: TPropsCell) {\n  const [isEditing, setIsEditing] = useState(false);\n  const ref = useRef<HTMLElement>(null);\n  const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n  const compEditing = useCallback(() => {\n    setIsEditing(false);\n  }, [setIsEditing]);\n\n  useEffect(() => {\n    if (isEditing) {\n      ref.current?.focus();\n    }\n    setOccurredOnCellBlur(false);\n  }, [isEditing, occurredOnCellBlur]);\n\n  return (\n    <td>\n      <div className=\"relative\">\n        <div\n          className={`flex items-center gap-3 w-fit p-2 cursor-default ${\n            isEditing ? \"opacity-0\" : \"\"\n          }`}\n          onClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n        >\n          {props.type === \"component\" ? (\n            props.children\n          ) : (\n            <div\n              onDoubleClick={(e) => {\n                e.preventDefault();\n                if (props.editable) {\n                  setIsEditing(true);\n                }\n              }}\n            >\n              <p className=\"text-left\">\n                {props.type === \"select\"\n                  ? props.options.find((op) => op.value === props.children)\n                      ?.label\n                  : props.children}\n              </p>\n            </div>\n          )}\n\n          {props.editable && (\n            <button\n              className=\"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200\"\n              onClick={(e) => {\n                e.preventDefault();\n                if (props.editable) {\n                  setIsEditing(true);\n                }\n              }}\n            >\n              <EditIcon size={12} />\n            </button>\n          )}\n        </div>\n        {props.editable && isEditing && (\n          <div\n            className=\"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2\"\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n          >\n            {props.type === \"string\" && (\n              <StringCellInput\n                ref={ref as React.RefObject<HTMLInputElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                onCellBlur={props.onCellBlur}\n                constraints={props.constraints}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n            {props.type === \"number\" && (\n              <NumberCellInput\n                ref={ref as React.RefObject<HTMLInputElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                onCellBlur={props.onCellBlur}\n                constraints={props.constraints}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n            {props.type === \"select\" && (\n              <SelectCellInput\n                ref={ref as React.RefObject<HTMLSelectElement>}\n                columnKey={props.columnKey}\n                currentRecord={props.currentRecord}\n                compEditing={compEditing}\n                options={props.options}\n                allowEmpty={props.allowEmpty}\n                onCellBlur={props.onCellBlur}\n                setOccurredOnCellBlur={() => {\n                  setOccurredOnCellBlur(true);\n                }}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    </td>\n  );\n});\n"],"names":["CellInput","forwardRef","props","ref","_jsxs","className","children","_jsx","type","value","onChange","onBlur","onKeyUp","e","preventDefault","key","target","blur","reset","endEditing","onMouseDown","CancelIcon","size","StringCellInput","_a","useState","currentRecord","columnKey","setValue","constraints","maxLength","length","alert","concat","_b","minLength","_c","pattern","RegExp","test","validate","setTimeout","focus","onCellBlur","compEditing","setOccurredOnCellBlur","NumberCellInput","toString","match","isNaN","Number","v","parseInt","max","min","SelectCellInput","onKeyDown","allowEmpty","options","map","option","label","TableCell","memo","isEditing","setIsEditing","useRef","occurredOnCellBlur","useCallback","useEffect","current","onClick","stopPropagation","onDoubleClick","editable","find","op","EditIcon"],"mappings":"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"}

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:[t("div",{className:"px-2",children:t("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[80%] min-w-20",children:n.label})}),n.label&&n.columnType&&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 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};
 //# 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  columnType?: 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      <div className=\"px-2\">\n        <p className=\"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[80%] min-w-20\">\n          {props.label}\n        </p>\n      </div>\n\n      {props.label && props.columnType && (\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","_jsx","children","label","columnType","filterComponent","sortConponent"],"mappings":"kDAOM,SAAUA,EAAmBC,GACjC,OACEC,EAAI,KAAA,CAAAC,UAAW,wDACbC,EAAK,MAAA,CAAAD,UAAU,OACbE,SAAAD,EAAA,IAAA,CAAGD,UAAU,iFACVE,SAAAJ,EAAMK,UAIVL,EAAMK,OAASL,EAAMM,YACpBL,EAAA,MAAA,CAAKC,UAAU,oEAAmEE,SAAA,CAC/EJ,EAAMO,iBAAmBP,EAAMO,gBAC/BP,EAAMQ,eAAiBR,EAAMQ,mBAKxC"}
+{"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"}

package/dist/index.d.ts

@@ -43,7 +43,11 @@ type TSelectCellEditingCondition = ({
     allowEmpty?: boolean;
     onCellBlur: (key: string, value: string, current: DataObject, completeEditing: () => void) => void;
 }));
-type TCellEditingCondition = TStringCellEditingCondition | TNumberCellEditingCondition | TSelectCellEditingCondition;
+type TComponentCellEditingCondition = {
+    type: "component";
+    editable?: false;
+};
+type TCellEditingCondition = TStringCellEditingCondition | TNumberCellEditingCondition | TSelectCellEditingCondition | TComponentCellEditingCondition;
 type TTableColumn = {
     key: string;
     label?: string;

package/package.json

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