@teppen/react-ui 0.5.0 → 0.5.2

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

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

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

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

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

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

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

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

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

@@ -1 +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\";\nimport { CancelIcon } from \"./cancel-icon\";\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 key={col.key} value={col.key}>\n                  {col.label}\n                </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 key={op.key} value={op.key}>\n                  {op.label}\n                </option>\n              ))}\n            {filterType === \"number\" &&\n              NUMBER_FILTER_OPERATOR.map((op) => (\n                <option key={op.key} value={op.key}>\n                  {op.label}\n                </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                <CancelIcon size={16} />\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","jsx","disabled","STRING_FILTER_OPERATOR","op","NUMBER_FILTER_OPERATOR","placeholder","onClick","operator","alert","length","f","FILTER_OPERATOR","id","CancelIcon","size","TableFilterRemoveButton"],"mappings":"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"}
+{"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  TNumberFilterOperator,\n  TStringFilterOperator,\n  TableFilterRemoveButton,\n  useTableFilterContext,\n} from \"./filter\";\nimport { TColumnType, TTableColumn } from \"./type\";\nimport { CancelIcon } from \"./cancel-icon\";\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 mb-5\">\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 key={col.key} value={col.key}>\n                  {col.label}\n                </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 key={op.key} value={op.key}>\n                  {op.label}\n                </option>\n              ))}\n            {filterType === \"number\" &&\n              NUMBER_FILTER_OPERATOR.map((op) => (\n                <option key={op.key} value={op.key}>\n                  {op.label}\n                </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                filterType === \"string\"\n                  ? {\n                      key: selectingKey,\n                      operator: selectingOperator as TStringFilterOperator,\n                      value: [value],\n                    }\n                  : {\n                      key: selectingKey,\n                      operator: selectingOperator as TNumberFilterOperator,\n                      value: Number(value),\n                    }\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                <CancelIcon size={16} />\n              </button>\n            </li>\n          ))}\n        </ul>\n        <div className=\"flex justify-center\">\n          <TableFilterRemoveButton>\n            <p className=\"text-gray-600 underline hover:text-gray-800\">\n              remove all filters\n            </p>\n          </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","jsx","disabled","STRING_FILTER_OPERATOR","op","NUMBER_FILTER_OPERATOR","placeholder","onClick","operator","Number","alert","length","f","FILTER_OPERATOR","id","CancelIcon","size","TableFilterRemoveButton"],"mappings":"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"}

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

