npm - @teppen/react-ui - Versions diffs - 1.7.2 → 1.7.3 - Mend

@teppen/react-ui 1.7.2 → 1.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/cjs/src/select-box/id/provider.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react/jsx-runtime"),r=require("react"),t=r.createContext("");exports.IdProvider=function(r){var n=r.id,i=r.children;return e.jsx(t.Provider,{value:n,children:i})},exports.useIdContext=function(){return r.useContext(t)};
2	+ //# sourceMappingURL=provider.js.map

package/dist/cjs/src/select-box/id/provider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"provider.js","sources":["../../../../../src/select-box/id/provider.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nconst IdContext = createContext<string>(\"\");\n\nexport function IdProvider({\n id,\n children,\n}: {\n id: string;\n children: React.ReactNode;\n}) {\n return <IdContext.Provider value={id}>{children}</IdContext.Provider>;\n}\n\nexport function useIdContext() {\n return useContext(IdContext);\n}\n"],"names":["IdContext","createContext","_a","id","children","_jsx","jsx","Provider","value","useContext"],"mappings":"mEAEMA,EAAYC,EAAAA,cAAsB,uBAElC,SAAqBC,OACzBC,EAAED,EAAAC,GACFC,EAAQF,EAAAE,SAKR,OAAOC,EAAAC,IAACN,EAAUO,SAAQ,CAACC,MAAOL,EAAEC,SAAGA,GACzC,kCAGE,OAAOK,EAAAA,WAAWT,EACpB"}

package/dist/cjs/src/select-box/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react/jsx-runtime"),n=require("react"),t=require("./parts/input-area.js"),r=require("./parts/options-area.js"),o=require("./parts/frame.js"),u=require("./id/provider.js"),i=require("./lib/id-generator.js");exports.SelectBox=function(a){var d,s,l,c,f=n.useState(null!==(d=a.value)&&void 0!==d?d:""),v=f[0],p=f[1],m=n.useState(null!==(s=a.defaultIsOpen)&&void 0!==s&&s),g=m[0],y=m[1],x=n.useState(""),w=x[0],I=x[1],S=n.useState(void 0),E=S[0],h=S[1],j=function(e){p(e),a.onSelect(e),I(""),y(!1)},k=null!==(c=null===(l=a.options.find((function(e){return e.value===v})))\|\|void 0===l?void 0:l.label)&&void 0!==c?c:"",B=n.useMemo((function(){return a.options.filter((function(e){return e.label.toLowerCase().includes(w.toLowerCase())}))}),[a.options,w]);n.useEffect((function(){var e=function(e){var n=document.getElementById(i.IdGenerator.generateIdSelectBoxFrame(a.id)),t=document.getElementById(i.IdGenerator.generateIdSelectBoxOptionsArea(a.id)),r=e.target;r instanceof Node&&(null==n?void 0:n.contains(r))\|\|r instanceof Node&&(null==t?void 0:t.contains(r))\|\|(I(""),y(!1))};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[]),n.useEffect((function(){if(g){var e=function(e){"ArrowDown"===e.key?(e.preventDefault(),h((function(e){return"number"==typeof e?Math.min(e+1,B.length-1):0}))):"ArrowUp"===e.key?(e.preventDefault(),h((function(e){return"number"==typeof e?Math.max(e-1,0):0}))):"Enter"===e.key&&(e.preventDefault(),"number"==typeof E&&j(B[E].value))};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}h(void 0);var n=document.getElementById(i.IdGenerator.generateIdSelectBoxInputArea(a.id));if(n){var t=function(e){"ArrowDown"===e.key&&(e.preventDefault(),y(!0))};return n.addEventListener("keydown",t),function(){n.removeEventListener("keydown",t)}}}),[g,B,E,h]);var L=0===B.length?void 0:"number"==typeof E&&E<B.length?B[E].value:void 0;return e.jsx(u.IdProvider,{id:a.id,children:e.jsxs(o.SelectBoxFrame,{isOpen:g,onToggle:function(){return y((function(e){return!e}))},children:[e.jsx(t.InputArea,{inputRef:a.inputRef,isSelecting:g,selectedValue:k,searchText:w,onChangeSearchText:I}),g&&e.jsx(r.OptionsArea,{options:B,value:v,onSelect:j,selectingValue:L})]})})};
2	+ //# sourceMappingURL=index.js.map

