@teppen/react-ui 1.3.2 → 1.4.0

package/dist/esm/src/table/table-property/provider.js

@@ -0,0 +1,2 @@
+import"../../../node_modules/tslib/tslib.es6.js";import{jsx as o}from"react/jsx-runtime";import{createContext as t,useMemo as n,useContext as a}from"react";import{useTablePropertyReducer as i}from"./hook.js";var r=t({maxDisplayColCount:0,maxDisplayRowCount:0}),u=t({setMaxDisplayColCount:function(){},setMaxDisplayRowCount:function(){}});function l(t){var a=i(),l=n((function(){return{maxDisplayColCount:a.maxDisplayColCount,maxDisplayRowCount:a.maxDisplayRowCount}}),[a.maxDisplayColCount,a.maxDisplayRowCount]),s=n((function(){return{setMaxDisplayColCount:a.setMaxDisplayColCount,setMaxDisplayRowCount:a.setMaxDisplayRowCount}}),[]);return o(r.Provider,{value:l,children:o(u.Provider,{value:s,children:t.children})})}function s(){return a(r)}function e(){return a(u)}export{l as TablePropertyProvider,e as useTablePropertyActionContext,s as useTablePropertyStateContext};
+//# sourceMappingURL=provider.js.map

package/dist/esm/src/table/table-property/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sources":["../../../../../src/table/table-property/provider.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\nimport {\n  TTablePropertyActionContext,\n  TTablePropertyStateContext,\n} from \"./type\";\nimport { useTablePropertyReducer } from \"./hook\";\n\nconst TablePropertyStateContext = createContext<TTablePropertyStateContext>({\n  maxDisplayColCount: 0,\n  maxDisplayRowCount: 0,\n});\n\nconst TablePropertyActionContext = createContext<TTablePropertyActionContext>({\n  setMaxDisplayColCount: () => {},\n  setMaxDisplayRowCount: () => {},\n});\n\nexport function TablePropertyProvider(props: {\n  children: JSX.Element | JSX.Element[];\n}) {\n  const tableProperty = useTablePropertyReducer();\n\n  const state = useMemo(() => {\n    return {\n      maxDisplayColCount: tableProperty.maxDisplayColCount,\n      maxDisplayRowCount: tableProperty.maxDisplayRowCount,\n    };\n  }, [tableProperty.maxDisplayColCount, tableProperty.maxDisplayRowCount]);\n\n  const action = useMemo(() => {\n    return {\n      setMaxDisplayColCount: tableProperty.setMaxDisplayColCount,\n      setMaxDisplayRowCount: tableProperty.setMaxDisplayRowCount,\n    };\n  }, []);\n\n  return (\n    <TablePropertyStateContext.Provider value={state}>\n      <TablePropertyActionContext.Provider value={action}>\n        {props.children}\n      </TablePropertyActionContext.Provider>\n    </TablePropertyStateContext.Provider>\n  );\n}\n\nexport function useTablePropertyStateContext() {\n  return useContext(TablePropertyStateContext);\n}\n\nexport function useTablePropertyActionContext() {\n  return useContext(TablePropertyActionContext);\n}\n\nexport function useTablePropertyContext() {\n  return {\n    ...useTablePropertyStateContext(),\n    ...useTablePropertyActionContext(),\n  };\n}\n"],"names":["TablePropertyStateContext","createContext","maxDisplayColCount","maxDisplayRowCount","TablePropertyActionContext","setMaxDisplayColCount","setMaxDisplayRowCount","TablePropertyProvider","props","tableProperty","useTablePropertyReducer","state","useMemo","action","_jsx","Provider","value","children","useTablePropertyStateContext","useContext","useTablePropertyActionContext"],"mappings":"gNAOA,IAAMA,EAA4BC,EAA0C,CAC1EC,mBAAoB,EACpBC,mBAAoB,IAGhBC,EAA6BH,EAA2C,CAC5EI,sBAAuB,WAAQ,EAC/BC,sBAAuB,WAAQ,IAG3B,SAAUC,EAAsBC,GAGpC,IAAMC,EAAgBC,IAEhBC,EAAQC,GAAQ,WACpB,MAAO,CACLV,mBAAoBO,EAAcP,mBAClCC,mBAAoBM,EAAcN,mBAErC,GAAE,CAACM,EAAcP,mBAAoBO,EAAcN,qBAE9CU,EAASD,GAAQ,WACrB,MAAO,CACLP,sBAAuBI,EAAcJ,sBACrCC,sBAAuBG,EAAcH,sBAExC,GAAE,IAEH,OACEQ,EAACd,EAA0Be,UAASC,MAAOL,EAAKM,SAC9CH,EAACV,EAA2BW,SAAQ,CAACC,MAAOH,EAAMI,SAC/CT,EAAMS,YAIf,UAEgBC,IACd,OAAOC,EAAWnB,EACpB,UAEgBoB,IACd,OAAOD,EAAWf,EACpB"}

