@teppen/react-ui 1.0.0 → 1.1.0

package/README.md

@@ -1,4 +1,4 @@
-# React-UI (@teppen/)
+# React-UI
 
 This is a React component library that provides some useful UI elements for your web applications.
 
@@ -146,6 +146,13 @@ const App = () => {
         onClickRow={(row) => {
           alert(`Clicked row: (id: ${row.id})`);
         }}
+        applyRowFormatting={(row) => {
+          if (row.role === "1") {
+            return "bg-red-600 text-white";
+          } else {
+            return "";
+          }
+        }}
       />
     </div>
   );
@@ -227,12 +234,23 @@ type TInitialCondition = {
 
 ##### onClickRow
 
-In `onClickRow`, You may define the behavior when a row is clicked. This is optional.
+In `onClickRow`, you may define the behavior when a row is clicked. This is optional.
 
 ```ts
 type TOnClickRow = (row: DataObject) => void;
 ```
 
+##### applyRowFormatting
+
+In `applyRowFormatting`, depending on the status of each row, you can define the format of the row using TailwindCSS classes. In principle, TailwindCSS classes other than background and text color are not guaranteed to work, but any class can be specified.
+
+```ts
+/**
+ * The return value is a string of one TailwindCSS class or multiple TailwindCSS classes separated by spaces.
+ */
+type TApplyRowFormatting = (row: DataObject) => string;
+```
+
 ## License
 
 This library is licensed under MIT license. See LICENSE file for more information.

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

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

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

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

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

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

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

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

package/dist/index.d.ts

@@ -50,6 +50,7 @@ type TTableColumn = {
     key: string;
     label?: string;
 } & TCellEditingCondition;
+type TailwindCssStyle = string;
 type TPropsTable = {
     cols: TTableColumn[];
     rows: DataObject[];
@@ -60,6 +61,7 @@ type TPropsTable = {
             asc?: boolean;
         };
     };
+    applyRowFormatting?: (row: DataObject) => TailwindCssStyle;
 };
 
 declare function Table(props: TPropsTable): react_jsx_runtime.JSX.Element;

package/package.json

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