package/dist/cjs/src/select-box/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/select-box/index.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { InputArea, OptionsArea, SelectBoxFrame } from \"./parts\";\nimport { Options } from \"./types\";\nimport { IdProvider } from \"./id/provider\";\nimport { IdGenerator } from \"./lib\";\n\ninterface IPropsSelectBox {\n id: string;\n inputRef?: React.RefObject<HTMLInputElement>;\n defaultIsOpen?: boolean;\n options: Options[];\n value?: string;\n onSelect: (value: string) => void;\n}\n\nexport function SelectBox(props: IPropsSelectBox) {\n const [value, setValue] = useState(props.value ?? \"\");\n const [isOpen, setIsOpen] = useState(props.defaultIsOpen ?? false);\n const [searchText, setSearchText] = useState(\"\");\n const [selectingIndex, setSelectingIndex] = useState<number | undefined>(\n undefined\n );\n\n const handleSelect = (value: string) => {\n setValue(value);\n props.onSelect(value);\n setSearchText(\"\");\n setIsOpen(false);\n };\n\n const label =\n props.options.find((option) => option.value === value)?.label ?? \"\";\n\n const searchedOptions = useMemo(\n () =>\n props.options.filter((option) =>\n option.label.toLowerCase().includes(searchText.toLowerCase())\n ),\n [props.options, searchText]\n );\n\n useEffect(() => {\n const onClickOutOfSelectBox = (e: MouseEvent) => {\n // SelectBox関連の要素を取得\n const frameElement = document.getElementById(\n IdGenerator.generateIdSelectBoxFrame(props.id)\n );\n const optionsElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOptionsArea(props.id)\n );\n\n // クリックされた要素を取得\n const ele = e.target;\n\n if (ele instanceof Node && frameElement?.contains(ele)) return;\n if (ele instanceof Node && optionsElement?.contains(ele)) return;\n\n setSearchText(\"\");\n setIsOpen(false);\n };\n\n document.addEventListener(\"mousedown\", onClickOutOfSelectBox);\n\n return () => {\n document.removeEventListener(\"mousedown\", onClickOutOfSelectBox);\n };\n }, []);\n\n useEffect(() => {\n if (!isOpen) {\n setSelectingIndex(undefined);\n\n const inputElement = document.getElementById(\n IdGenerator.generateIdSelectBoxInputArea(props.id)\n );\n\n if (inputElement) {\n // inputElementにフォーカスされている場合、ArrowDownを押すとOptionsAreaが開く\n const handleKeydown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setIsOpen(true);\n }\n };\n inputElement.addEventListener(\"keydown\", handleKeydown);\n\n return () => {\n inputElement.removeEventListener(\"keydown\", handleKeydown);\n };\n }\n } else {\n const handleKeydown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setSelectingIndex((prev) =>\n typeof prev === \"number\"\n ? Math.min(prev + 1, searchedOptions.length - 1)\n : 0\n );\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setSelectingIndex((prev) =>\n typeof prev === \"number\" ? Math.max(prev - 1, 0) : 0\n );\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (typeof selectingIndex === \"number\") {\n handleSelect(searchedOptions[selectingIndex].value);\n }\n }\n };\n document.addEventListener(\"keydown\", handleKeydown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown);\n };\n }\n }, [isOpen, searchedOptions, selectingIndex, setSelectingIndex]);\n\n const selectingValue =\n searchedOptions.length === 0\n ? undefined\n : typeof selectingIndex === \"number\" &&\n selectingIndex < searchedOptions.length\n ? searchedOptions[selectingIndex].value\n : undefined;\n\n return (\n <IdProvider id={props.id}>\n <SelectBoxFrame\n isOpen={isOpen}\n onToggle={() => setIsOpen((prev) => !prev)}\n >\n <InputArea\n inputRef={props.inputRef}\n isSelecting={isOpen}\n selectedValue={label}\n searchText={searchText}\n onChangeSearchText={setSearchText}\n />\n {isOpen && (\n <OptionsArea\n options={searchedOptions}\n value={value}\n onSelect={handleSelect}\n selectingValue={selectingValue}\n />\n )}\n </SelectBoxFrame>\n </IdProvider>\n );\n}\n"],"names":["props","_e","useState","_a","value","setValue","_f","_b","defaultIsOpen","isOpen","setIsOpen","_g","searchText","setSearchText","_h","undefined","selectingIndex","setSelectingIndex","handleSelect","onSelect","label","_d","_c","options","find","option","searchedOptions","useMemo","filter","toLowerCase","includes","useEffect","onClickOutOfSelectBox","e","frameElement","document","getElementById","IdGenerator","generateIdSelectBoxFrame","id","optionsElement","generateIdSelectBoxOptionsArea","ele","target","Node","contains","addEventListener","removeEventListener","handleKeydown_2","key","preventDefault","prev","Math","min","length","max","inputElement_1","generateIdSelectBoxInputArea","handleKeydown_1","selectingValue","_jsx","IdProvider","children","_jsxs","jsxs","SelectBoxFrame","onToggle","jsx","InputArea","inputRef","isSelecting","selectedValue","onChangeSearchText","OptionsArea"],"mappings":"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"}