package/dist/index.d.ts

@@ -1,5 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type TStringValidateOption = {
+    maxLength?: number;
+    minLength?: number;
+    pattern?: string;
+};
+type TNumberValidateOption = {
+    max?: number;
+    min?: number;
+};
+
 type DataRecord = Record<string, string | number>;
 type DataObject<T extends DataRecord> = T & {
     id: number | string;
@@ -12,11 +22,7 @@ type TStringCellEditingCondition<T extends DataRecord> = ({
 } | {
     editable: true;
     onCellBlur: (key: keyof T, value: string, current: DataObject<T>, completeEditing: () => void) => void;
-    constraints?: {
-        maxLength?: number;
-        minLength?: number;
-        pattern?: string;
-    };
+    constraints?: TStringValidateOption;
 }));
 type TNumberCellEditingCondition<T extends DataRecord> = ({
     type: "number";
@@ -26,10 +32,7 @@ type TNumberCellEditingCondition<T extends DataRecord> = ({
 } | {
     editable: true;
     onCellBlur: (key: keyof T, value: number, current: DataObject<T>, completeEditing: () => void) => void;
-    constraints?: {
-        max?: number;
-        min?: number;
-    };
+    constraints?: TNumberValidateOption;
 }));
 type TSelectCellEditingCondition<T extends DataRecord> = ({
     type: "select";
@@ -66,11 +69,15 @@ type TPropsTable<T extends DataRecord> = {
     cols: TTableColumn<T>[];
     rows: DataObject<T>[];
     onClickRow?: (row: DataObject<T>) => void;
+    onUpdateRow?: (newRow: DataObject<T>, oldRow: DataObject<T>) => void;
     initialCondition?: {
         sort?: {
             key: string;
             asc?: boolean;
         };
+        pagenation?: {
+            rowCountPerPage?: 20 | 50 | 100 | "all";
+        };
     };
     applyRowFormatting?: (row: DataObject<T>) => TailwindCssStyle;
 } & TCheckboxProperty<T>;

package/package.json

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

package/dist/cjs/node_modules/react-intersection-observer/index.js

@@ -1,3 +0,0 @@
-"use client";
-"use strict";function e(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var t=e(require("react")),r=new Map,n=new WeakMap,i=0,o=void 0;function s(e){return Object.keys(e).sort().filter((t=>void 0!==e[t])).map((t=>{return`${t}_${"root"===t?(r=e.root,r?(n.has(r)||(i+=1,n.set(r,i.toString())),n.get(r)):"0"):e[t]}`;var r})).toString()}function c(e,t,n={},i=o){if(void 0===window.IntersectionObserver&&void 0!==i){const r=e.getBoundingClientRect();return t(i,{isIntersecting:i,target:e,intersectionRatio:"number"==typeof n.threshold?n.threshold:0,time:0,boundingClientRect:r,intersectionRect:r,rootBounds:r}),()=>{}}const{id:c,observer:u,elements:a}=function(e){const t=s(e);let n=r.get(t);if(!n){const i=new Map;let o;const s=new IntersectionObserver((t=>{t.forEach((t=>{var r;const n=t.isIntersecting&&o.some((e=>t.intersectionRatio>=e));e.trackVisibility&&void 0===t.isVisible&&(t.isVisible=n),null==(r=i.get(t.target))||r.forEach((e=>{e(n,t)}))}))}),e);o=s.thresholds||(Array.isArray(e.threshold)?e.threshold:[e.threshold||0]),n={id:t,observer:s,elements:i},r.set(t,n)}return n}(n),l=a.get(e)||[];return a.has(e)||a.set(e,l),l.push(t),u.observe(e),function(){l.splice(l.indexOf(t),1),0===l.length&&(a.delete(e),u.unobserve(e)),0===a.size&&(u.disconnect(),r.delete(c))}}exports.observe=c,exports.useInView=function({threshold:e,delay:r,trackVisibility:n,rootMargin:i,root:o,triggerOnce:s,skip:u,initialInView:a,fallbackInView:l,onChange:d}={}){var f;const[g,h]=t.useState(null),b=t.useRef(),[v,y]=t.useState({inView:!!a,entry:void 0});b.current=d,t.useEffect((()=>{if(u||!g)return;let t;return t=c(g,((e,r)=>{y({inView:e,entry:r}),b.current&&b.current(e,r),r.isIntersecting&&s&&t&&(t(),t=void 0)}),{root:o,rootMargin:i,threshold:e,trackVisibility:n,delay:r},l),()=>{t&&t()}}),[Array.isArray(e)?e.toString():e,g,o,i,s,u,n,l,r]);const w=null==(f=v.entry)?void 0:f.target,p=t.useRef();g||!w||s||u||p.current===w||(p.current=w,y({inView:!!a,entry:void 0}));const V=[h,v.inView,v.entry];return V.ref=V[0],V.inView=V[1],V.entry=V[2],V};
-//# sourceMappingURL=index.js.map

package/dist/cjs/node_modules/react-intersection-observer/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

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

package/dist/esm/node_modules/react-intersection-observer/index.js

@@ -1,3 +0,0 @@
-"use client";
-import*as e from"react";var t=new Map,r=new WeakMap,n=0,i=void 0;function o(e){return Object.keys(e).sort().filter((t=>void 0!==e[t])).map((t=>{return`${t}_${"root"===t?(i=e.root,i?(r.has(i)||(n+=1,r.set(i,n.toString())),r.get(i)):"0"):e[t]}`;var i})).toString()}function s(e,r,n={},s=i){if(void 0===window.IntersectionObserver&&void 0!==s){const t=e.getBoundingClientRect();return r(s,{isIntersecting:s,target:e,intersectionRatio:"number"==typeof n.threshold?n.threshold:0,time:0,boundingClientRect:t,intersectionRect:t,rootBounds:t}),()=>{}}const{id:c,observer:a,elements:l}=function(e){const r=o(e);let n=t.get(r);if(!n){const i=new Map;let o;const s=new IntersectionObserver((t=>{t.forEach((t=>{var r;const n=t.isIntersecting&&o.some((e=>t.intersectionRatio>=e));e.trackVisibility&&void 0===t.isVisible&&(t.isVisible=n),null==(r=i.get(t.target))||r.forEach((e=>{e(n,t)}))}))}),e);o=s.thresholds||(Array.isArray(e.threshold)?e.threshold:[e.threshold||0]),n={id:r,observer:s,elements:i},t.set(r,n)}return n}(n),u=l.get(e)||[];return l.has(e)||l.set(e,u),u.push(r),a.observe(e),function(){u.splice(u.indexOf(r),1),0===u.length&&(l.delete(e),a.unobserve(e)),0===l.size&&(a.disconnect(),t.delete(c))}}function c({threshold:t,delay:r,trackVisibility:n,rootMargin:i,root:o,triggerOnce:c,skip:a,initialInView:l,fallbackInView:u,onChange:d}={}){var h;const[g,f]=e.useState(null),v=e.useRef(),[y,b]=e.useState({inView:!!l,entry:void 0});v.current=d,e.useEffect((()=>{if(a||!g)return;let e;return e=s(g,((t,r)=>{b({inView:t,entry:r}),v.current&&v.current(t,r),r.isIntersecting&&c&&e&&(e(),e=void 0)}),{root:o,rootMargin:i,threshold:t,trackVisibility:n,delay:r},u),()=>{e&&e()}}),[Array.isArray(t)?t.toString():t,g,o,i,c,a,n,u,r]);const w=null==(h=y.entry)?void 0:h.target,V=e.useRef();g||!w||c||a||V.current===w||(V.current=w,b({inView:!!l,entry:void 0}));const p=[f,y.inView,y.entry];return p.ref=p[0],p.inView=p[1],p.entry=p[2],p}export{s as observe,c as useInView};
-//# sourceMappingURL=index.js.map

package/dist/esm/node_modules/react-intersection-observer/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

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