@teppen/react-ui 0.2.0 → 0.4.0

package/README.md

@@ -47,7 +47,7 @@ module.exports = {
 
 To use this library, you need to import the components you want to use and render them in your React application.
 
-For example, to use the Button component, you can do something like this:
+For example, to use the Table component, you can do something like this:
 
 ```tsx
 import React from "react";
@@ -58,14 +58,15 @@ const App = () => {
     <div>
       <Table
         rows={[
-          { id: "1", name: "Taro" },
-          { id: "2", name: "Yoshiko" },
-          { id: "3", name: "Koki" },
-          { id: "4", name: "Chisato" },
+          { id: "1", name: "Taro", age: 30 },
+          { id: "2", name: "Yoshiko", age: 60 },
+          { id: "3", name: "Koki", age: 13 },
+          { id: "4", name: "Chisato", age: 34 },
         ]}
         cols={[
-          { key: "id", label: "ID" },
-          { key: "name", label: "名前" },
+          { key: "id", label: "ID", type: "数値" },
+          { key: "name", label: "名前", type: "文字列" },
+          { key: "age", label: "年齢", type: "数値" },
         ]}
       />
     </div>
@@ -75,6 +76,44 @@ const App = () => {
 export default App;
 ```
 
+### Table Component
+
+A component that displays a table based on the row and column information passed as arguments. The table component has the following features:
+
+- Pagination function
+- Filtering function (only when `label` and `type` are set in the column information)
+- Sorting function (only when `label` and `type` are set in the column information)
+
+#### Arguments
+
+The table component only accepts the arguments `rows` and `cols`. Details for each argument are described below.
+
+##### rows
+
+`rows` is an array of the following associative array (`DataObject`). Only id is required and it must be unique within the array. If onClick is set, it is possible to define the behavior when a row is clicked.
+
+```ts
+export type DataObject = {
+  [key: string]: any;
+  id: number | string;
+  onClick?: React.MouseEventHandler<HTMLTableRowElement>;
+};
+```
+
+##### cols
+
+In `cols`, you specify the data to be displayed in the table from left to right. The `key` here needs to match the key name in each element of rows. However, it is not necessary to always include the key `id`. `label` and `type` are optional, but they are required for some functions, so it is recommended to set them.
+
+```ts
+export type TColumnType = "string" | "number";
+
+export type TTableColumn = { key: string; label?: string; type?: TColumnType };
+```
+
 ## 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("react/jsx-runtime"),r=require("./hook.js"),o=require("./cell.js"),l=require("./sort.js"),s=require("./header.js");module.exports=function(t){var d=r.useTable(t),n=d.cols,a=d.rows,i=d.sortKey,c=d.sortOrder;return e.jsx("div",{className:"w-full border border-gray-200 rounded-md overflow-hidden",children:e.jsxs("table",{className:"table table-auto w-full",children:[e.jsx("thead",{children:e.jsx("tr",{className:"border border-gray-200",children:n.map((function(r){return e.jsx(s.TableHeaderElement,{label:r.label,sortConponent:e.jsx(l.Sort,{onClick:r.onClick,isSortedByThis:i===r.key,sortOrder:c})},r.key)}))})}),e.jsx("tbody",{children:a.map((function(r){var l;return e.jsx("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(l=a[0])||void 0===l?void 0:l.onClick)?"hover:cursor-pointer":""),onClick:r.onClick,"data-testid":r.id,children:n.map((function(l){return e.jsx("td",{children:e.jsx(o.TableCell,{children:r[l.key]},l.key)},l.key)}))},r.id)}))})]})})};
+"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(e){var d=t.useTable(e),u=d.cols,j=d.rows,x=d.rowCount,h=d.sortKey,m=d.sortOrder,b=d.page,f=b.count,p=b.current,v=b.from,y=b.to,g=b.next,k=b.prev,N=b.jump,C=a.useState(!1),q=C[0],T=C[1];return r.jsxs(r.Fragment,{children:[r.jsx("div",{className:"flex justify-end",children:r.jsx(o.TableFilterRemoveButton,{children:"remove all filter"})}),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",children:u.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:m}),filterComponent:r.jsx(o.TableFilter,{keyName:e.key,onClick:function(e){e.preventDefault(),T((function(e){return!e}))}})},e.key)}))})}),r.jsxs("tbody",{children:[q&&r.jsx("tr",{children:r.jsx("td",{colSpan:u.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl p-2",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:u})})]})})}),0===j.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:u.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),j.map((function(e){var t;return r.jsx("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(t=j[0])||void 0===t?void 0:t.onClick)?"hover:cursor-pointer":""),onClick:e.onClick,"data-testid":e.id,children:u.map((function(t){return r.jsx(l.TableCell,{children:e[t.key]},t.key)}))},e.id)}))]})]})}),r.jsxs("div",{className:"mt-1",children:[r.jsxs("p",{className:"text-center text-sm text-gray-600",children:[v+1," - ",y<x?y:x," of ",x]}),r.jsx("div",{className:"mt-2",children:r.jsx(i.Pagenation,{count:f,current:p,jump:N,next:g,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/filter-form.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),l=require("react"),t=require("./filter.js");exports.TableFilterForm=function(n){var r=t.useTableFilterContext(),i=r.addFilter,a=r.removeFilter,s=r.filterConditions,u=l.useState(""),o=u[0],c=u[1],d=l.useState(""),x=d[0],f=d[1],v=l.useState(""),p=v[0],h=v[1],j=l.useState("string"),m=j[0],g=j[1];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsx("p",{className:"font-bold text-lg",children:"フィルタ追加"}),e.jsxs("div",{className:"flex flex-wrap gap-1",children:[e.jsxs("select",{value:o,onChange:function(e){var l;e.preventDefault(),c(e.target.value);var t=null===(l=n.cols.find((function(l){return l.key===e.target.value})))||void 0===l?void 0:l.type;g(t)},children:[e.jsx("option",{value:"",children:"-- 列を選択 --"}),n.cols.filter((function(e){return!!e.label&&!!e.type})).map((function(l){return e.jsx("option",{value:l.key,children:l.label})}))]}),e.jsxs("select",{value:x,onChange:function(e){e.preventDefault(),f(e.target.value)},disabled:!o,children:[e.jsx("option",{value:"",children:o?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===m&&t.STRING_FILTER_OPERATOR.map((function(l){return e.jsx("option",{value:l.key,children:l.label})})),"number"===m&&t.NUMBER_FILTER_OPERATOR.map((function(l){return e.jsx("option",{value:l.key,children:l.label})}))]}),e.jsx("input",{type:"text",value:p,onChange:function(e){e.preventDefault(),h(e.target.value)},placeholder:"-- 値を入力 --"})]}),e.jsx("div",{className:"flex justify-end",children:e.jsx("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md",onClick:function(e){e.preventDefault(),o&&x&&p?i({key:o,operator:x,value:[p]}):alert("全ての項目を入力してください")},children:"追加"})})]}),e.jsxs("div",{children:[s.length>0&&e.jsx("p",{className:"font-bold text-lg",children:"フィルタ一覧"}),e.jsx("ul",{className:"flex flex-col gap-1 my-2",children:s.map((function(l){var r,i;return e.jsxs("li",{className:"flex justify-between",children:[e.jsxs("p",{children:["「",e.jsx("strong",{children:null===(r=n.cols.find((function(e){return e.key===l.key})))||void 0===r?void 0:r.label}),"」 は",e.jsx("span",{children:null===(i=t.FILTER_OPERATOR.find((function(e){return e.key===l.operator})))||void 0===i?void 0:i.label}),"：",e.jsx("span",{children:l.value})]}),e.jsx("button",{onClick:function(e){e.preventDefault(),a(l.id)},children:"×"})]},l.id)}))}),e.jsx("div",{className:"flex justify-center",children:e.jsx(t.TableFilterRemoveButton,{children:"remove all filter"})})]})]})};
+//# sourceMappingURL=filter-form.js.map

package/dist/cjs/src/table/filter-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-form.js","sources":["../../../../src/table/filter-form.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  FILTER_OPERATOR,\n  NUMBER_FILTER_OPERATOR,\n  STRING_FILTER_OPERATOR,\n  TStringFilterOperator,\n  TableFilterRemoveButton,\n  useTableFilterContext,\n} from \"./filter\";\nimport { TColumnType, TTableColumn } from \"./type\";\n\ntype TPropsFilterForm = {\n  cols: TTableColumn[];\n};\n\nexport function TableFilterForm(props: TPropsFilterForm) {\n  const { addFilter, removeFilter, filterConditions } = useTableFilterContext();\n  const [selectingKey, setSelectingKey] = useState<string>(\"\");\n  const [selectingOperator, setSelectingOperator] = useState<string>(\"\");\n  const [value, setValue] = useState<string>(\"\");\n  const [filterType, setFilterType] = useState<TColumnType>(\"string\");\n\n  return (\n    <>\n      <div className=\"flex flex-col gap-2\">\n        <p className=\"font-bold text-lg\">フィルタ追加</p>\n        <div className=\"flex flex-wrap gap-1\">\n          <select\n            value={selectingKey}\n            onChange={(e) => {\n              e.preventDefault();\n              setSelectingKey(e.target.value);\n              const columnType = props.cols.find(\n                (col) => col.key === e.target.value\n              )?.type as TColumnType;\n              setFilterType(columnType);\n            }}\n          >\n            <option value=\"\">-- 列を選択 --</option>\n            {props.cols\n              .filter((col) => !!col.label && !!col.type)\n              .map((col) => (\n                <option value={col.key}>{col.label}</option>\n              ))}\n          </select>\n          <select\n            value={selectingOperator}\n            onChange={(e) => {\n              e.preventDefault();\n              setSelectingOperator(e.target.value);\n            }}\n            disabled={!selectingKey}\n          >\n            <option value=\"\">\n              {selectingKey ? \"-- 条件を選択 --\" : \"-- 列を選択してください --\"}\n            </option>\n            {filterType === \"string\" &&\n              STRING_FILTER_OPERATOR.map((op) => (\n                <option value={op.key}>{op.label}</option>\n              ))}\n            {filterType === \"number\" &&\n              NUMBER_FILTER_OPERATOR.map((op) => (\n                <option value={op.key}>{op.label}</option>\n              ))}\n          </select>\n          <input\n            type=\"text\"\n            value={value}\n            onChange={(e) => {\n              e.preventDefault();\n              setValue(e.target.value);\n            }}\n            placeholder=\"-- 値を入力 --\"\n          />\n        </div>\n        <div className=\"flex justify-end\">\n          <button\n            className=\"bg-gray-900 text-white py-1 px-2 rounded-md\"\n            onClick={(e) => {\n              e.preventDefault();\n              if (!selectingKey || !selectingOperator || !value) {\n                alert(\"全ての項目を入力してください\");\n                return;\n              }\n              addFilter({\n                key: selectingKey,\n                operator: selectingOperator as TStringFilterOperator,\n                value: [value],\n              });\n            }}\n          >\n            追加\n          </button>\n        </div>\n      </div>\n      <div>\n        {filterConditions.length > 0 && (\n          <p className=\"font-bold text-lg\">フィルタ一覧</p>\n        )}\n        <ul className=\"flex flex-col gap-1 my-2\">\n          {filterConditions.map((f) => (\n            <li key={f.id} className=\"flex justify-between\">\n              <p>\n                「\n                <strong>\n                  {props.cols.find((col) => col.key === f.key)?.label}\n                </strong>\n                」 は\n                <span>\n                  {FILTER_OPERATOR.find((op) => op.key === f.operator)?.label}\n                </span>\n                ：<span>{f.value}</span>\n              </p>\n              <button\n                onClick={(e) => {\n                  e.preventDefault();\n                  removeFilter(f.id);\n                }}\n              >\n                ×\n              </button>\n            </li>\n          ))}\n        </ul>\n        <div className=\"flex justify-center\">\n          <TableFilterRemoveButton>remove all filter</TableFilterRemoveButton>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":["props","_a","useTableFilterContext","addFilter","removeFilter","filterConditions","_b","useState","selectingKey","setSelectingKey","_c","selectingOperator","setSelectingOperator","_d","value","setValue","_e","filterType","setFilterType","_jsxs","_Fragment","children","className","_jsx","jsxs","onChange","e","preventDefault","target","columnType","cols","find","col","key","type","filter","label","map","disabled","STRING_FILTER_OPERATOR","op","jsx","NUMBER_FILTER_OPERATOR","placeholder","onClick","operator","alert","length","f","FILTER_OPERATOR","id","TableFilterRemoveButton"],"mappings":"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"}