package/dist/cjs/src/select-box/lib/id-generator.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var t="teppen:react-ui:select-box",n=function(){function n(){}return n.generateIdSelectBoxInputArea=function(n){return""===n?"".concat(t,":input-area"):"".concat(t,":").concat(n,":input-area")},n.generateIdSelectBoxOptionsArea=function(n){return""===n?"".concat(t,":options-area"):"".concat(t,":").concat(n,":options-area")},n.generateIdSelectBoxFrame=function(n){return""===n?"".concat(t,":frame"):"".concat(t,":").concat(n,":frame")},n.generateIdSelectBoxOption=function(n,e){return""===n?"".concat(t,":option:").concat(e):"".concat(t,":").concat(n,":option:").concat(e)},n}();exports.IdGenerator=n;
2	+ //# sourceMappingURL=id-generator.js.map

package/dist/cjs/src/select-box/lib/id-generator.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"id-generator.js","sources":["../../../../../src/select-box/lib/id-generator.ts"],"sourcesContent":["const ID_PREFIX = \"teppen:react-ui:select-box\";\n\nexport class IdGenerator {\n static generateIdSelectBoxInputArea(id: string): string {\n if (id === \"\") {\n return `${ID_PREFIX}:input-area`;\n } else {\n return `${ID_PREFIX}:${id}:input-area`;\n }\n }\n\n static generateIdSelectBoxOptionsArea(id: string): string {\n if (id === \"\") {\n return `${ID_PREFIX}:options-area`;\n } else {\n return `${ID_PREFIX}:${id}:options-area`;\n }\n }\n\n static generateIdSelectBoxFrame(id: string): string {\n if (id === \"\") {\n return `${ID_PREFIX}:frame`;\n } else {\n return `${ID_PREFIX}:${id}:frame`;\n }\n }\n\n static generateIdSelectBoxOption(id: string, value: string): string {\n if (id === \"\") {\n return `${ID_PREFIX}:option:${value}`;\n } else {\n return `${ID_PREFIX}:${id}:option:${value}`;\n }\n }\n}\n"],"names":["ID_PREFIX","IdGenerator","generateIdSelectBoxInputArea","id","concat","generateIdSelectBoxOptionsArea","generateIdSelectBoxFrame","generateIdSelectBoxOption","value"],"mappings":"aAAA,IAAMA,EAAY,6BAElBC,EAAA,WAAA,SAAAA,IAgCC,CAAD,OA/BSA,EAA4BC,6BAAnC,SAAoCC,GAClC,MAAW,KAAPA,EACK,GAAAC,OAAGJ,EAAS,eAEZ,GAAGI,OAAAJ,EAAa,KAAAI,OAAAD,kBAIpBF,EAA8BI,+BAArC,SAAsCF,GACpC,MAAW,KAAPA,EACK,GAAAC,OAAGJ,EAAS,iBAEZ,GAAGI,OAAAJ,EAAa,KAAAI,OAAAD,oBAIpBF,EAAwBK,yBAA/B,SAAgCH,GAC9B,MAAW,KAAPA,EACK,GAAAC,OAAGJ,EAAS,UAEZ,GAAGI,OAAAJ,EAAa,KAAAI,OAAAD,aAIpBF,EAAAM,0BAAP,SAAiCJ,EAAYK,GAC3C,MAAW,KAAPL,EACK,GAAGC,OAAAJ,EAAoB,YAAAI,OAAAI,GAEvB,UAAGR,EAAS,KAAAI,OAAID,EAAa,YAAAC,OAAAI,IAGzCP,CAAD"}

package/dist/cjs/src/select-box/parts/frame.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react/jsx-runtime"),r=require("../id/provider.js"),i=require("../lib/id-generator.js"),t=require("../../../node_modules/react-icons/md/index.js");exports.SelectBoxFrame=function(n){var o=r.useIdContext();return e.jsxs("div",{id:i.IdGenerator.generateIdSelectBoxFrame(o),className:"relative w-full",children:[e.jsx("div",{onClick:function(e){n.isOpen\|\|n.onToggle()},children:n.children}),e.jsx("div",{className:"absolute grid place-items-center h-full right-1 top-0",onClick:function(e){e.stopPropagation(),n.onToggle()},children:e.jsx(t.MdOutlineKeyboardArrowLeft,{className:"duration-300 ".concat(n.isOpen?"-rotate-90":"")})})]})};
2	+ //# sourceMappingURL=frame.js.map

