@teppen/react-ui 1.7.2 → 1.7.3

package/dist/esm/src/select-box/id/provider.js

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

package/dist/esm/src/select-box/id/provider.js.map

@@ -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","IdProvider","_a","id","children","_jsx","Provider","value","useIdContext","useContext"],"mappings":"8FAEA,IAAMA,EAAYC,EAAsB,IAElC,SAAUC,EAAWC,OACzBC,EAAED,EAAAC,GACFC,EAAQF,EAAAE,SAKR,OAAOC,EAACN,EAAUO,SAAQ,CAACC,MAAOJ,EAAEC,SAAGA,GACzC,UAEgBI,IACd,OAAOC,EAAWV,EACpB"}

package/dist/esm/src/select-box/index.js

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

package/dist/esm/src/select-box/index.js.map

@@ -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":["SelectBox","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","SelectBoxFrame","onToggle","InputArea","inputRef","isSelecting","selectedValue","onChangeSearchText","OptionsArea"],"mappings":"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"}

package/dist/esm/src/select-box/lib/id-generator.js

@@ -0,0 +1,2 @@
+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,c){return""===n?"".concat(t,":option:").concat(c):"".concat(t,":").concat(n,":option:").concat(c)},n}();export{n as IdGenerator};
+//# sourceMappingURL=id-generator.js.map

package/dist/esm/src/select-box/lib/id-generator.js.map

@@ -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/esm/src/select-box/parts/frame.js

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

package/dist/esm/src/select-box/parts/frame.js.map

@@ -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":["SelectBoxFrame","props","id","useIdContext","_jsxs","IdGenerator","generateIdSelectBoxFrame","className","children","_jsx","onClick","e","isOpen","onToggle","stopPropagation","MdOutlineKeyboardArrowLeft","concat"],"mappings":"mPAUM,SAAUA,EAAeC,GAC7B,IAAMC,EAAKC,IAEX,OACEC,EACE,MAAA,CAAAF,GAAIG,EAAYC,yBAAyBJ,GACzCK,UAAU,kBAAiBC,SAAA,CAE3BC,SACEC,QAAS,SAACC,GACHV,EAAMW,QACTX,EAAMY,UAET,EAEAL,SAAAP,EAAMO,WAETC,EAAA,MAAA,CACEF,UAAU,wDACVG,QAAS,SAACC,GACRA,EAAEG,kBACFb,EAAMY,YACPL,SAEDC,EAACM,EAA0B,CACzBR,UAAW,gBAAAS,OAAgBf,EAAMW,OAAS,aAAe,UAKnE"}

package/dist/esm/src/select-box/parts/input-area.js

@@ -0,0 +1,3 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import{useIdContext as r}from"../id/provider.js";import{IdGenerator as t}from"../lib/id-generator.js";function a(a){var l=r();return e("input",{id:t.generateIdSelectBoxInputArea(l),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)}})}export{a as InputArea};
+//# sourceMappingURL=input-area.js.map

package/dist/esm/src/select-box/parts/input-area.js.map

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

package/dist/esm/src/select-box/parts/options-area.js

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

package/dist/esm/src/select-box/parts/options-area.js.map

@@ -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":["OptionsArea","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":"gLAYM,SAAUA,EAAYC,GAC1B,IAAMC,EAAKC,IAgBX,OAdAC,GAAU,iBACFC,EAAgBC,SAASC,eAC7BC,EAAYC,0BAA0BP,UAAIQ,EAAAT,EAAMU,8BAAkB,KAG/DN,GAELA,EAAcO,eAAe,CAC3BC,SAAU,SACVC,MAAO,UACPC,OAAQ,WAEZ,GAAG,CAACd,EAAMU,iBAGRK,SACEd,GAAIM,EAAYS,+BAA+Bf,GAC/CgB,UAAU,6FAETjB,EAAMkB,QAAQC,KAAI,SAACC,SAAW,OAC7BL,EACE,MAAA,CAAAd,GAAIM,EAAYC,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/esm/src/table/cell/hooks.js

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

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

@@ -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":["useCell","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":"wQAOgB,SAAAA,EAAQC,EAAYC,WAC5BC,EACJC,IADMC,EAAgBF,EAAAE,iBAAEC,EAAeH,EAAAG,gBAAEC,EAAcJ,EAAAI,eAEjDC,EAAiBC,iBACnBC,EAAuBC,EAAYC,aAAaX,GAA/CY,EAAQH,EAAA,GAAEI,OACXC,EAAMC,IAAoBF,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,GAAQ,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"}
+{"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":["useCell","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":"wQAOgB,SAAAA,EAAQC,EAAYC,WAC5BC,EACJC,IADMC,EAAgBF,EAAAE,iBAAEC,EAAeH,EAAAG,gBAAEC,EAAcJ,EAAAI,eAEjDC,EAAiBC,iBACnBC,EAAuBC,EAAYC,aAAaX,GAA/CY,EAAQH,EAAA,GAAEI,OACXC,EAAMC,IAAoBF,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,GAAQ,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/esm/src/table/edit/ui/select-input.js

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

package/package.json

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