package/dist/cjs/src/table/filter-icon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime");exports.FIlterIcon=function(t){var r,o=null!==(r=t.size)&&void 0!==r?r:16;return e.jsx("div",{className:"duration-300 ".concat(t.isFilterActive?"text-gray-700":"text-gray-500"),children:e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",version:"1.1",width:"".concat(o,"px"),height:"".concat(o,"px"),viewBox:"0 0 256 256",xmlSpace:"preserve",children:[e.jsx("defs",{}),t.isFilterActive?e.jsx("g",{style:{stroke:"none",strokeWidth:0,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"none",fillRule:"nonzero",opacity:1},transform:"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)",children:e.jsx("path",{d:"M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z",style:{stroke:"none",strokeWidth:1,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"currentColor",fillRule:"nonzero",opacity:1},transform:" matrix(1 0 0 1 0 0) ","stroke-linecap":"round"})}):e.jsx("g",{style:{stroke:"none",strokeWidth:0,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"none",fillRule:"nonzero",opacity:1},transform:"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)",children:e.jsx("path",{d:"M 37.882 90 c -0.338 0 -0.676 -0.086 -0.981 -0.258 c -0.629 -0.354 -1.019 -1.02 -1.019 -1.742 V 45.354 L 3.923 3.208 C 3.464 2.604 3.388 1.791 3.726 1.11 S 4.758 0 5.517 0 h 78.966 c 0.76 0 1.453 0.43 1.791 1.11 s 0.262 1.493 -0.197 2.098 L 54.118 45.354 V 79.37 c 0 0.699 -0.365 1.348 -0.963 1.71 l -14.237 8.63 C 38.601 89.903 38.241 90 37.882 90 z M 9.543 4 l 29.932 39.474 c 0.264 0.348 0.406 0.772 0.406 1.208 v 39.767 l 10.236 -6.205 V 44.682 c 0 -0.437 0.143 -0.861 0.406 -1.208 L 80.457 4 H 9.543 z M 52.118 79.37 h 0.01 H 52.118 z",style:{stroke:"none",strokeWidth:1,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"currentColor",fillRule:"nonzero",opacity:1},transform:" matrix(1 0 0 1 0 0) ","stroke-linecap":"round"})})]})})};
+//# sourceMappingURL=filter-icon.js.map

package/dist/cjs/src/table/filter-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-icon.js","sources":["../../../../src/table/filter-icon.tsx"],"sourcesContent":["type TPropsFIlterIcon = {\n  size?: number;\n  isFilterActive?: boolean;\n};\n\nexport function FIlterIcon(props: TPropsFIlterIcon) {\n  const size = props.size ?? 16;\n  return (\n    <div\n      className={`duration-300 ${\n        props.isFilterActive ? \"text-gray-700\" : \"text-gray-500\"\n      }`}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n        version=\"1.1\"\n        width={`${size}px`}\n        height={`${size}px`}\n        viewBox=\"0 0 256 256\"\n        xmlSpace=\"preserve\"\n      >\n        <defs></defs>\n        {props.isFilterActive ? (\n          <g\n            style={{\n              stroke: \"none\",\n              strokeWidth: 0,\n              strokeDasharray: \"none\",\n              strokeLinecap: \"butt\",\n              strokeLinejoin: \"miter\",\n              strokeMiterlimit: 10,\n              fill: \"none\",\n              fillRule: \"nonzero\",\n              opacity: 1,\n            }}\n            transform=\"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)\"\n          >\n            <path\n              d=\"M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z\"\n              style={{\n                stroke: \"none\",\n                strokeWidth: 1,\n                strokeDasharray: \"none\",\n                strokeLinecap: \"butt\",\n                strokeLinejoin: \"miter\",\n                strokeMiterlimit: 10,\n                fill: \"currentColor\",\n                fillRule: \"nonzero\",\n                opacity: 1,\n              }}\n              transform=\" matrix(1 0 0 1 0 0) \"\n              stroke-linecap=\"round\"\n            />\n          </g>\n        ) : (\n          <g\n            style={{\n              stroke: \"none\",\n              strokeWidth: 0,\n              strokeDasharray: \"none\",\n              strokeLinecap: \"butt\",\n              strokeLinejoin: \"miter\",\n              strokeMiterlimit: 10,\n              fill: \"none\",\n              fillRule: \"nonzero\",\n              opacity: 1,\n            }}\n            transform=\"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)\"\n          >\n            <path\n              d=\"M 37.882 90 c -0.338 0 -0.676 -0.086 -0.981 -0.258 c -0.629 -0.354 -1.019 -1.02 -1.019 -1.742 V 45.354 L 3.923 3.208 C 3.464 2.604 3.388 1.791 3.726 1.11 S 4.758 0 5.517 0 h 78.966 c 0.76 0 1.453 0.43 1.791 1.11 s 0.262 1.493 -0.197 2.098 L 54.118 45.354 V 79.37 c 0 0.699 -0.365 1.348 -0.963 1.71 l -14.237 8.63 C 38.601 89.903 38.241 90 37.882 90 z M 9.543 4 l 29.932 39.474 c 0.264 0.348 0.406 0.772 0.406 1.208 v 39.767 l 10.236 -6.205 V 44.682 c 0 -0.437 0.143 -0.861 0.406 -1.208 L 80.457 4 H 9.543 z M 52.118 79.37 h 0.01 H 52.118 z\"\n              style={{\n                stroke: \"none\",\n                strokeWidth: 1,\n                strokeDasharray: \"none\",\n                strokeLinecap: \"butt\",\n                strokeLinejoin: \"miter\",\n                strokeMiterlimit: 10,\n                fill: \"currentColor\",\n                fillRule: \"nonzero\",\n                opacity: 1,\n              }}\n              transform=\" matrix(1 0 0 1 0 0) \"\n              stroke-linecap=\"round\"\n            />\n          </g>\n        )}\n      </svg>\n    </div>\n  );\n}\n"],"names":["props","size","_a","_jsx","jsx","className","concat","isFilterActive","children","_jsxs","xmlns","xmlnsXlink","version","width","height","viewBox","xmlSpace","style","stroke","strokeWidth","strokeDasharray","strokeLinecap","strokeLinejoin","strokeMiterlimit","fill","fillRule","opacity","transform","d"],"mappings":"mEAKM,SAAqBA,SACnBC,EAAiB,QAAVC,EAAAF,EAAMC,YAAI,IAAAC,EAAAA,EAAI,GAC3B,OACEC,EAAAC,IAAA,MAAA,CACEC,UAAW,gBACTC,OAAAN,EAAMO,eAAiB,gBAAkB,iBACzCC,SAEFC,EAAAA,KACE,MAAA,CAAAC,MAAM,6BACNC,WAAW,+BACXC,QAAQ,MACRC,MAAO,GAAGP,OAAAL,EAAQ,MAClBa,OAAQ,GAAGR,OAAAL,EAAQ,MACnBc,QAAQ,cACRC,SAAS,WAAUR,SAAA,CAEnBL,EAAAA,IAAa,OAAA,IACZH,EAAMO,eACLJ,EAAAC,IAAA,IAAA,CACEa,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,OACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,oEAEVnB,SAAAL,EAAAA,IAAA,OAAA,CACEyB,EAAE,4OACFX,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,eACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,wBAAuB,iBAClB,YAInBxB,EAAAC,IAAA,IAAA,CACEa,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,OACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,oEAEVnB,SAAAL,EAAAA,IAAA,OAAA,CACEyB,EAAE,8hBACFX,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,eACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,wBACK,iBAAA,gBAO7B"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("./filter-icon.js"),i=[{key:"includeText",label:"次の値を含む"}],l=[{key:"eq",label:"次の値と等しい"},{key:"ne",label:"次の値と等しくない"},{key:"gt",label:"次の値より大きい"},{key:"lt",label:"次の値より小さい"},{key:"gte",label:"次の値以上"},{key:"lte",label:"次の値以下"}],u=e.__spreadArray(e.__spreadArray([],i,!0),l,!0);function a(r,t){switch(t.type){case"add":return{filters:e.__spreadArray(e.__spreadArray([],r.filters,!0),[e.__assign({id:(new Date).getTime()},t.payload.filter)],!1)};case"remove":return{filters:r.filters.filter((function(e){return e.id!==t.payload.id}))};case"clear":return{filters:[]}}}function o(){var e=t.useReducer(a,{filters:[]}),r=e[0],n=e[1],i=t.useCallback((function(e){return n({type:"add",payload:{filter:e}})}),[n]);return{addFilter:i,removeFilter:t.useCallback((function(e){return n({type:"remove",payload:{id:e}})}),[n]),clearFilter:t.useCallback((function(){return n({type:"clear"})}),[n]),filter:t.useCallback((function(e){return r.filters.reduce((function(e,r){switch(r.operator){case"includeText":return e.filter((function(e){var t=e[r.key];return"string"==typeof t&&r.value.some((function(e){return t.includes(e)}))}));case"eq":return e.filter((function(e){return e[r.key]===r.value}));case"ne":return e.filter((function(e){return e[r.key]!==r.value}));case"gt":return e.filter((function(e){return e[r.key]>r.value}));case"lt":return e.filter((function(e){return e[r.key]<r.value}));case"gte":return e.filter((function(e){return e[r.key]>=r.value}));case"lte":return e.filter((function(e){return e[r.key]<=r.value}))}}),e)}),[r]),filterConditions:r.filters}}var c=t.createContext({addFilter:function(){},removeFilter:function(){},clearFilter:function(){},filter:function(){return[]},filterConditions:[]});function s(){return t.useContext(c)}exports.FILTER_OPERATOR=u,exports.NUMBER_FILTER_OPERATOR=l,exports.STRING_FILTER_OPERATOR=i,exports.TableFilter=function(e){var t=s().filterConditions;return r.jsx("div",{className:"relative cursor-pointer",onClick:e.onClick,children:r.jsx(n.FIlterIcon,{isFilterActive:t.filter((function(r){return r.key===e.keyName})).length>0})})},exports.TableFilterProvider=function(e){var t=e.children;return r.jsx(c.Provider,{value:o(),children:t})},exports.TableFilterRemoveButton=function(e){var t=e.children,n=s(),i=n.clearFilter;if(0!==n.filterConditions.length)return r.jsx("button",{onClick:function(e){e.preventDefault(),i()},children:t})},exports.filterReducer=a,exports.useTableFilterContext=s;
+//# sourceMappingURL=filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter.js","sources":["../../../../src/table/filter.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useReducer } from \"react\";\nimport { DataObject } from \"./type\";\nimport { FIlterIcon } from \"./filter-icon\";\n\nexport const STRING_FILTER_OPERATOR = [\n  { key: \"includeText\", label: \"次の値を含む\" },\n] as const;\n\nexport const NUMBER_FILTER_OPERATOR = [\n  { key: \"eq\", label: \"次の値と等しい\" },\n  { key: \"ne\", label: \"次の値と等しくない\" },\n  { key: \"gt\", label: \"次の値より大きい\" },\n  { key: \"lt\", label: \"次の値より小さい\" },\n  { key: \"gte\", label: \"次の値以上\" },\n  { key: \"lte\", label: \"次の値以下\" },\n] as const;\n\nexport const FILTER_OPERATOR = [\n  ...STRING_FILTER_OPERATOR,\n  ...NUMBER_FILTER_OPERATOR,\n] as const;\n\nexport type TStringFilterOperator =\n  (typeof STRING_FILTER_OPERATOR)[number][\"key\"];\nexport type TNumberFilterOperator =\n  (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\nexport type TFilterOperator = TStringFilterOperator | TNumberFilterOperator;\n\ntype TStringFilter = {\n  key: string;\n  operator: TStringFilterOperator;\n  value: string[];\n};\n\ntype TNumberFilter = {\n  key: string;\n  operator: (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\n  value: number;\n};\n\ntype TFilter = TStringFilter | TNumberFilter;\n\ntype TFilterState = {\n  filters: ({ id: number } & TFilter)[];\n};\n\ntype TFilterAction =\n  | { type: \"add\"; payload: { filter: TFilter } }\n  | { type: \"remove\"; payload: { id: number } }\n  | { type: \"clear\" };\n\nexport function filterReducer(\n  state: TFilterState,\n  action: TFilterAction\n): TFilterState {\n  switch (action.type) {\n    case \"add\":\n      return {\n        filters: [\n          ...state.filters,\n          { id: new Date().getTime(), ...action.payload.filter },\n        ],\n      };\n    case \"remove\":\n      return {\n        filters: state.filters.filter((f) => f.id !== action.payload.id),\n      };\n    case \"clear\":\n      return { filters: [] };\n  }\n}\n\nfunction useFilterReducer() {\n  const [state, dispatch] = useReducer(filterReducer, { filters: [] });\n\n  const addFilter = useCallback(\n    (filter: TFilter) => dispatch({ type: \"add\", payload: { filter } }),\n    [dispatch]\n  );\n  const removeFilter = useCallback(\n    (id: number) => dispatch({ type: \"remove\", payload: { id } }),\n    [dispatch]\n  );\n  const clearFilter = useCallback(\n    () => dispatch({ type: \"clear\" }),\n    [dispatch]\n  );\n\n  const filter = useCallback(\n    (rows: DataObject[]): DataObject[] => {\n      return state.filters.reduce((acc, filter) => {\n        switch (filter.operator) {\n          case \"includeText\":\n            return acc.filter((row) => {\n              const value = row[filter.key];\n              if (typeof value === \"string\") {\n                return filter.value.some((v) => value.includes(v));\n              }\n              return false;\n            });\n          case \"eq\":\n            return acc.filter((row) => row[filter.key] === filter.value);\n          case \"ne\":\n            return acc.filter((row) => row[filter.key] !== filter.value);\n          case \"gt\":\n            return acc.filter((row) => row[filter.key] > filter.value);\n          case \"lt\":\n            return acc.filter((row) => row[filter.key] < filter.value);\n          case \"gte\":\n            return acc.filter((row) => row[filter.key] >= filter.value);\n          case \"lte\":\n            return acc.filter((row) => row[filter.key] <= filter.value);\n        }\n      }, rows);\n    },\n    [state]\n  );\n\n  return {\n    addFilter,\n    removeFilter,\n    clearFilter,\n    filter,\n    filterConditions: state.filters,\n  };\n}\n\nconst TableFilterContext = createContext<ReturnType<typeof useFilterReducer>>({\n  addFilter: () => {},\n  removeFilter: () => {},\n  clearFilter: () => {},\n  filter: () => [],\n  filterConditions: [],\n});\n\nexport function TableFilterProvider({\n  children,\n}: {\n  children: JSX.Element | JSX.Element[];\n}) {\n  return (\n    <TableFilterContext.Provider value={useFilterReducer()}>\n      {children}\n    </TableFilterContext.Provider>\n  );\n}\n\nexport function useTableFilterContext() {\n  return useContext(TableFilterContext);\n}\n\ntype TPropsTableFilter = {\n  keyName: string;\n  onClick: React.MouseEventHandler<HTMLDivElement>;\n};\n\nexport function TableFilter(props: TPropsTableFilter) {\n  const { filterConditions } = useTableFilterContext();\n\n  return (\n    <div className=\"relative cursor-pointer\" onClick={props.onClick}>\n      <FIlterIcon\n        isFilterActive={\n          filterConditions.filter((f) => f.key === props.keyName).length > 0\n        }\n      />\n    </div>\n  );\n}\n\nexport function TableFilterRemoveButton({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  const { clearFilter, filterConditions } = useTableFilterContext();\n\n  if (filterConditions.length === 0) {\n    return;\n  }\n\n  return (\n    <button\n      onClick={(e) => {\n        e.preventDefault();\n        clearFilter();\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["STRING_FILTER_OPERATOR","key","label","NUMBER_FILTER_OPERATOR","FILTER_OPERATOR","__spreadArray","filterReducer","state","action","type","filters","__assign","id","Date","getTime","payload","filter","f","useFilterReducer","_a","useReducer","dispatch","addFilter","useCallback","removeFilter","clearFilter","rows","reduce","acc","operator","row","value","some","v","includes","filterConditions","TableFilterContext","createContext","useTableFilterContext","useContext","props","_jsx","jsx","className","onClick","children","FIlterIcon","isFilterActive","keyName","length","Provider","_b","e","preventDefault"],"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-[90%]",children:t.label})}),t.sortConponent&&e.jsx("div",{className:"absolute top-1/2 right-1 -translate-y-1/2",children: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:[e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[90%]",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]})]})};
 //# sourceMappingURL=header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n  label?: string;\n  sortConponent?: JSX.Element;\n};\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-[90%]\">\n          {props.label}\n        </p>\n      </div>\n\n      {props.sortConponent && (\n        <div className=\"absolute top-1/2 right-1 -translate-y-1/2\">\n          {props.sortConponent}\n        </div>\n      )}\n    </th>\n  );\n}\n"],"names":["props","_jsxs","className","_jsx","jsx","children","label","sortConponent"],"mappings":"2EAKM,SAA6BA,GACjC,OACEC,EAAAA,KAAI,KAAA,CAAAC,UAAW,wDACbC,EAAKC,IAAA,MAAA,CAAAF,UAAU,gBACbC,EAAGC,IAAA,IAAA,CAAAF,UAAU,wEAAuEG,SACjFL,EAAMM,UAIVN,EAAMO,eACLJ,EAAAA,WAAKD,UAAU,4CAA2CG,SACvDL,EAAMO,kBAKjB"}
+{"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-[90%]\">\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,wEACVE,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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react");exports.useTable=function(o){var s=r.useState({key:"id",order:"ASC"}),t=s[0],n=s[1],u=o.cols,y=o.rows,i=e.__spreadArray([],y,!0).sort((function(e,r){return e[t.key]<r[t.key]?"ASC"===t.order?-1:1:e[t.key]>r[t.key]?"ASC"===t.order?1:-1:0}));return{cols:u.map((function(r){return e.__assign(e.__assign({},r),{onClick:function(e){e.preventDefault(),t.key===r.key?n({key:r.key,order:"ASC"===t.order?"DESC":"ASC"}):n({key:r.key,order:"ASC"})}})})),rows:i,sortKey:t.key,sortOrder:t.order}};
+"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react"),t=require("./page.js"),o=require("./filter.js");exports.useTable=function(n){var u=r.useState({key:"id",order:"ASC"}),s=u[0],i=u[1],a=o.useTableFilterContext(),l=a.filter,c=a.addFilter,d=a.removeFilter,f=a.clearFilter,y=a.filterConditions,k=t.usePageReducer({perPage:50,currentPage:1,rowCount:n.rows.length}),C=k.currentPage,g=k.pageCount,p=k.from,m=k.to,v=k.next,S=k.prev,w=k.jump,A=k.setRowCount,_=n.cols,j=r.useMemo((function(){return l(n.rows)}),[l,n.rows]);r.useEffect((function(){A(j.length)}),[j.length]);var b=r.useMemo((function(){return e.__spreadArray([],j,!0).sort((function(e,r){return e[s.key]<r[s.key]?"ASC"===s.order?-1:1:e[s.key]>r[s.key]?"ASC"===s.order?1:-1:0}))}),[j,s.key,s.order]),h=r.useMemo((function(){return b.slice(p,m)}),[p,m,b]);return{cols:_.map((function(r){return e.__assign(e.__assign({},r),{onClick:function(e){e.preventDefault(),s.key===r.key?i({key:r.key,order:"ASC"===s.order?"DESC":"ASC"}):i({key:r.key,order:"ASC"})}})})),rows:h,rowCount:j.length,sortKey:s.key,sortOrder:s.order,page:{from:p,to:m,count:g,current:C,next:v,prev:S,jump:w},filter:{add:c,remove:d,clear:f,conditions:y}}};
 //# sourceMappingURL=hook.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { DataObject, TPropsTable } from \"./type\";\n\ntype State = {\n  key: string;\n  order: \"ASC\" | \"DESC\";\n};\n\nexport function useTable<T extends DataObject>(props: TPropsTable<T>) {\n  const [key, changeKey] = useState<State>({ key: \"id\", order: \"ASC\" });\n  const { cols, rows } = props;\n\n  const sortedRows = [...rows].sort((a, b) => {\n    if (a[key.key] < b[key.key]) {\n      return key.order === \"ASC\" ? -1 : 1;\n    }\n    if (a[key.key] > b[key.key]) {\n      return key.order === \"ASC\" ? 1 : -1;\n    }\n    return 0;\n  });\n\n  const colsWithSort = cols.map((col) => ({\n    ...col,\n    onClick: (e: React.MouseEvent<HTMLElement>) => {\n      e.preventDefault();\n      if (key.key === col.key) {\n        changeKey({\n          key: col.key,\n          order: key.order === \"ASC\" ? \"DESC\" : \"ASC\",\n        });\n      } else {\n        changeKey({ key: col.key, order: \"ASC\" });\n      }\n    },\n  }));\n\n  return {\n    cols: colsWithSort,\n    rows: sortedRows,\n    sortKey: key.key,\n    sortOrder: key.order,\n  };\n}\n"],"names":["props","_a","useState","key","order","changeKey","cols","rows","sortedRows","__spreadArray","sort","a","b","map","col","onClick","e","preventDefault","sortKey","sortOrder"],"mappings":"wGAQM,SAAyCA,GACvC,IAAAC,EAAmBC,EAAAA,SAAgB,CAAEC,IAAK,KAAMC,MAAO,QAAtDD,OAAKE,OACJC,EAAeN,EAAKM,KAAdC,EAASP,EAAKO,KAEtBC,EAAaC,gBAAA,GAAIF,GAAI,GAAEG,MAAK,SAACC,EAAGC,GACpC,OAAID,EAAER,EAAIA,KAAOS,EAAET,EAAIA,KACA,QAAdA,EAAIC,OAAmB,EAAI,EAEhCO,EAAER,EAAIA,KAAOS,EAAET,EAAIA,KACA,QAAdA,EAAIC,MAAkB,GAAK,EAE7B,CACT,IAiBA,MAAO,CACLE,KAhBmBA,EAAKO,KAAI,SAACC,GAAQ,gCAClCA,GAAG,CACNC,QAAS,SAACC,GACRA,EAAEC,iBACEd,EAAIA,MAAQW,EAAIX,IAClBE,EAAU,CACRF,IAAKW,EAAIX,IACTC,MAAqB,QAAdD,EAAIC,MAAkB,OAAS,QAGxCC,EAAU,CAAEF,IAAKW,EAAIX,IAAKC,MAAO,OAErC,GACA,IAIAG,KAAMC,EACNU,QAASf,EAAIA,IACbgB,UAAWhB,EAAIC,MAEnB"}