package/dist/cjs/src/select-box/parts/frame.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"frame.js","sources":["../../../../../src/select-box/parts/frame.tsx"],"sourcesContent":["import { useIdContext } from \"../id/provider\";\nimport { IdGenerator } from \"../lib\";\nimport { MdOutlineKeyboardArrowLeft } from \"react-icons/md\";\n\ninterface IPropsSelectBoxFrame {\n onToggle: () => void;\n isOpen: boolean;\n children: React.ReactNode;\n}\n\nexport function SelectBoxFrame(props: IPropsSelectBoxFrame) {\n const id = useIdContext();\n\n return (\n <div\n id={IdGenerator.generateIdSelectBoxFrame(id)}\n className=\"relative w-full\"\n >\n <div\n onClick={(e) => {\n if (!props.isOpen) {\n props.onToggle();\n }\n }}\n >\n {props.children}\n </div>\n <div\n className=\"absolute grid place-items-center h-full right-1 top-0\"\n onClick={(e) => {\n e.stopPropagation();\n props.onToggle();\n }}\n >\n <MdOutlineKeyboardArrowLeft\n className={`duration-300 ${props.isOpen ? \"-rotate-90\" : \"\"}`}\n />\n </div>\n </div>\n );\n}\n"],"names":["props","id","useIdContext","_jsxs","IdGenerator","generateIdSelectBoxFrame","className","children","_jsx","onClick","e","isOpen","onToggle","jsx","stopPropagation","MdOutlineKeyboardArrowLeft","concat"],"mappings":"qMAUM,SAAyBA,GAC7B,IAAMC,EAAKC,EAAAA,eAEX,OACEC,EAAAA,KACE,MAAA,CAAAF,GAAIG,EAAWA,YAACC,yBAAyBJ,GACzCK,UAAU,kBAAiBC,SAAA,CAE3BC,aACEC,QAAS,SAACC,GACHV,EAAMW,QACTX,EAAMY,UAET,EAEAL,SAAAP,EAAMO,WAETC,EAAAK,IAAA,MAAA,CACEP,UAAU,wDACVG,QAAS,SAACC,GACRA,EAAEI,kBACFd,EAAMY,YACPL,SAEDC,EAAAA,IAACO,EAAAA,2BAA0B,CACzBT,UAAW,gBAAAU,OAAgBhB,EAAMW,OAAS,aAAe,UAKnE"}

package/dist/cjs/src/select-box/parts/input-area.js ADDED Viewed

@@ -0,0 +1,3 @@
+"use client";
+"use strict";var e=require("react/jsx-runtime"),r=require("../id/provider.js"),t=require("../lib/id-generator.js");exports.InputArea=function(a){var n=r.useIdContext();return e.jsx("input",{id:t.IdGenerator.generateIdSelectBoxInputArea(n),ref:a.inputRef,className:"border border-gray-300 px-2 py-1 w-full",type:"text",placeholder:""===a.selectedValue?"選択してください":a.selectedValue,value:a.isSelecting?a.searchText:a.selectedValue,onChange:function(e){e.preventDefault(),a.onChangeSearchText(e.target.value)}})};
+//# sourceMappingURL=input-area.js.map

package/dist/cjs/src/select-box/parts/input-area.js.map ADDED Viewed

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

package/dist/cjs/src/select-box/parts/options-area.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../id/provider.js"),n=require("../lib/id-generator.js");exports.OptionsArea=function(a){var l=t.useIdContext();return r.useEffect((function(){var e,r=document.getElementById(n.IdGenerator.generateIdSelectBoxOption(l,null!==(e=a.selectingValue)&&void 0!==e?e:""));r&&r.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}),[a.selectingValue]),e.jsx("div",{id:n.IdGenerator.generateIdSelectBoxOptionsArea(l),className:"absolute top-full left-0 w-full max-h-[40vh] overflow-auto border border-gray-300",children:a.options.map((function(r){var t;return e.jsx("div",{id:n.IdGenerator.generateIdSelectBoxOption(l,null!==(t=r.value)&&void 0!==t?t:""),className:"hover:bg-gray-200 px-2 py-1 ".concat("string"==typeof a.selectingValue?a.selectingValue===r.value?"bg-gray-100":"bg-white":a.value===r.value?"bg-gray-100":"bg-white"),onClick:function(){return a.onSelect(r.value)},children:r.label},r.value)}))})};
2	+ //# sourceMappingURL=options-area.js.map