@@ -1 +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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"}
+{"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: TNumberFilterOperator;\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/esm/src/table/base.js

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

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

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

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

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

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

@@ -1,2 +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";import{CancelIcon as u}from"./cancel-icon.js";function d(d){var f=r(),p=f.addFilter,s=f.removeFilter,v=f.filterConditions,h=t(""),m=h[0],y=h[1],g=t(""),x=g[0],b=g[1],k=t(""),N=k[0],j=k[1],C=t("string"),D=C[0],w=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:m,onChange:function(e){var l;e.preventDefault(),y(e.target.value);var n=null===(l=d.cols.find((function(l){return l.key===e.target.value})))||void 0===l?void 0:l.type;w(n)},children:[n("option",{value:"",children:"-- 列を選択 --"}),d.cols.filter((function(e){return!!e.label&&!!e.type})).map((function(e){return n("option",{value:e.key,children:e.label},e.key)}))]}),e("select",{value:x,onChange:function(e){e.preventDefault(),b(e.target.value)},disabled:!m,children:[n("option",{value:"",children:m?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===D&&i.map((function(e){return n("option",{value:e.key,children:e.label},e.key)})),"number"===D&&a.map((function(e){return n("option",{value:e.key,children:e.label},e.key)}))]}),n("input",{type:"text",value:N,onChange:function(e){e.preventDefault(),j(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(),m&&x&&N?p({key:m,operator:x,value:[N]}):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=d.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(),s(l.id)},children:n(u,{size:16})})]},l.id)}))}),n("div",{className:"flex justify-center",children:n(c,{children:"remove all filter"})})]})]})}export{d as TableFilterForm};
+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";import{CancelIcon as u}from"./cancel-icon.js";function d(d){var f=r(),s=f.addFilter,p=f.removeFilter,v=f.filterConditions,h=t(""),m=h[0],y=h[1],g=t(""),x=g[0],b=g[1],k=t(""),N=k[0],j=k[1],C=t("string"),D=C[0],w=C[1];return e(l,{children:[e("div",{className:"flex flex-col gap-2 mb-5",children:[n("p",{className:"font-bold text-lg",children:"フィルタ追加"}),e("div",{className:"flex flex-wrap gap-1",children:[e("select",{value:m,onChange:function(e){var l;e.preventDefault(),y(e.target.value);var n=null===(l=d.cols.find((function(l){return l.key===e.target.value})))||void 0===l?void 0:l.type;w(n)},children:[n("option",{value:"",children:"-- 列を選択 --"}),d.cols.filter((function(e){return!!e.label&&!!e.type})).map((function(e){return n("option",{value:e.key,children:e.label},e.key)}))]}),e("select",{value:x,onChange:function(e){e.preventDefault(),b(e.target.value)},disabled:!m,children:[n("option",{value:"",children:m?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===D&&i.map((function(e){return n("option",{value:e.key,children:e.label},e.key)})),"number"===D&&a.map((function(e){return n("option",{value:e.key,children:e.label},e.key)}))]}),n("input",{type:"text",value:N,onChange:function(e){e.preventDefault(),j(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(),m&&x&&N?s("string"===D?{key:m,operator:x,value:[N]}:{key:m,operator:x,value:Number(N)}):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=d.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:n(u,{size:16})})]},l.id)}))}),n("div",{className:"flex justify-center",children:n(c,{children:n("p",{className:"text-gray-600 underline hover:text-gray-800",children:"remove all filters"})})})]})]})}export{d as TableFilterForm};
 //# sourceMappingURL=filter-form.js.map

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

@@ -1 +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\";\nimport { CancelIcon } from \"./cancel-icon\";\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 key={col.key} value={col.key}>\n                  {col.label}\n                </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 key={op.key} value={op.key}>\n                  {op.label}\n                </option>\n              ))}\n            {filterType === \"number\" &&\n              NUMBER_FILTER_OPERATOR.map((op) => (\n                <option key={op.key} value={op.key}>\n                  {op.label}\n                </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                <CancelIcon size={16} />\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","CancelIcon","size","TableFilterRemoveButton"],"mappings":"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"}
+{"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  TNumberFilterOperator,\n  TStringFilterOperator,\n  TableFilterRemoveButton,\n  useTableFilterContext,\n} from \"./filter\";\nimport { TColumnType, TTableColumn } from \"./type\";\nimport { CancelIcon } from \"./cancel-icon\";\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 mb-5\">\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 key={col.key} value={col.key}>\n                  {col.label}\n                </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 key={op.key} value={op.key}>\n                  {op.label}\n                </option>\n              ))}\n            {filterType === \"number\" &&\n              NUMBER_FILTER_OPERATOR.map((op) => (\n                <option key={op.key} value={op.key}>\n                  {op.label}\n                </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                filterType === \"string\"\n                  ? {\n                      key: selectingKey,\n                      operator: selectingOperator as TStringFilterOperator,\n                      value: [value],\n                    }\n                  : {\n                      key: selectingKey,\n                      operator: selectingOperator as TNumberFilterOperator,\n                      value: Number(value),\n                    }\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                <CancelIcon size={16} />\n              </button>\n            </li>\n          ))}\n        </ul>\n        <div className=\"flex justify-center\">\n          <TableFilterRemoveButton>\n            <p className=\"text-gray-600 underline hover:text-gray-800\">\n              remove all filters\n            </p>\n          </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","Number","alert","length","f","FILTER_OPERATOR","id","CancelIcon","size","TableFilterRemoveButton"],"mappings":"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"}

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

@@ -1 +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":"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"}
+{"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: TNumberFilterOperator;\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":"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"}

package/package.json

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