+{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { DataObject, TPropsTable } from \"./type\";\nimport { usePageReducer } from \"./page\";\nimport { useTableFilterContext } from \"./filter\";\n\ntype State = {\n  key: string;\n  order: \"ASC\" | \"DESC\";\n};\n\nexport function useTable<T extends DataObject>(props: TPropsTable<T>) {\n  const [key, changeKey] = useState<State>({ key: \"id\", order: \"ASC\" });\n  const { filter, addFilter, removeFilter, clearFilter, filterConditions } =\n    useTableFilterContext();\n  const { currentPage, pageCount, from, to, next, prev, jump, setRowCount } =\n    usePageReducer({\n      perPage: 50,\n      currentPage: 1,\n      rowCount: props.rows.length,\n    });\n\n  const { cols } = props;\n\n  const filteredRows = useMemo(() => filter(props.rows), [filter, props.rows]);\n\n  useEffect(() => {\n    setRowCount(filteredRows.length);\n  }, [filteredRows.length]);\n\n  const sortedRows = useMemo(\n    () =>\n      [...filteredRows].sort((a, b) => {\n        if (a[key.key] < b[key.key]) {\n          return key.order === \"ASC\" ? -1 : 1;\n        }\n        if (a[key.key] > b[key.key]) {\n          return key.order === \"ASC\" ? 1 : -1;\n        }\n        return 0;\n      }),\n    [filteredRows, key.key, key.order]\n  );\n\n  const pagedRows = useMemo(\n    () => sortedRows.slice(from, to),\n    [from, to, sortedRows]\n  );\n\n  const colsWithSort = cols.map((col) => ({\n    ...col,\n    onClick: (e: React.MouseEvent<HTMLElement>) => {\n      e.preventDefault();\n      if (key.key === col.key) {\n        changeKey({\n          key: col.key,\n          order: key.order === \"ASC\" ? \"DESC\" : \"ASC\",\n        });\n      } else {\n        changeKey({ key: col.key, order: \"ASC\" });\n      }\n    },\n  }));\n\n  return {\n    cols: colsWithSort,\n    rows: pagedRows,\n    rowCount: filteredRows.length,\n    sortKey: key.key,\n    sortOrder: key.order,\n    page: {\n      from,\n      to,\n      count: pageCount,\n      current: currentPage,\n      next,\n      prev,\n      jump,\n    },\n    filter: {\n      add: addFilter,\n      remove: removeFilter,\n      clear: clearFilter,\n      conditions: filterConditions,\n    },\n  };\n}\n"],"names":["props","_a","useState","key","order","changeKey","_b","useTableFilterContext","filter","addFilter","removeFilter","clearFilter","filterConditions","_c","usePageReducer","perPage","currentPage","rowCount","rows","length","pageCount","from","to","next","prev","jump","setRowCount","cols","filteredRows","useMemo","useEffect","sortedRows","__spreadArray","sort","a","b","pagedRows","slice","map","col","onClick","e","preventDefault","sortKey","sortOrder","page","count","current","add","remove","clear","conditions"],"mappings":"wJAUM,SAAyCA,GACvC,IAAAC,EAAmBC,EAAAA,SAAgB,CAAEC,IAAK,KAAMC,MAAO,QAAtDD,OAAKE,OACNC,EACJC,EAAAA,wBADMC,EAAMF,EAAAE,OAAEC,EAASH,EAAAG,UAAEC,iBAAcC,gBAAaC,qBAEhDC,EACJC,EAAAA,eAAe,CACbC,QAAS,GACTC,YAAa,EACbC,SAAUjB,EAAMkB,KAAKC,SAJjBH,EAAWH,EAAAG,YAAEI,cAAWC,EAAIR,EAAAQ,KAAEC,EAAET,EAAAS,GAAEC,EAAIV,EAAAU,KAAEC,EAAIX,EAAAW,KAAEC,EAAIZ,EAAAY,KAAEC,EAAWb,EAAAa,YAO/DC,EAAS3B,EAAK2B,KAEhBC,EAAeC,EAAOA,SAAC,WAAM,OAAArB,EAAOR,EAAMkB,KAAK,GAAE,CAACV,EAAQR,EAAMkB,OAEtEY,EAAAA,WAAU,WACRJ,EAAYE,EAAaT,OAC3B,GAAG,CAACS,EAAaT,SAEjB,IAAMY,EAAaF,EAAAA,SACjB,WACE,OAAAG,EAAAA,cAAA,GAAIJ,GAAc,GAAAK,MAAK,SAACC,EAAGC,GACzB,OAAID,EAAE/B,EAAIA,KAAOgC,EAAEhC,EAAIA,KACA,QAAdA,EAAIC,OAAmB,EAAI,EAEhC8B,EAAE/B,EAAIA,KAAOgC,EAAEhC,EAAIA,KACA,QAAdA,EAAIC,MAAkB,GAAK,EAE7B,CACT,GARA,GASF,CAACwB,EAAczB,EAAIA,IAAKA,EAAIC,QAGxBgC,EAAYP,EAAOA,SACvB,WAAM,OAAAE,EAAWM,MAAMhB,EAAMC,EAAG,GAChC,CAACD,EAAMC,EAAIS,IAkBb,MAAO,CACLJ,KAhBmBA,EAAKW,KAAI,SAACC,GAAQ,gCAClCA,GAAG,CACNC,QAAS,SAACC,GACRA,EAAEC,iBACEvC,EAAIA,MAAQoC,EAAIpC,IAClBE,EAAU,CACRF,IAAKoC,EAAIpC,IACTC,MAAqB,QAAdD,EAAIC,MAAkB,OAAS,QAGxCC,EAAU,CAAEF,IAAKoC,EAAIpC,IAAKC,MAAO,OAErC,GACA,IAIAc,KAAMkB,EACNnB,SAAUW,EAAaT,OACvBwB,QAASxC,EAAIA,IACbyC,UAAWzC,EAAIC,MACfyC,KAAM,CACJxB,KAAIA,EACJC,GAAEA,EACFwB,MAAO1B,EACP2B,QAAS/B,EACTO,KAAIA,EACJC,KAAIA,EACJC,KAAIA,GAENjB,OAAQ,CACNwC,IAAKvC,EACLwC,OAAQvC,EACRwC,MAAOvC,EACPwC,WAAYvC,GAGlB"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react");function n(r,t){switch(t.type){case"setRowCount":return e.__assign(e.__assign({},r),{rowCount:t.payload.rouCount});case"setPerPage":return e.__assign(e.__assign({},r),{perPage:t.payload.perPage});case"next":return r.currentPage===Math.ceil(r.rowCount/r.perPage)?r:e.__assign(e.__assign({},r),{currentPage:r.currentPage+1});case"prev":return 1===r.currentPage?r:e.__assign(e.__assign({},r),{currentPage:r.currentPage-1});case"jump":return t.payload.pageNumber<1||t.payload.pageNumber>Math.ceil(r.rowCount/r.perPage)||r.currentPage===t.payload.pageNumber?r:e.__assign(e.__assign({},r),{currentPage:t.payload.pageNumber});default:return r}}var u={perPage:50,currentPage:1,rowCount:0};var a=t.memo((function(e){return r.jsxs("div",{className:"flex justify-center gap-2",children:[r.jsx("button",{className:"text-sm",onClick:function(){return e.jump(1)},disabled:1===e.current,children:"≪"}),r.jsx("button",{className:"text-sm",onClick:function(){return e.prev()},disabled:1===e.current,children:"<"}),Array.from({length:e.count},(function(e,r){return r+1})).filter((function(r){return e.current-2<=r&&r<=e.current+2})).map((function(t){return r.jsx("button",{className:"text-sm ".concat(e.current===t?"text-blue-600":""),onClick:function(){return e.jump(t)},children:t},t)})),r.jsx("button",{className:"text-sm",onClick:function(){return e.next()},disabled:e.current===e.count,children:">"}),r.jsx("button",{className:"text-sm",onClick:function(){return e.jump(e.count)},disabled:e.current===e.count,children:"≫"})]})}));exports.Pagenation=a,exports.usePageReducer=function(e){var r=t.useReducer(n,null!=e?e:u),a=r[0],c=r[1],s=t.useCallback((function(){return c({type:"next"})}),[c]),o=t.useCallback((function(){return c({type:"prev"})}),[c]),i=t.useCallback((function(e){return c({type:"jump",payload:{pageNumber:e}})}),[c]),l=t.useCallback((function(e){return c({type:"setRowCount",payload:{rouCount:e}})}),[c]);return{perPage:a.perPage,currentPage:a.currentPage,rowCount:a.rowCount,pageCount:Math.ceil(a.rowCount/a.perPage),from:(a.currentPage-1)*a.perPage,to:a.currentPage*a.perPage,next:s,prev:o,jump:i,setRowCount:l}};
+//# sourceMappingURL=page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sources":["../../../../src/table/page.tsx"],"sourcesContent":["import { memo, useCallback, useReducer } from \"react\";\n\ntype TPage = {\n  perPage: number;\n  currentPage: number;\n  rowCount: number;\n};\n\ntype TPageMoveAction =\n  | { type: \"setRowCount\"; payload: { rouCount: number } }\n  | { type: \"setPerPage\"; payload: { perPage: number } }\n  | {\n      type: \"next\";\n    }\n  | {\n      type: \"prev\";\n    }\n  | {\n      type: \"jump\";\n      payload: { pageNumber: number };\n    };\n\nfunction pageReducer(state: TPage, action: TPageMoveAction): TPage {\n  switch (action.type) {\n    case \"setRowCount\":\n      return {\n        ...state,\n        rowCount: action.payload.rouCount,\n      };\n    case \"setPerPage\":\n      return {\n        ...state,\n        perPage: action.payload.perPage,\n      };\n    case \"next\":\n      if (state.currentPage === Math.ceil(state.rowCount / state.perPage)) {\n        return state;\n      }\n\n      return {\n        ...state,\n        currentPage: state.currentPage + 1,\n      };\n    case \"prev\":\n      if (state.currentPage === 1) {\n        return state;\n      }\n\n      return {\n        ...state,\n        currentPage: state.currentPage - 1,\n      };\n    case \"jump\":\n      if (\n        action.payload.pageNumber < 1 ||\n        action.payload.pageNumber > Math.ceil(state.rowCount / state.perPage) ||\n        state.currentPage === action.payload.pageNumber\n      ) {\n        return state;\n      }\n\n      return {\n        ...state,\n        currentPage: action.payload.pageNumber,\n      };\n    default:\n      return state;\n  }\n}\n\nconst InitialPageState: TPage = {\n  perPage: 50,\n  currentPage: 1,\n  rowCount: 0,\n};\n\nexport function usePageReducer(initialState?: TPage) {\n  const [state, dispatch] = useReducer(\n    pageReducer,\n    initialState ?? InitialPageState\n  );\n\n  const next = useCallback(() => dispatch({ type: \"next\" }), [dispatch]);\n  const prev = useCallback(() => dispatch({ type: \"prev\" }), [dispatch]);\n  const jump = useCallback(\n    (pageNumber: number) => dispatch({ type: \"jump\", payload: { pageNumber } }),\n    [dispatch]\n  );\n  const setRowCount = useCallback(\n    (rouCount: number) =>\n      dispatch({ type: \"setRowCount\", payload: { rouCount } }),\n    [dispatch]\n  );\n\n  return {\n    perPage: state.perPage,\n    currentPage: state.currentPage,\n    rowCount: state.rowCount,\n    pageCount: Math.ceil(state.rowCount / state.perPage),\n    from: (state.currentPage - 1) * state.perPage,\n    to: state.currentPage * state.perPage,\n    next,\n    prev,\n    jump,\n    setRowCount,\n  };\n}\n\ntype TPropsPagenation = {\n  count: number;\n  current: number;\n  jump: (pageNumber: number) => void;\n  next: () => void;\n  prev: () => void;\n};\n\nexport const Pagenation = memo(function TablePagenation(\n  props: TPropsPagenation\n) {\n  return (\n    <div className=\"flex justify-center gap-2\">\n      <button\n        className=\"text-sm\"\n        onClick={() => props.jump(1)}\n        disabled={props.current === 1}\n      >\n        &#x226A;\n      </button>\n      <button\n        className=\"text-sm\"\n        onClick={() => props.prev()}\n        disabled={props.current === 1}\n      >\n        &lt;\n      </button>\n      {Array.from({ length: props.count }, (_, i) => i + 1)\n        .filter((i) => props.current - 2 <= i && i <= props.current + 2)\n        .map((i) => (\n          <button\n            key={i}\n            className={`text-sm ${props.current === i ? \"text-blue-600\" : \"\"}`}\n            onClick={() => props.jump(i)}\n          >\n            {i}\n          </button>\n        ))}\n      <button\n        className=\"text-sm\"\n        onClick={() => props.next()}\n        disabled={props.current === props.count}\n      >\n        &gt;\n      </button>\n      <button\n        className=\"text-sm\"\n        onClick={() => props.jump(props.count)}\n        disabled={props.current === props.count}\n      >\n        &#x226B;\n      </button>\n    </div>\n  );\n});\n"],"names":["pageReducer","state","action","type","__assign","rowCount","payload","rouCount","perPage","currentPage","Math","ceil","pageNumber","InitialPageState","Pagenation","memo","props","_jsxs","jsxs","className","_jsx","jsx","onClick","jump","disabled","current","prev","children","Array","from","length","count","_","i","filter","map","concat","next","initialState","_a","useReducer","dispatch","useCallback","setRowCount","pageCount","to"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useTable as o}from"./hook.js";import{TableCell as t}from"./cell.js";import{Sort as l}from"./sort.js";import{TableHeaderElement as d}from"./header.js";function n(n){var i=o(n),a=i.cols,c=i.rows,s=i.sortKey,m=i.sortOrder;return r("div",{className:"w-full border border-gray-200 rounded-md overflow-hidden",children:e("table",{className:"table table-auto w-full",children:[r("thead",{children:r("tr",{className:"border border-gray-200",children:a.map((function(e){return r(d,{label:e.label,sortConponent:r(l,{onClick:e.onClick,isSortedByThis:s===e.key,sortOrder:m})},e.key)}))})}),r("tbody",{children:c.map((function(e){var o;return r("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(o=c[0])||void 0===o?void 0:o.onClick)?"hover:cursor-pointer":""),onClick:e.onClick,"data-testid":e.id,children:a.map((function(o){return r("td",{children:r(t,{children:e[o.key]},o.key)},o.key)}))},e.id)}))})]})})}export{n as default};
+import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useTable as o}from"./hook.js";import{TableCell as n}from"./cell.js";import{Sort as i}from"./sort.js";import{TableHeaderElement as c}from"./header.js";import{Pagenation as a}from"./page.js";import{TableFilterProvider as d,TableFilterRemoveButton as s,TableFilter as m}from"./filter.js";import{useState as u}from"react";import{TableFilterForm as f}from"./filter-form.js";function h(t){return r(d,{children:r(p,e({},t))})}function p(e){var d=o(e),h=d.cols,p=d.rows,v=d.rowCount,y=d.sortKey,b=d.sortOrder,g=d.page,k=g.count,N=g.current,j=g.from,x=g.to,C=g.next,w=g.prev,D=g.jump,O=u(!1),S=O[0],T=O[1];return t(l,{children:[r("div",{className:"flex justify-end",children:r(s,{children:"remove all filter"})}),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",children:h.map((function(e){return r(c,{label:e.label,columnType:e.type,sortConponent:r(i,{onClick:e.onClick,isSortedByThis:y===e.key,sortOrder:b}),filterComponent:r(m,{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 p-2",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(f,{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(e){var t;return r("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(t=p[0])||void 0===t?void 0:t.onClick)?"hover:cursor-pointer":""),onClick:e.onClick,"data-testid":e.id,children:h.map((function(t){return r(n,{children:e[t.key]},t.key)}))},e.id)}))]})]})}),t("div",{className:"mt-1",children:[t("p",{className:"text-center text-sm text-gray-600",children:[j+1," - ",x<v?x:v," of ",v]}),r("div",{className:"mt-2",children:r(a,{count:k,current:N,jump:D,next:C,prev:w})})]})]})}export{h as default};
 //# sourceMappingURL=base.js.map

package/dist/esm/src/table/filter-form.js

@@ -0,0 +1,2 @@
+import{jsxs as e,Fragment as l,jsx as n}from"react/jsx-runtime";import{useState as t}from"react";import{useTableFilterContext as r,STRING_FILTER_OPERATOR as i,NUMBER_FILTER_OPERATOR as a,FILTER_OPERATOR as o,TableFilterRemoveButton as c}from"./filter.js";function u(u){var d=r(),f=d.addFilter,p=d.removeFilter,v=d.filterConditions,s=t(""),h=s[0],m=s[1],g=t(""),y=g[0],x=g[1],b=t(""),k=b[0],N=b[1],C=t("string"),j=C[0],D=C[1];return e(l,{children:[e("div",{className:"flex flex-col gap-2",children:[n("p",{className:"font-bold text-lg",children:"フィルタ追加"}),e("div",{className:"flex flex-wrap gap-1",children:[e("select",{value:h,onChange:function(e){var l;e.preventDefault(),m(e.target.value);var n=null===(l=u.cols.find((function(l){return l.key===e.target.value})))||void 0===l?void 0:l.type;D(n)},children:[n("option",{value:"",children:"-- 列を選択 --"}),u.cols.filter((function(e){return!!e.label&&!!e.type})).map((function(e){return n("option",{value:e.key,children:e.label})}))]}),e("select",{value:y,onChange:function(e){e.preventDefault(),x(e.target.value)},disabled:!h,children:[n("option",{value:"",children:h?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===j&&i.map((function(e){return n("option",{value:e.key,children:e.label})})),"number"===j&&a.map((function(e){return n("option",{value:e.key,children:e.label})}))]}),n("input",{type:"text",value:k,onChange:function(e){e.preventDefault(),N(e.target.value)},placeholder:"-- 値を入力 --"})]}),n("div",{className:"flex justify-end",children:n("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md",onClick:function(e){e.preventDefault(),h&&y&&k?f({key:h,operator:y,value:[k]}):alert("全ての項目を入力してください")},children:"追加"})})]}),e("div",{children:[v.length>0&&n("p",{className:"font-bold text-lg",children:"フィルタ一覧"}),n("ul",{className:"flex flex-col gap-1 my-2",children:v.map((function(l){var t,r;return e("li",{className:"flex justify-between",children:[e("p",{children:["「",n("strong",{children:null===(t=u.cols.find((function(e){return e.key===l.key})))||void 0===t?void 0:t.label}),"」 は",n("span",{children:null===(r=o.find((function(e){return e.key===l.operator})))||void 0===r?void 0:r.label}),"：",n("span",{children:l.value})]}),n("button",{onClick:function(e){e.preventDefault(),p(l.id)},children:"×"})]},l.id)}))}),n("div",{className:"flex justify-center",children:n(c,{children:"remove all filter"})})]})]})}export{u as TableFilterForm};
+//# sourceMappingURL=filter-form.js.map

package/dist/esm/src/table/filter-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-form.js","sources":["../../../../src/table/filter-form.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  FILTER_OPERATOR,\n  NUMBER_FILTER_OPERATOR,\n  STRING_FILTER_OPERATOR,\n  TStringFilterOperator,\n  TableFilterRemoveButton,\n  useTableFilterContext,\n} from \"./filter\";\nimport { TColumnType, TTableColumn } from \"./type\";\n\ntype TPropsFilterForm = {\n  cols: TTableColumn[];\n};\n\nexport function TableFilterForm(props: TPropsFilterForm) {\n  const { addFilter, removeFilter, filterConditions } = useTableFilterContext();\n  const [selectingKey, setSelectingKey] = useState<string>(\"\");\n  const [selectingOperator, setSelectingOperator] = useState<string>(\"\");\n  const [value, setValue] = useState<string>(\"\");\n  const [filterType, setFilterType] = useState<TColumnType>(\"string\");\n\n  return (\n    <>\n      <div className=\"flex flex-col gap-2\">\n        <p className=\"font-bold text-lg\">フィルタ追加</p>\n        <div className=\"flex flex-wrap gap-1\">\n          <select\n            value={selectingKey}\n            onChange={(e) => {\n              e.preventDefault();\n              setSelectingKey(e.target.value);\n              const columnType = props.cols.find(\n                (col) => col.key === e.target.value\n              )?.type as TColumnType;\n              setFilterType(columnType);\n            }}\n          >\n            <option value=\"\">-- 列を選択 --</option>\n            {props.cols\n              .filter((col) => !!col.label && !!col.type)\n              .map((col) => (\n                <option value={col.key}>{col.label}</option>\n              ))}\n          </select>\n          <select\n            value={selectingOperator}\n            onChange={(e) => {\n              e.preventDefault();\n              setSelectingOperator(e.target.value);\n            }}\n            disabled={!selectingKey}\n          >\n            <option value=\"\">\n              {selectingKey ? \"-- 条件を選択 --\" : \"-- 列を選択してください --\"}\n            </option>\n            {filterType === \"string\" &&\n              STRING_FILTER_OPERATOR.map((op) => (\n                <option value={op.key}>{op.label}</option>\n              ))}\n            {filterType === \"number\" &&\n              NUMBER_FILTER_OPERATOR.map((op) => (\n                <option value={op.key}>{op.label}</option>\n              ))}\n          </select>\n          <input\n            type=\"text\"\n            value={value}\n            onChange={(e) => {\n              e.preventDefault();\n              setValue(e.target.value);\n            }}\n            placeholder=\"-- 値を入力 --\"\n          />\n        </div>\n        <div className=\"flex justify-end\">\n          <button\n            className=\"bg-gray-900 text-white py-1 px-2 rounded-md\"\n            onClick={(e) => {\n              e.preventDefault();\n              if (!selectingKey || !selectingOperator || !value) {\n                alert(\"全ての項目を入力してください\");\n                return;\n              }\n              addFilter({\n                key: selectingKey,\n                operator: selectingOperator as TStringFilterOperator,\n                value: [value],\n              });\n            }}\n          >\n            追加\n          </button>\n        </div>\n      </div>\n      <div>\n        {filterConditions.length > 0 && (\n          <p className=\"font-bold text-lg\">フィルタ一覧</p>\n        )}\n        <ul className=\"flex flex-col gap-1 my-2\">\n          {filterConditions.map((f) => (\n            <li key={f.id} className=\"flex justify-between\">\n              <p>\n                「\n                <strong>\n                  {props.cols.find((col) => col.key === f.key)?.label}\n                </strong>\n                」 は\n                <span>\n                  {FILTER_OPERATOR.find((op) => op.key === f.operator)?.label}\n                </span>\n                ：<span>{f.value}</span>\n              </p>\n              <button\n                onClick={(e) => {\n                  e.preventDefault();\n                  removeFilter(f.id);\n                }}\n              >\n                ×\n              </button>\n            </li>\n          ))}\n        </ul>\n        <div className=\"flex justify-center\">\n          <TableFilterRemoveButton>remove all filter</TableFilterRemoveButton>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":["TableFilterForm","props","_a","useTableFilterContext","addFilter","removeFilter","filterConditions","_b","useState","selectingKey","setSelectingKey","_c","selectingOperator","setSelectingOperator","_d","value","setValue","_e","filterType","setFilterType","_jsxs","_Fragment","children","className","_jsx","onChange","e","preventDefault","target","columnType","cols","find","col","key","type","filter","label","map","disabled","STRING_FILTER_OPERATOR","op","NUMBER_FILTER_OPERATOR","placeholder","onClick","operator","alert","length","f","FILTER_OPERATOR","id","TableFilterRemoveButton"],"mappings":"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"}

package/dist/esm/src/table/filter-icon.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";function r(r){var o,i=null!==(o=r.size)&&void 0!==o?o:16;return e("div",{className:"duration-300 ".concat(r.isFilterActive?"text-gray-700":"text-gray-500"),children:t("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",version:"1.1",width:"".concat(i,"px"),height:"".concat(i,"px"),viewBox:"0 0 256 256",xmlSpace:"preserve",children:[e("defs",{}),r.isFilterActive?e("g",{style:{stroke:"none",strokeWidth:0,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"none",fillRule:"nonzero",opacity:1},transform:"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)",children:e("path",{d:"M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z",style:{stroke:"none",strokeWidth:1,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"currentColor",fillRule:"nonzero",opacity:1},transform:" matrix(1 0 0 1 0 0) ","stroke-linecap":"round"})}):e("g",{style:{stroke:"none",strokeWidth:0,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"none",fillRule:"nonzero",opacity:1},transform:"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)",children:e("path",{d:"M 37.882 90 c -0.338 0 -0.676 -0.086 -0.981 -0.258 c -0.629 -0.354 -1.019 -1.02 -1.019 -1.742 V 45.354 L 3.923 3.208 C 3.464 2.604 3.388 1.791 3.726 1.11 S 4.758 0 5.517 0 h 78.966 c 0.76 0 1.453 0.43 1.791 1.11 s 0.262 1.493 -0.197 2.098 L 54.118 45.354 V 79.37 c 0 0.699 -0.365 1.348 -0.963 1.71 l -14.237 8.63 C 38.601 89.903 38.241 90 37.882 90 z M 9.543 4 l 29.932 39.474 c 0.264 0.348 0.406 0.772 0.406 1.208 v 39.767 l 10.236 -6.205 V 44.682 c 0 -0.437 0.143 -0.861 0.406 -1.208 L 80.457 4 H 9.543 z M 52.118 79.37 h 0.01 H 52.118 z",style:{stroke:"none",strokeWidth:1,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"currentColor",fillRule:"nonzero",opacity:1},transform:" matrix(1 0 0 1 0 0) ","stroke-linecap":"round"})})]})})}export{r as FIlterIcon};
+//# sourceMappingURL=filter-icon.js.map

package/dist/esm/src/table/filter-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-icon.js","sources":["../../../../src/table/filter-icon.tsx"],"sourcesContent":["type TPropsFIlterIcon = {\n  size?: number;\n  isFilterActive?: boolean;\n};\n\nexport function FIlterIcon(props: TPropsFIlterIcon) {\n  const size = props.size ?? 16;\n  return (\n    <div\n      className={`duration-300 ${\n        props.isFilterActive ? \"text-gray-700\" : \"text-gray-500\"\n      }`}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n        version=\"1.1\"\n        width={`${size}px`}\n        height={`${size}px`}\n        viewBox=\"0 0 256 256\"\n        xmlSpace=\"preserve\"\n      >\n        <defs></defs>\n        {props.isFilterActive ? (\n          <g\n            style={{\n              stroke: \"none\",\n              strokeWidth: 0,\n              strokeDasharray: \"none\",\n              strokeLinecap: \"butt\",\n              strokeLinejoin: \"miter\",\n              strokeMiterlimit: 10,\n              fill: \"none\",\n              fillRule: \"nonzero\",\n              opacity: 1,\n            }}\n            transform=\"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)\"\n          >\n            <path\n              d=\"M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z\"\n              style={{\n                stroke: \"none\",\n                strokeWidth: 1,\n                strokeDasharray: \"none\",\n                strokeLinecap: \"butt\",\n                strokeLinejoin: \"miter\",\n                strokeMiterlimit: 10,\n                fill: \"currentColor\",\n                fillRule: \"nonzero\",\n                opacity: 1,\n              }}\n              transform=\" matrix(1 0 0 1 0 0) \"\n              stroke-linecap=\"round\"\n            />\n          </g>\n        ) : (\n          <g\n            style={{\n              stroke: \"none\",\n              strokeWidth: 0,\n              strokeDasharray: \"none\",\n              strokeLinecap: \"butt\",\n              strokeLinejoin: \"miter\",\n              strokeMiterlimit: 10,\n              fill: \"none\",\n              fillRule: \"nonzero\",\n              opacity: 1,\n            }}\n            transform=\"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)\"\n          >\n            <path\n              d=\"M 37.882 90 c -0.338 0 -0.676 -0.086 -0.981 -0.258 c -0.629 -0.354 -1.019 -1.02 -1.019 -1.742 V 45.354 L 3.923 3.208 C 3.464 2.604 3.388 1.791 3.726 1.11 S 4.758 0 5.517 0 h 78.966 c 0.76 0 1.453 0.43 1.791 1.11 s 0.262 1.493 -0.197 2.098 L 54.118 45.354 V 79.37 c 0 0.699 -0.365 1.348 -0.963 1.71 l -14.237 8.63 C 38.601 89.903 38.241 90 37.882 90 z M 9.543 4 l 29.932 39.474 c 0.264 0.348 0.406 0.772 0.406 1.208 v 39.767 l 10.236 -6.205 V 44.682 c 0 -0.437 0.143 -0.861 0.406 -1.208 L 80.457 4 H 9.543 z M 52.118 79.37 h 0.01 H 52.118 z\"\n              style={{\n                stroke: \"none\",\n                strokeWidth: 1,\n                strokeDasharray: \"none\",\n                strokeLinecap: \"butt\",\n                strokeLinejoin: \"miter\",\n                strokeMiterlimit: 10,\n                fill: \"currentColor\",\n                fillRule: \"nonzero\",\n                opacity: 1,\n              }}\n              transform=\" matrix(1 0 0 1 0 0) \"\n              stroke-linecap=\"round\"\n            />\n          </g>\n        )}\n      </svg>\n    </div>\n  );\n}\n"],"names":["FIlterIcon","props","size","_a","_jsx","className","concat","isFilterActive","children","_jsxs","xmlns","xmlnsXlink","version","width","height","viewBox","xmlSpace","style","stroke","strokeWidth","strokeDasharray","strokeLinecap","strokeLinejoin","strokeMiterlimit","fill","fillRule","opacity","transform","d"],"mappings":"kDAKM,SAAUA,EAAWC,SACnBC,EAAiB,QAAVC,EAAAF,EAAMC,YAAI,IAAAC,EAAAA,EAAI,GAC3B,OACEC,EAAA,MAAA,CACEC,UAAW,gBACTC,OAAAL,EAAMM,eAAiB,gBAAkB,iBACzCC,SAEFC,EACE,MAAA,CAAAC,MAAM,6BACNC,WAAW,+BACXC,QAAQ,MACRC,MAAO,GAAGP,OAAAJ,EAAQ,MAClBY,OAAQ,GAAGR,OAAAJ,EAAQ,MACnBa,QAAQ,cACRC,SAAS,WAAUR,SAAA,CAEnBJ,EAAa,OAAA,IACZH,EAAMM,eACLH,EAAA,IAAA,CACEa,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,OACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,oEAEVnB,SAAAJ,EAAA,OAAA,CACEwB,EAAE,4OACFX,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,eACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,wBAAuB,iBAClB,YAInBvB,EAAA,IAAA,CACEa,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,OACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,oEAEVnB,SAAAJ,EAAA,OAAA,CACEwB,EAAE,8hBACFX,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,eACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,wBACK,iBAAA,gBAO7B"}

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

@@ -0,0 +1,2 @@
+import{__spreadArray as e,__assign as r}from"../../node_modules/tslib/tslib.es6.js";import{jsx as t}from"react/jsx-runtime";import{createContext as n,useReducer as i,useCallback as l,useContext as u}from"react";import{FIlterIcon as o}from"./filter-icon.js";var c=[{key:"includeText",label:"次の値を含む"}],f=[{key:"eq",label:"次の値と等しい"},{key:"ne",label:"次の値と等しくない"},{key:"gt",label:"次の値より大きい"},{key:"lt",label:"次の値より小さい"},{key:"gte",label:"次の値以上"},{key:"lte",label:"次の値以下"}],a=e(e([],c,!0),f,!0);function s(t,n){switch(n.type){case"add":return{filters:e(e([],t.filters,!0),[r({id:(new Date).getTime()},n.payload.filter)],!1)};case"remove":return{filters:t.filters.filter((function(e){return e.id!==n.payload.id}))};case"clear":return{filters:[]}}}function d(){var e=i(s,{filters:[]}),r=e[0],t=e[1],n=l((function(e){return t({type:"add",payload:{filter:e}})}),[t]);return{addFilter:n,removeFilter:l((function(e){return t({type:"remove",payload:{id:e}})}),[t]),clearFilter:l((function(){return t({type:"clear"})}),[t]),filter:l((function(e){return r.filters.reduce((function(e,r){switch(r.operator){case"includeText":return e.filter((function(e){var t=e[r.key];return"string"==typeof t&&r.value.some((function(e){return t.includes(e)}))}));case"eq":return e.filter((function(e){return e[r.key]===r.value}));case"ne":return e.filter((function(e){return e[r.key]!==r.value}));case"gt":return e.filter((function(e){return e[r.key]>r.value}));case"lt":return e.filter((function(e){return e[r.key]<r.value}));case"gte":return e.filter((function(e){return e[r.key]>=r.value}));case"lte":return e.filter((function(e){return e[r.key]<=r.value}))}}),e)}),[r]),filterConditions:r.filters}}var y=n({addFilter:function(){},removeFilter:function(){},clearFilter:function(){},filter:function(){return[]},filterConditions:[]});function v(e){var r=e.children;return t(y.Provider,{value:d(),children:r})}function k(){return u(y)}function m(e){var r=k().filterConditions;return t("div",{className:"relative cursor-pointer",onClick:e.onClick,children:t(o,{isFilterActive:r.filter((function(r){return r.key===e.keyName})).length>0})})}function p(e){var r=e.children,n=k(),i=n.clearFilter;if(0!==n.filterConditions.length)return t("button",{onClick:function(e){e.preventDefault(),i()},children:r})}export{a as FILTER_OPERATOR,f as NUMBER_FILTER_OPERATOR,c as STRING_FILTER_OPERATOR,m as TableFilter,v as TableFilterProvider,p as TableFilterRemoveButton,s as filterReducer,k as useTableFilterContext};
+//# sourceMappingURL=filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter.js","sources":["../../../../src/table/filter.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useReducer } from \"react\";\nimport { DataObject } from \"./type\";\nimport { FIlterIcon } from \"./filter-icon\";\n\nexport const STRING_FILTER_OPERATOR = [\n  { key: \"includeText\", label: \"次の値を含む\" },\n] as const;\n\nexport const NUMBER_FILTER_OPERATOR = [\n  { key: \"eq\", label: \"次の値と等しい\" },\n  { key: \"ne\", label: \"次の値と等しくない\" },\n  { key: \"gt\", label: \"次の値より大きい\" },\n  { key: \"lt\", label: \"次の値より小さい\" },\n  { key: \"gte\", label: \"次の値以上\" },\n  { key: \"lte\", label: \"次の値以下\" },\n] as const;\n\nexport const FILTER_OPERATOR = [\n  ...STRING_FILTER_OPERATOR,\n  ...NUMBER_FILTER_OPERATOR,\n] as const;\n\nexport type TStringFilterOperator =\n  (typeof STRING_FILTER_OPERATOR)[number][\"key\"];\nexport type TNumberFilterOperator =\n  (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\nexport type TFilterOperator = TStringFilterOperator | TNumberFilterOperator;\n\ntype TStringFilter = {\n  key: string;\n  operator: TStringFilterOperator;\n  value: string[];\n};\n\ntype TNumberFilter = {\n  key: string;\n  operator: (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\n  value: number;\n};\n\ntype TFilter = TStringFilter | TNumberFilter;\n\ntype TFilterState = {\n  filters: ({ id: number } & TFilter)[];\n};\n\ntype TFilterAction =\n  | { type: \"add\"; payload: { filter: TFilter } }\n  | { type: \"remove\"; payload: { id: number } }\n  | { type: \"clear\" };\n\nexport function filterReducer(\n  state: TFilterState,\n  action: TFilterAction\n): TFilterState {\n  switch (action.type) {\n    case \"add\":\n      return {\n        filters: [\n          ...state.filters,\n          { id: new Date().getTime(), ...action.payload.filter },\n        ],\n      };\n    case \"remove\":\n      return {\n        filters: state.filters.filter((f) => f.id !== action.payload.id),\n      };\n    case \"clear\":\n      return { filters: [] };\n  }\n}\n\nfunction useFilterReducer() {\n  const [state, dispatch] = useReducer(filterReducer, { filters: [] });\n\n  const addFilter = useCallback(\n    (filter: TFilter) => dispatch({ type: \"add\", payload: { filter } }),\n    [dispatch]\n  );\n  const removeFilter = useCallback(\n    (id: number) => dispatch({ type: \"remove\", payload: { id } }),\n    [dispatch]\n  );\n  const clearFilter = useCallback(\n    () => dispatch({ type: \"clear\" }),\n    [dispatch]\n  );\n\n  const filter = useCallback(\n    (rows: DataObject[]): DataObject[] => {\n      return state.filters.reduce((acc, filter) => {\n        switch (filter.operator) {\n          case \"includeText\":\n            return acc.filter((row) => {\n              const value = row[filter.key];\n              if (typeof value === \"string\") {\n                return filter.value.some((v) => value.includes(v));\n              }\n              return false;\n            });\n          case \"eq\":\n            return acc.filter((row) => row[filter.key] === filter.value);\n          case \"ne\":\n            return acc.filter((row) => row[filter.key] !== filter.value);\n          case \"gt\":\n            return acc.filter((row) => row[filter.key] > filter.value);\n          case \"lt\":\n            return acc.filter((row) => row[filter.key] < filter.value);\n          case \"gte\":\n            return acc.filter((row) => row[filter.key] >= filter.value);\n          case \"lte\":\n            return acc.filter((row) => row[filter.key] <= filter.value);\n        }\n      }, rows);\n    },\n    [state]\n  );\n\n  return {\n    addFilter,\n    removeFilter,\n    clearFilter,\n    filter,\n    filterConditions: state.filters,\n  };\n}\n\nconst TableFilterContext = createContext<ReturnType<typeof useFilterReducer>>({\n  addFilter: () => {},\n  removeFilter: () => {},\n  clearFilter: () => {},\n  filter: () => [],\n  filterConditions: [],\n});\n\nexport function TableFilterProvider({\n  children,\n}: {\n  children: JSX.Element | JSX.Element[];\n}) {\n  return (\n    <TableFilterContext.Provider value={useFilterReducer()}>\n      {children}\n    </TableFilterContext.Provider>\n  );\n}\n\nexport function useTableFilterContext() {\n  return useContext(TableFilterContext);\n}\n\ntype TPropsTableFilter = {\n  keyName: string;\n  onClick: React.MouseEventHandler<HTMLDivElement>;\n};\n\nexport function TableFilter(props: TPropsTableFilter) {\n  const { filterConditions } = useTableFilterContext();\n\n  return (\n    <div className=\"relative cursor-pointer\" onClick={props.onClick}>\n      <FIlterIcon\n        isFilterActive={\n          filterConditions.filter((f) => f.key === props.keyName).length > 0\n        }\n      />\n    </div>\n  );\n}\n\nexport function TableFilterRemoveButton({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  const { clearFilter, filterConditions } = useTableFilterContext();\n\n  if (filterConditions.length === 0) {\n    return;\n  }\n\n  return (\n    <button\n      onClick={(e) => {\n        e.preventDefault();\n        clearFilter();\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["STRING_FILTER_OPERATOR","key","label","NUMBER_FILTER_OPERATOR","FILTER_OPERATOR","__spreadArray","filterReducer","state","action","type","filters","__assign","id","Date","getTime","payload","filter","f","useFilterReducer","_a","useReducer","dispatch","addFilter","useCallback","removeFilter","clearFilter","rows","reduce","acc","operator","row","value","some","v","includes","filterConditions","TableFilterContext","createContext","TableFilterProvider","children","_jsx","Provider","useTableFilterContext","useContext","TableFilter","props","className","onClick","FIlterIcon","isFilterActive","keyName","length","TableFilterRemoveButton","_b","e","preventDefault"],"mappings":"iQAIa,IAAAA,EAAyB,CACpC,CAAEC,IAAK,cAAeC,MAAO,WAGlBC,EAAyB,CACpC,CAAEF,IAAK,KAAMC,MAAO,WACpB,CAAED,IAAK,KAAMC,MAAO,aACpB,CAAED,IAAK,KAAMC,MAAO,YACpB,CAAED,IAAK,KAAMC,MAAO,YACpB,CAAED,IAAK,MAAOC,MAAO,SACrB,CAAED,IAAK,MAAOC,MAAO,UAGVE,EAAkBC,OAC1BL,GAAsB,GACtBG,GAAsB,GAgCX,SAAAG,EACdC,EACAC,GAEA,OAAQA,EAAOC,MACb,IAAK,MACH,MAAO,CACLC,QAAOL,EAAAA,EAAA,GACFE,EAAMG,SAAO,GAAA,CACdC,EAAA,CAAAC,IAAI,IAAIC,MAAOC,WAAcN,EAAOO,QAAQC,UAC/C,IAEL,IAAK,SACH,MAAO,CACLN,QAASH,EAAMG,QAAQM,QAAO,SAACC,GAAM,OAAAA,EAAEL,KAAOJ,EAAOO,QAAQH,EAAxB,KAEzC,IAAK,QACH,MAAO,CAAEF,QAAS,IAExB,CAEA,SAASQ,IACD,IAAAC,EAAoBC,EAAWd,EAAe,CAAEI,QAAS,KAAxDH,OAAOc,OAERC,EAAYC,GAChB,SAACP,GAAoB,OAAAK,EAAS,CAAEZ,KAAM,MAAOM,QAAS,CAAEC,OAAMA,OAC9D,CAACK,IAyCH,MAAO,CACLC,UAASA,EACTE,aAzCmBD,GACnB,SAACX,GAAe,OAAAS,EAAS,CAAEZ,KAAM,SAAUM,QAAS,CAAEH,GAAEA,OACxD,CAACS,IAwCDI,YAtCkBF,GAClB,WAAM,OAAAF,EAAS,CAAEZ,KAAM,SAAjB,GACN,CAACY,IAqCDL,OAlCaO,GACb,SAACG,GACC,OAAOnB,EAAMG,QAAQiB,QAAO,SAACC,EAAKZ,GAChC,OAAQA,EAAOa,UACb,IAAK,cACH,OAAOD,EAAIZ,QAAO,SAACc,GACjB,IAAMC,EAAQD,EAAId,EAAOf,KACzB,MAAqB,iBAAV8B,GACFf,EAAOe,MAAMC,MAAK,SAACC,GAAM,OAAAF,EAAMG,SAASD,EAAE,GAGrD,IACF,IAAK,KACH,OAAOL,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOf,OAASe,EAAOe,KAAK,IAC7D,IAAK,KACH,OAAOH,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOf,OAASe,EAAOe,KAAK,IAC7D,IAAK,KACH,OAAOH,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOf,KAAOe,EAAOe,KAAK,IAC3D,IAAK,KACH,OAAOH,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOf,KAAOe,EAAOe,KAAK,IAC3D,IAAK,MACH,OAAOH,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOf,MAAQe,EAAOe,KAAK,IAC5D,IAAK,MACH,OAAOH,EAAIZ,QAAO,SAACc,GAAQ,OAAAA,EAAId,EAAOf,MAAQe,EAAOe,KAAK,IAE/D,GAAEL,EACL,GACA,CAACnB,IAQD4B,iBAAkB5B,EAAMG,QAE5B,CAEA,IAAM0B,EAAqBC,EAAmD,CAC5Ef,UAAW,WAAQ,EACnBE,aAAc,WAAQ,EACtBC,YAAa,WAAQ,EACrBT,OAAQ,WAAM,MAAA,EAAE,EAChBmB,iBAAkB,KAGd,SAAUG,EAAoBnB,GAClC,IAAAoB,EAAQpB,EAAAoB,SAIR,OACEC,EAACJ,EAAmBK,SAAS,CAAAV,MAAOb,IAAkBqB,SACnDA,GAGP,UAEgBG,IACd,OAAOC,EAAWP,EACpB,CAOM,SAAUQ,EAAYC,GAClB,IAAAV,EAAqBO,qBAE7B,OACEF,EAAK,MAAA,CAAAM,UAAU,0BAA0BC,QAASF,EAAME,QAAOR,SAC7DC,EAACQ,EAAU,CACTC,eACEd,EAAiBnB,QAAO,SAACC,GAAM,OAAAA,EAAEhB,MAAQ4C,EAAMK,WAASC,OAAS,KAK3E,CAEM,SAAUC,EAAwBjC,GACtC,IAAAoB,EAAQpB,EAAAoB,SAIFc,EAAoCX,IAAlCjB,EAAW4B,EAAA5B,YAEnB,GAAgC,IAFK4B,EAAAlB,iBAEhBgB,OAIrB,OACEX,EAAA,SAAA,CACEO,QAAS,SAACO,GACRA,EAAEC,iBACF9B,GACF,EAECc,SAAAA,GAGP"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";function r(r){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-[90%]",children:r.label})}),r.sortConponent&&t("div",{className:"absolute top-1/2 right-1 -translate-y-1/2",children:r.sortConponent})]})}export{r as TableHeaderElement};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";function l(l){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-[90%]",children:l.label})}),l.label&&l.columnType&&e("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[l.filterComponent&&l.filterComponent,l.sortConponent&&l.sortConponent]})]})}export{l as TableHeaderElement};
 //# sourceMappingURL=header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n  label?: string;\n  sortConponent?: JSX.Element;\n};\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-[90%]\">\n          {props.label}\n        </p>\n      </div>\n\n      {props.sortConponent && (\n        <div className=\"absolute top-1/2 right-1 -translate-y-1/2\">\n          {props.sortConponent}\n        </div>\n      )}\n    </th>\n  );\n}\n"],"names":["TableHeaderElement","props","_jsxs","className","_jsx","children","label","sortConponent"],"mappings":"kDAKM,SAAUA,EAAmBC,GACjC,OACEC,EAAI,KAAA,CAAAC,UAAW,wDACbC,EAAK,MAAA,CAAAD,UAAU,gBACbC,EAAG,IAAA,CAAAD,UAAU,wEAAuEE,SACjFJ,EAAMK,UAIVL,EAAMM,eACLH,SAAKD,UAAU,4CAA2CE,SACvDJ,EAAMM,kBAKjB"}
+{"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-[90%]\">\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,wEACVE,SAAAJ,EAAMK,UAIVL,EAAMK,OAASL,EAAMM,YACpBL,EAAA,MAAA,CAAKC,UAAU,oEAAmEE,SAAA,CAC/EJ,EAAMO,iBAAmBP,EAAMO,gBAC/BP,EAAMQ,eAAiBR,EAAMQ,mBAKxC"}

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

@@ -1,2 +1,2 @@
-import{__spreadArray as r,__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{useState as o}from"react";function t(t){var n=o({key:"id",order:"ASC"}),k=n[0],y=n[1],s=t.cols,d=t.rows,i=r([],d,!0).sort((function(r,e){return r[k.key]<e[k.key]?"ASC"===k.order?-1:1:r[k.key]>e[k.key]?"ASC"===k.order?1:-1:0}));return{cols:s.map((function(r){return e(e({},r),{onClick:function(e){e.preventDefault(),k.key===r.key?y({key:r.key,order:"ASC"===k.order?"DESC":"ASC"}):y({key:r.key,order:"ASC"})}})})),rows:i,sortKey:k.key,sortOrder:k.order}}export{t as useTable};
+import{__spreadArray as r,__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{useState as o,useMemo as t,useEffect as n}from"react";import{usePageReducer as i}from"./page.js";import{useTableFilterContext as u}from"./filter.js";function l(l){var c=o({key:"id",order:"ASC"}),s=c[0],f=c[1],d=u(),m=d.filter,a=d.addFilter,p=d.removeFilter,k=d.clearFilter,y=d.filterConditions,C=i({perPage:50,currentPage:1,rowCount:l.rows.length}),g=C.currentPage,v=C.pageCount,w=C.from,S=C.to,A=C.next,j=C.prev,h=C.jump,x=C.setRowCount,F=l.cols,P=t((function(){return m(l.rows)}),[m,l.rows]);n((function(){x(P.length)}),[P.length]);var b=t((function(){return r([],P,!0).sort((function(r,e){return r[s.key]<e[s.key]?"ASC"===s.order?-1:1:r[s.key]>e[s.key]?"ASC"===s.order?1:-1:0}))}),[P,s.key,s.order]),D=t((function(){return b.slice(w,S)}),[w,S,b]);return{cols:F.map((function(r){return e(e({},r),{onClick:function(e){e.preventDefault(),s.key===r.key?f({key:r.key,order:"ASC"===s.order?"DESC":"ASC"}):f({key:r.key,order:"ASC"})}})})),rows:D,rowCount:P.length,sortKey:s.key,sortOrder:s.order,page:{from:w,to:S,count:v,current:g,next:A,prev:j,jump:h},filter:{add:a,remove:p,clear:k,conditions:y}}}export{l as useTable};
 //# sourceMappingURL=hook.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { DataObject, TPropsTable } from \"./type\";\n\ntype State = {\n  key: string;\n  order: \"ASC\" | \"DESC\";\n};\n\nexport function useTable<T extends DataObject>(props: TPropsTable<T>) {\n  const [key, changeKey] = useState<State>({ key: \"id\", order: \"ASC\" });\n  const { cols, rows } = props;\n\n  const sortedRows = [...rows].sort((a, b) => {\n    if (a[key.key] < b[key.key]) {\n      return key.order === \"ASC\" ? -1 : 1;\n    }\n    if (a[key.key] > b[key.key]) {\n      return key.order === \"ASC\" ? 1 : -1;\n    }\n    return 0;\n  });\n\n  const colsWithSort = cols.map((col) => ({\n    ...col,\n    onClick: (e: React.MouseEvent<HTMLElement>) => {\n      e.preventDefault();\n      if (key.key === col.key) {\n        changeKey({\n          key: col.key,\n          order: key.order === \"ASC\" ? \"DESC\" : \"ASC\",\n        });\n      } else {\n        changeKey({ key: col.key, order: \"ASC\" });\n      }\n    },\n  }));\n\n  return {\n    cols: colsWithSort,\n    rows: sortedRows,\n    sortKey: key.key,\n    sortOrder: key.order,\n  };\n}\n"],"names":["useTable","props","_a","useState","key","order","changeKey","cols","rows","sortedRows","__spreadArray","sort","a","b","map","col","onClick","e","preventDefault","sortKey","sortOrder"],"mappings":"qHAQM,SAAUA,EAA+BC,GACvC,IAAAC,EAAmBC,EAAgB,CAAEC,IAAK,KAAMC,MAAO,QAAtDD,OAAKE,OACJC,EAAeN,EAAKM,KAAdC,EAASP,EAAKO,KAEtBC,EAAaC,EAAA,GAAIF,GAAI,GAAEG,MAAK,SAACC,EAAGC,GACpC,OAAID,EAAER,EAAIA,KAAOS,EAAET,EAAIA,KACA,QAAdA,EAAIC,OAAmB,EAAI,EAEhCO,EAAER,EAAIA,KAAOS,EAAET,EAAIA,KACA,QAAdA,EAAIC,MAAkB,GAAK,EAE7B,CACT,IAiBA,MAAO,CACLE,KAhBmBA,EAAKO,KAAI,SAACC,GAAQ,cAClCA,GAAG,CACNC,QAAS,SAACC,GACRA,EAAEC,iBACEd,EAAIA,MAAQW,EAAIX,IAClBE,EAAU,CACRF,IAAKW,EAAIX,IACTC,MAAqB,QAAdD,EAAIC,MAAkB,OAAS,QAGxCC,EAAU,CAAEF,IAAKW,EAAIX,IAAKC,MAAO,OAErC,GACA,IAIAG,KAAMC,EACNU,QAASf,EAAIA,IACbgB,UAAWhB,EAAIC,MAEnB"}
+{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { DataObject, TPropsTable } from \"./type\";\nimport { usePageReducer } from \"./page\";\nimport { useTableFilterContext } from \"./filter\";\n\ntype State = {\n  key: string;\n  order: \"ASC\" | \"DESC\";\n};\n\nexport function useTable<T extends DataObject>(props: TPropsTable<T>) {\n  const [key, changeKey] = useState<State>({ key: \"id\", order: \"ASC\" });\n  const { filter, addFilter, removeFilter, clearFilter, filterConditions } =\n    useTableFilterContext();\n  const { currentPage, pageCount, from, to, next, prev, jump, setRowCount } =\n    usePageReducer({\n      perPage: 50,\n      currentPage: 1,\n      rowCount: props.rows.length,\n    });\n\n  const { cols } = props;\n\n  const filteredRows = useMemo(() => filter(props.rows), [filter, props.rows]);\n\n  useEffect(() => {\n    setRowCount(filteredRows.length);\n  }, [filteredRows.length]);\n\n  const sortedRows = useMemo(\n    () =>\n      [...filteredRows].sort((a, b) => {\n        if (a[key.key] < b[key.key]) {\n          return key.order === \"ASC\" ? -1 : 1;\n        }\n        if (a[key.key] > b[key.key]) {\n          return key.order === \"ASC\" ? 1 : -1;\n        }\n        return 0;\n      }),\n    [filteredRows, key.key, key.order]\n  );\n\n  const pagedRows = useMemo(\n    () => sortedRows.slice(from, to),\n    [from, to, sortedRows]\n  );\n\n  const colsWithSort = cols.map((col) => ({\n    ...col,\n    onClick: (e: React.MouseEvent<HTMLElement>) => {\n      e.preventDefault();\n      if (key.key === col.key) {\n        changeKey({\n          key: col.key,\n          order: key.order === \"ASC\" ? \"DESC\" : \"ASC\",\n        });\n      } else {\n        changeKey({ key: col.key, order: \"ASC\" });\n      }\n    },\n  }));\n\n  return {\n    cols: colsWithSort,\n    rows: pagedRows,\n    rowCount: filteredRows.length,\n    sortKey: key.key,\n    sortOrder: key.order,\n    page: {\n      from,\n      to,\n      count: pageCount,\n      current: currentPage,\n      next,\n      prev,\n      jump,\n    },\n    filter: {\n      add: addFilter,\n      remove: removeFilter,\n      clear: clearFilter,\n      conditions: filterConditions,\n    },\n  };\n}\n"],"names":["useTable","props","_a","useState","key","order","changeKey","_b","useTableFilterContext","filter","addFilter","removeFilter","clearFilter","filterConditions","_c","usePageReducer","perPage","currentPage","rowCount","rows","length","pageCount","from","to","next","prev","jump","setRowCount","cols","filteredRows","useMemo","useEffect","sortedRows","__spreadArray","sort","a","b","pagedRows","slice","map","col","onClick","e","preventDefault","sortKey","sortOrder","page","count","current","add","remove","clear","conditions"],"mappings":"gPAUM,SAAUA,EAA+BC,GACvC,IAAAC,EAAmBC,EAAgB,CAAEC,IAAK,KAAMC,MAAO,QAAtDD,OAAKE,OACNC,EACJC,IADMC,EAAMF,EAAAE,OAAEC,EAASH,EAAAG,UAAEC,iBAAcC,gBAAaC,qBAEhDC,EACJC,EAAe,CACbC,QAAS,GACTC,YAAa,EACbC,SAAUjB,EAAMkB,KAAKC,SAJjBH,EAAWH,EAAAG,YAAEI,cAAWC,EAAIR,EAAAQ,KAAEC,EAAET,EAAAS,GAAEC,EAAIV,EAAAU,KAAEC,EAAIX,EAAAW,KAAEC,EAAIZ,EAAAY,KAAEC,EAAWb,EAAAa,YAO/DC,EAAS3B,EAAK2B,KAEhBC,EAAeC,GAAQ,WAAM,OAAArB,EAAOR,EAAMkB,KAAK,GAAE,CAACV,EAAQR,EAAMkB,OAEtEY,GAAU,WACRJ,EAAYE,EAAaT,OAC3B,GAAG,CAACS,EAAaT,SAEjB,IAAMY,EAAaF,GACjB,WACE,OAAAG,EAAA,GAAIJ,GAAc,GAAAK,MAAK,SAACC,EAAGC,GACzB,OAAID,EAAE/B,EAAIA,KAAOgC,EAAEhC,EAAIA,KACA,QAAdA,EAAIC,OAAmB,EAAI,EAEhC8B,EAAE/B,EAAIA,KAAOgC,EAAEhC,EAAIA,KACA,QAAdA,EAAIC,MAAkB,GAAK,EAE7B,CACT,GARA,GASF,CAACwB,EAAczB,EAAIA,IAAKA,EAAIC,QAGxBgC,EAAYP,GAChB,WAAM,OAAAE,EAAWM,MAAMhB,EAAMC,EAAG,GAChC,CAACD,EAAMC,EAAIS,IAkBb,MAAO,CACLJ,KAhBmBA,EAAKW,KAAI,SAACC,GAAQ,cAClCA,GAAG,CACNC,QAAS,SAACC,GACRA,EAAEC,iBACEvC,EAAIA,MAAQoC,EAAIpC,IAClBE,EAAU,CACRF,IAAKoC,EAAIpC,IACTC,MAAqB,QAAdD,EAAIC,MAAkB,OAAS,QAGxCC,EAAU,CAAEF,IAAKoC,EAAIpC,IAAKC,MAAO,OAErC,GACA,IAIAc,KAAMkB,EACNnB,SAAUW,EAAaT,OACvBwB,QAASxC,EAAIA,IACbyC,UAAWzC,EAAIC,MACfyC,KAAM,CACJxB,KAAIA,EACJC,GAAEA,EACFwB,MAAO1B,EACP2B,QAAS/B,EACTO,KAAIA,EACJC,KAAIA,EACJC,KAAIA,GAENjB,OAAQ,CACNwC,IAAKvC,EACLwC,OAAQvC,EACRwC,MAAOvC,EACPwC,WAAYvC,GAGlB"}

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

@@ -0,0 +1,2 @@
+import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import{memo as n,useReducer as u,useCallback as a}from"react";function o(r,t){switch(t.type){case"setRowCount":return e(e({},r),{rowCount:t.payload.rouCount});case"setPerPage":return e(e({},r),{perPage:t.payload.perPage});case"next":return r.currentPage===Math.ceil(r.rowCount/r.perPage)?r:e(e({},r),{currentPage:r.currentPage+1});case"prev":return 1===r.currentPage?r:e(e({},r),{currentPage:r.currentPage-1});case"jump":return t.payload.pageNumber<1||t.payload.pageNumber>Math.ceil(r.rowCount/r.perPage)||r.currentPage===t.payload.pageNumber?r:e(e({},r),{currentPage:t.payload.pageNumber});default:return r}}var c={perPage:50,currentPage:1,rowCount:0};function p(e){var r=u(o,null!=e?e:c),t=r[0],n=r[1],p=a((function(){return n({type:"next"})}),[n]),i=a((function(){return n({type:"prev"})}),[n]),l=a((function(e){return n({type:"jump",payload:{pageNumber:e}})}),[n]),s=a((function(e){return n({type:"setRowCount",payload:{rouCount:e}})}),[n]);return{perPage:t.perPage,currentPage:t.currentPage,rowCount:t.rowCount,pageCount:Math.ceil(t.rowCount/t.perPage),from:(t.currentPage-1)*t.perPage,to:t.currentPage*t.perPage,next:p,prev:i,jump:l,setRowCount:s}}var i=n((function(e){return r("div",{className:"flex justify-center gap-2",children:[t("button",{className:"text-sm",onClick:function(){return e.jump(1)},disabled:1===e.current,children:"≪"}),t("button",{className:"text-sm",onClick:function(){return e.prev()},disabled:1===e.current,children:"<"}),Array.from({length:e.count},(function(e,r){return r+1})).filter((function(r){return e.current-2<=r&&r<=e.current+2})).map((function(r){return t("button",{className:"text-sm ".concat(e.current===r?"text-blue-600":""),onClick:function(){return e.jump(r)},children:r},r)})),t("button",{className:"text-sm",onClick:function(){return e.next()},disabled:e.current===e.count,children:">"}),t("button",{className:"text-sm",onClick:function(){return e.jump(e.count)},disabled:e.current===e.count,children:"≫"})]})}));export{i as Pagenation,p as usePageReducer};
+//# sourceMappingURL=page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sources":["../../../../src/table/page.tsx"],"sourcesContent":["import { memo, useCallback, useReducer } from \"react\";\n\ntype TPage = {\n  perPage: number;\n  currentPage: number;\n  rowCount: number;\n};\n\ntype TPageMoveAction =\n  | { type: \"setRowCount\"; payload: { rouCount: number } }\n  | { type: \"setPerPage\"; payload: { perPage: number } }\n  | {\n      type: \"next\";\n    }\n  | {\n      type: \"prev\";\n    }\n  | {\n      type: \"jump\";\n      payload: { pageNumber: number };\n    };\n\nfunction pageReducer(state: TPage, action: TPageMoveAction): TPage {\n  switch (action.type) {\n    case \"setRowCount\":\n      return {\n        ...state,\n        rowCount: action.payload.rouCount,\n      };\n    case \"setPerPage\":\n      return {\n        ...state,\n        perPage: action.payload.perPage,\n      };\n    case \"next\":\n      if (state.currentPage === Math.ceil(state.rowCount / state.perPage)) {\n        return state;\n      }\n\n      return {\n        ...state,\n        currentPage: state.currentPage + 1,\n      };\n    case \"prev\":\n      if (state.currentPage === 1) {\n        return state;\n      }\n\n      return {\n        ...state,\n        currentPage: state.currentPage - 1,\n      };\n    case \"jump\":\n      if (\n        action.payload.pageNumber < 1 ||\n        action.payload.pageNumber > Math.ceil(state.rowCount / state.perPage) ||\n        state.currentPage === action.payload.pageNumber\n      ) {\n        return state;\n      }\n\n      return {\n        ...state,\n        currentPage: action.payload.pageNumber,\n      };\n    default:\n      return state;\n  }\n}\n\nconst InitialPageState: TPage = {\n  perPage: 50,\n  currentPage: 1,\n  rowCount: 0,\n};\n\nexport function usePageReducer(initialState?: TPage) {\n  const [state, dispatch] = useReducer(\n    pageReducer,\n    initialState ?? InitialPageState\n  );\n\n  const next = useCallback(() => dispatch({ type: \"next\" }), [dispatch]);\n  const prev = useCallback(() => dispatch({ type: \"prev\" }), [dispatch]);\n  const jump = useCallback(\n    (pageNumber: number) => dispatch({ type: \"jump\", payload: { pageNumber } }),\n    [dispatch]\n  );\n  const setRowCount = useCallback(\n    (rouCount: number) =>\n      dispatch({ type: \"setRowCount\", payload: { rouCount } }),\n    [dispatch]\n  );\n\n  return {\n    perPage: state.perPage,\n    currentPage: state.currentPage,\n    rowCount: state.rowCount,\n    pageCount: Math.ceil(state.rowCount / state.perPage),\n    from: (state.currentPage - 1) * state.perPage,\n    to: state.currentPage * state.perPage,\n    next,\n    prev,\n    jump,\n    setRowCount,\n  };\n}\n\ntype TPropsPagenation = {\n  count: number;\n  current: number;\n  jump: (pageNumber: number) => void;\n  next: () => void;\n  prev: () => void;\n};\n\nexport const Pagenation = memo(function TablePagenation(\n  props: TPropsPagenation\n) {\n  return (\n    <div className=\"flex justify-center gap-2\">\n      <button\n        className=\"text-sm\"\n        onClick={() => props.jump(1)}\n        disabled={props.current === 1}\n      >\n        &#x226A;\n      </button>\n      <button\n        className=\"text-sm\"\n        onClick={() => props.prev()}\n        disabled={props.current === 1}\n      >\n        &lt;\n      </button>\n      {Array.from({ length: props.count }, (_, i) => i + 1)\n        .filter((i) => props.current - 2 <= i && i <= props.current + 2)\n        .map((i) => (\n          <button\n            key={i}\n            className={`text-sm ${props.current === i ? \"text-blue-600\" : \"\"}`}\n            onClick={() => props.jump(i)}\n          >\n            {i}\n          </button>\n        ))}\n      <button\n        className=\"text-sm\"\n        onClick={() => props.next()}\n        disabled={props.current === props.count}\n      >\n        &gt;\n      </button>\n      <button\n        className=\"text-sm\"\n        onClick={() => props.jump(props.count)}\n        disabled={props.current === props.count}\n      >\n        &#x226B;\n      </button>\n    </div>\n  );\n});\n"],"names":["pageReducer","state","action","type","__assign","rowCount","payload","rouCount","perPage","currentPage","Math","ceil","pageNumber","InitialPageState","usePageReducer","initialState","_a","useReducer","dispatch","next","useCallback","prev","jump","setRowCount","pageCount","from","to","Pagenation","memo","props","_jsxs","className","_jsx","onClick","disabled","current","children","Array","length","count","_","i","filter","map","concat"],"mappings":"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"}

package/dist/index.d.ts

@@ -5,11 +5,14 @@ type DataObject = {
     id: number | string;
     onClick?: React.MouseEventHandler<HTMLTableRowElement>;
 };
+type TColumnType = "string" | "number";
+type TTableColumn = {
+    key: string;
+    label?: string;
+    type?: TColumnType;
+};
 type TPropsTable<T extends DataObject> = {
-    cols: {
-        key: string;
-        label?: string;
-    }[];
+    cols: TTableColumn[];
     rows: T[];
 };
 

package/package.json

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