package/dist/cjs/src/select-box/parts/options-area.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"options-area.js","sources":["../../../../../src/select-box/parts/options-area.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Options } from \"../types\";\nimport { useIdContext } from \"../id/provider\";\nimport { IdGenerator } from \"../lib\";\n\ninterface IPropsSelectArea {\n options: Options[];\n value: string;\n onSelect: (value: string) => void;\n selectingValue?: string;\n}\n\nexport function OptionsArea(props: IPropsSelectArea) {\n const id = useIdContext();\n\n useEffect(() => {\n const optionElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOption(id, props.selectingValue ?? \"\")\n );\n\n if (!optionElement) return;\n\n optionElement.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"nearest\",\n });\n }, [props.selectingValue]);\n\n return (\n <div\n id={IdGenerator.generateIdSelectBoxOptionsArea(id)}\n className=\"absolute top-full left-0 w-full max-h-[40vh] overflow-auto border border-gray-300\"\n >\n {props.options.map((option) => (\n <div\n id={IdGenerator.generateIdSelectBoxOption(id, option.value ?? \"\")}\n className={`hover:bg-gray-200 px-2 py-1 ${\n typeof props.selectingValue === \"string\"\n ? props.selectingValue === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n : props.value === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n }`}\n key={option.value}\n onClick={() => props.onSelect(option.value)}\n >\n {option.label}\n </div>\n ))}\n </div>\n );\n}\n"],"names":["props","id","useIdContext","useEffect","optionElement","document","getElementById","IdGenerator","generateIdSelectBoxOption","_a","selectingValue","scrollIntoView","behavior","block","inline","_jsx","generateIdSelectBoxOptionsArea","className","options","map","option","value","concat","onClick","onSelect","children","label"],"mappings":"0JAYM,SAAsBA,GAC1B,IAAMC,EAAKC,EAAAA,eAgBX,OAdAC,EAAAA,WAAU,iBACFC,EAAgBC,SAASC,eAC7BC,EAAWA,YAACC,0BAA0BP,UAAIQ,EAAAT,EAAMU,8BAAkB,KAG/DN,GAELA,EAAcO,eAAe,CAC3BC,SAAU,SACVC,MAAO,UACPC,OAAQ,WAEZ,GAAG,CAACd,EAAMU,iBAGRK,EAAAA,WACEd,GAAIM,EAAWA,YAACS,+BAA+Bf,GAC/CgB,UAAU,6FAETjB,EAAMkB,QAAQC,KAAI,SAACC,SAAW,OAC7BL,MACE,MAAA,CAAAd,GAAIM,EAAWA,YAACC,0BAA0BP,EAAoB,QAAhBQ,EAAAW,EAAOC,aAAS,IAAAZ,EAAAA,EAAA,IAC9DQ,UAAW,+BACTK,OAAgC,iBAAzBtB,EAAMU,eACTV,EAAMU,iBAAmBU,EAAOC,MAC9B,cACA,WACFrB,EAAMqB,QAAUD,EAAOC,MACvB,cACA,YAGNE,QAAS,WAAM,OAAAvB,EAAMwB,SAASJ,EAAOC,MAAM,EAE1CI,SAAAL,EAAOM,OAHHN,EAAOC,MAKf,KAGP"}

package/dist/cjs/src/table/cell/hooks.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),t=require("../edit/provider.js"),n=require("../sheet/providers.js"),o=require("../libs/id-generator.js"),r=require("../range/provider.js");exports.useCell=function(i,u){var s,d,a=r.useRangeActionContext(),l=a.startSelectRange,c=a.moveSelectRange,p=a.endSelectRange,v=t.useEditActionContext().startEditing,f=o.IdGenerator.getCellIndex(i),g=f[0],m=f[1],x=n.useColumnsContext()[m],C=u[x.key],b="select"===x.type?null===(d=null===(s=x.options)||void 0===s?void 0:s.find((function(e){return e.value===C})))||void 0===d?void 0:d.label:C,I=e.useMemo((function(){return x.editable?b:x.render?x.render(C,u):b}),[x.editable,b,C,u]);return{type:!x.editable&&x.render?"component":x.type,component:I,onDoubleClick:function(e){e.preventDefault(),v()},onMouseDown:function(e){e.stopPropagation(),setTimeout((function(){l({rowIndex:g,colIndex:m});var e=function(t){t.preventDefault(),t.stopPropagation(),p(),document.removeEventListener("mouseup",e)};document.addEventListener("mouseup",e)}),0)},onMouseEnter:function(e){e.preventDefault(),e.stopPropagation(),c({rowIndex:g,colIndex:m})}}};
+"use strict";var e=require("react"),n=require("../edit/provider.js"),t=require("../sheet/providers.js"),o=require("../libs/id-generator.js"),r=require("../range/provider.js");exports.useCell=function(i,u){var d,s,l=r.useRangeActionContext(),a=l.startSelectRange,c=l.moveSelectRange,p=l.endSelectRange,v=n.useEditActionContext().startEditing,f=o.IdGenerator.getCellIndex(i),m=f[0],g=f[1],x=t.useColumnsContext()[g],C=u[x.key],b="select"===x.type?null===(s=null===(d=x.options)||void 0===d?void 0:d.find((function(e){return e.value===C})))||void 0===s?void 0:s.label:C,I=e.useMemo((function(){return x.editable?b:x.render?x.render(C,u):b}),[x.editable,b,C,u]);return{type:!x.editable&&x.render?"component":x.type,component:I,onDoubleClick:function(e){e.preventDefault(),v()},onMouseDown:function(e){setTimeout((function(){a({rowIndex:m,colIndex:g});var e=function(n){n.preventDefault(),n.stopPropagation(),p(),document.removeEventListener("mouseup",e)};document.addEventListener("mouseup",e)}),0)},onMouseEnter:function(e){e.preventDefault(),e.stopPropagation(),c({rowIndex:m,colIndex:g})}}};
 //# sourceMappingURL=hooks.js.map

package/dist/cjs/src/table/cell/hooks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hooks.js","sources":["../../../../../src/table/cell/hooks.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useEditActionContext } from \"../edit/provider\";\nimport { useColumnsContext } from \"../sheet/providers\";\nimport { DataObject, DataRecord, TColumnType } from \"../table/type\";\nimport { IdGenerator } from \"../libs\";\nimport { useRangeActionContext } from \"../range/provider\";\n\nexport function useCell(id: string, row: DataObject<DataRecord>) {\n const { startSelectRange, moveSelectRange, endSelectRange } =\n useRangeActionContext();\n const { startEditing } = useEditActionContext();\n const [rowIndex, colIndex] = IdGenerator.getCellIndex(id);\n const col = useColumnsContext()[colIndex];\n const value = row[col.key as string];\n\n const label =\n col.type === \"select\"\n ? col.options?.find((op) => op.value === value)?.label\n : value;\n\n const component = useMemo(() => {\n if (col.editable) {\n return label;\n } else {\n return col.render ? col.render(value as never, row) : label;\n }\n }, [col.editable, label, value, row]);\n\n const type: TColumnType \| \"component\" =\n !col.editable && col.render ? \"component\" : col.type;\n\n const onDoubleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n startEditing();\n };\n\n /*\n onBlurよりも先に発火するため、onBlurでendEditingを呼ぶと\n * すぐにstartEditingが呼ばれてしまうため、setTimeoutで遅延させる\n * これにより、endEditingが先に呼ばれるようになる\n */\n const onMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {\n ~~e.stopPropagation();\n\n~~ setTimeout(() => {\n startSelectRange({ rowIndex, colIndex });\n\n const onMouseUp = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n endSelectRange();\n document.removeEventListener(\"mouseup\", onMouseUp);\n };\n\n document.addEventListener(\"mouseup\", onMouseUp);\n }, 0);\n };\n\n const onMouseEnter: React.MouseEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n e.stopPropagation();\n moveSelectRange({ rowIndex, colIndex });\n };\n\n return {\n type,\n component,\n onDoubleClick,\n onMouseDown,\n onMouseEnter,\n };\n}\n"],"names":["id","row","_c","useRangeActionContext","startSelectRange","moveSelectRange","endSelectRange","startEditing","useEditActionContext","_d","IdGenerator","getCellIndex","rowIndex","colIndex","col","useColumnsContext","value","key","label","type","_a","options","find","op","_b","component","useMemo","editable","render","onDoubleClick","e","preventDefault","onMouseDown","~~stopPropagation~~","~~setTimeout~~","~~onMouseUp~~","document","removeEventListener","addEventListener","onMouseEnter"],"mappings":"+LAOgB,SAAQA,EAAYC,WAC5BC,EACJC,EAAAA,wBADMC,EAAgBF,EAAAE,iBAAEC,EAAeH,EAAAG,gBAAEC,EAAcJ,EAAAI,eAEjDC,EAAiBC,sCACnBC,EAAuBC,EAAAA,YAAYC,aAAaX,GAA/CY,EAAQH,EAAA,GAAEI,OACXC,EAAMC,EAAAA,oBAAoBF,GAC1BG,EAAQf,EAAIa,EAAIG,KAEhBC,EACS,WAAbJ,EAAIK,KAC6C,UAAlC,QAAXC,EAAAN,EAAIO,eAAO,IAAAD,OAAA,EAAAA,EAAEE,MAAK,SAACC,GAAO,OAAAA,EAAGP,QAAUA,CAAb,WAAmB,IAAAQ,OAAA,EAAAA,EAAEN,MAC/CF,EAEAS,EAAYC,EAAAA,SAAQ,WACxB,OAAIZ,EAAIa,SACCT,EAEAJ,EAAIc,OAASd,EAAIc,OAAOZ,EAAgBf,GAAOiB,CAE1D,GAAG,CAACJ,EAAIa,SAAUT,EAAOF,EAAOf,~~IAsChC~~,MAAO,CACLkB,~~MApCCL~~,EAAIa,UAAYb,EAAIc,OAAS,YAAcd,EAAIK,~~KAqChDM~~,UAASA,EACTI,~~cApC6D~~,SAACC,GAC9DA,EAAEC,iBACFxB,GACF,~~EAkCEyB~~,~~YA3B2D~~,SAACF,~~GAC5DA~~,~~EAAEG,kBAEFC,~~YAAW,~~WACT9B~~,EAAiB,CAAEQ,SAAQA,EAAEC,SAAQA,IAErC,~~IAAMsB~~,EAAY,~~SAACL~~,GACjBA,EAAEC,iBACFD,~~EAAEG~~,~~kBACF3B~~,IACA8B,SAASC,oBAAoB,~~UAAWF~~,EAC1C,~~EAEAC~~,SAASE,iBAAiB,~~UAAWH~~,EACtC,GAAE,EACL,~~EAaEI~~,aAX4D,SAACT,GAC7DA,EAAEC,iBACFD,~~EAAEG~~,~~kBACF5B~~,EAAgB,CAAEO,SAAQA,EAAEC,SAAQA,GACtC,EASF"}
1	+ {"version":3,"file":"hooks.js","sources":["../../../../../src/table/cell/hooks.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useEditActionContext } from \"../edit/provider\";\nimport { useColumnsContext } from \"../sheet/providers\";\nimport { DataObject, DataRecord, TColumnType } from \"../table/type\";\nimport { IdGenerator } from \"../libs\";\nimport { useRangeActionContext } from \"../range/provider\";\n\nexport function useCell(id: string, row: DataObject<DataRecord>) {\n const { startSelectRange, moveSelectRange, endSelectRange } =\n useRangeActionContext();\n const { startEditing } = useEditActionContext();\n const [rowIndex, colIndex] = IdGenerator.getCellIndex(id);\n const col = useColumnsContext()[colIndex];\n const value = row[col.key as string];\n\n const label =\n col.type === \"select\"\n ? col.options?.find((op) => op.value === value)?.label\n : value;\n\n const component = useMemo(() => {\n if (col.editable) {\n return label;\n } else {\n return col.render ? col.render(value as never, row) : label;\n }\n }, [col.editable, label, value, row]);\n\n const type: TColumnType \| \"component\" =\n !col.editable && col.render ? \"component\" : col.type;\n\n const onDoubleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n startEditing();\n };\n\n /*\n onBlurよりも先に発火するため、onBlurでendEditingを呼ぶと\n * すぐにstartEditingが呼ばれてしまうため、setTimeoutで遅延させる\n * これにより、endEditingが先に呼ばれるようになる\n */\n const onMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {\n setTimeout(() => {\n startSelectRange({ rowIndex, colIndex });\n\n const onMouseUp = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n endSelectRange();\n document.removeEventListener(\"mouseup\", onMouseUp);\n };\n\n document.addEventListener(\"mouseup\", onMouseUp);\n }, 0);\n };\n\n const onMouseEnter: React.MouseEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n e.stopPropagation();\n moveSelectRange({ rowIndex, colIndex });\n };\n\n return {\n type,\n component,\n onDoubleClick,\n onMouseDown,\n onMouseEnter,\n };\n}\n"],"names":["id","row","_c","useRangeActionContext","startSelectRange","moveSelectRange","endSelectRange","startEditing","useEditActionContext","_d","IdGenerator","getCellIndex","rowIndex","colIndex","col","useColumnsContext","value","key","label","type","_a","options","find","op","_b","component","useMemo","editable","render","onDoubleClick","e","preventDefault","onMouseDown","setTimeout","onMouseUp","stopPropagation","document","removeEventListener","addEventListener","onMouseEnter"],"mappings":"+LAOgB,SAAQA,EAAYC,WAC5BC,EACJC,EAAAA,wBADMC,EAAgBF,EAAAE,iBAAEC,EAAeH,EAAAG,gBAAEC,EAAcJ,EAAAI,eAEjDC,EAAiBC,sCACnBC,EAAuBC,EAAAA,YAAYC,aAAaX,GAA/CY,EAAQH,EAAA,GAAEI,OACXC,EAAMC,EAAAA,oBAAoBF,GAC1BG,EAAQf,EAAIa,EAAIG,KAEhBC,EACS,WAAbJ,EAAIK,KAC6C,UAAlC,QAAXC,EAAAN,EAAIO,eAAO,IAAAD,OAAA,EAAAA,EAAEE,MAAK,SAACC,GAAO,OAAAA,EAAGP,QAAUA,CAAb,WAAmB,IAAAQ,OAAA,EAAAA,EAAEN,MAC/CF,EAEAS,EAAYC,EAAAA,SAAQ,WACxB,OAAIZ,EAAIa,SACCT,EAEAJ,EAAIc,OAASd,EAAIc,OAAOZ,EAAgBf,GAAOiB,CAE1D,GAAG,CAACJ,EAAIa,SAAUT,EAAOF,EAAOf,IAoChC,MAAO,CACLkB,MAlCCL,EAAIa,UAAYb,EAAIc,OAAS,YAAcd,EAAIK,KAmChDM,UAASA,EACTI,cAlC6D,SAACC,GAC9DA,EAAEC,iBACFxB,GACF,EAgCEyB,YAzB2D,SAACF,GAC5DG,YAAW,WACT7B,EAAiB,CAAEQ,SAAQA,EAAEC,SAAQA,IAErC,IAAMqB,EAAY,SAACJ,GACjBA,EAAEC,iBACFD,EAAEK,kBACF7B,IACA8B,SAASC,oBAAoB,UAAWH,EAC1C,EAEAE,SAASE,iBAAiB,UAAWJ,EACtC,GAAE,EACL,EAaEK,aAX4D,SAACT,GAC7DA,EAAEC,iBACFD,EAAEK,kBACF9B,EAAgB,CAAEO,SAAQA,EAAEC,SAAQA,GACtC,EASF"}

package/dist/cjs/src/table/edit/ui/select-input.js CHANGED Viewed

@@ -1,3 +1,3 @@
 "use client";
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../provider.js"),r=require("../../../icon/cancel-icon.js");exports.SelectCellInput=function(u){var l=u.col,o=n.useEditActionContext().endEditing,i=u.row[l.key],a=t.useState(i),c=a[0],s=a[1],f=t.useRef(null);return t.useEffect((function(){f.current&&f.current.focus()}),[f]),l.editable?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:c,onChange:function(e){e.preventDefault(),s(e.target.value)},onBlur:function(e){e.preventDefault(),c!==i?function(e){l.editable&&l.onCellBlur(l.key,e,u.row,o)}(c):o()},onKeyDown:function(e){"Enter"===e.key&&e.preventDefault()},onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(s(i),o())},children:[l.allowEmpty&&e.jsx("option",{value:"",children:""==i?"-- 未選択 --":"-- 選択解除 --"},"TEPPEN/ReactUI Empty Option"),l.options.map((function(t){return e.jsx("option",{value:t.value,children:t.label},t.value)}))]}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),e.stopPropagation(),setTimeout((function(){s(i),o()}),300)},children:e.jsx(r.CancelIcon,{size:16})})]}):e.jsx(e.Fragment,{})};
+"use strict";var e=require("../../../../node_modules/tslib/tslib.es6.js"),t=require("react/jsx-runtime"),n=require("react"),o=require("../provider.js"),r=require("../../../icon/cancel-icon.js"),u=require("../../../select-box/index.js");exports.SelectCellInput=function(i){var s=i.col,c=o.useEditActionContext().endEditing,l=i.row[s.key],a=n.useState(l),f=a[0],d=a[1],p=n.useRef(null),v=n.useRef(null);n.useEffect((function(){v.current&&v.current.focus()}),[v]);var m=function(e){s.editable&&s.onCellBlur(s.key,e,i.row,c)};if(!s.editable)return t.jsx(t.Fragment,{});n.useEffect((function(){var e=function(e){var t=p.current,n=e.target;n instanceof Node&&(null==t?void 0:t.contains(n))||(f!==l?m(f):c())};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[f,m,c,l]);var x=n.useMemo((function(){return s.allowEmpty?e.__spreadArray([{value:"",label:""===l?"-- 未選択 --":"-- 選択解除 --"}],s.options,!0):s.options}),[s.options,s.allowEmpty,l]);return t.jsxs("div",{ref:p,className:"flex justify-between gap-1 w-full items-center",children:[t.jsx(u.SelectBox,{id:"TEPPEN/ReactUI SelectBox",inputRef:v,value:f,defaultIsOpen:!0,options:x,onSelect:function(e){d(e),m(e)}}),t.jsx("button",{onMouseDown:function(e){e.preventDefault(),e.stopPropagation(),setTimeout((function(){d(l),c()}),300)},children:t.jsx(r.CancelIcon,{size:16})})]})};
 //# sourceMappingURL=select-input.js.map

package/dist/esm/node_modules/react-icons/md/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{GenIcon as t}from"../lib/iconBase.js";import"../lib/iconContext.js";function i(i){return t({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0V0z",opacity:".87"},child:[]},{tag:"path",attr:{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"},child:[]}]})(i)}export{i as MdOutlineCancel};
+import{GenIcon as t}from"../lib/iconBase.js";import"../lib/iconContext.js";function i(i){return t({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0V0z"},child:[]},{tag:"path",attr:{d:"M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"},child:[]}]})(i)}function a(i){return t({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0V0z",opacity:".87"},child:[]},{tag:"path",attr:{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"},child:[]}]})(i)}export{a as MdOutlineCancel,i as MdOutlineKeyboardArrowLeft};
 //# sourceMappingURL=index.js.map