@teppen/react-ui 1.7.6 → 1.7.7
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.
- package/dist/cjs/src/select-box/index.js +1 -1
- package/dist/cjs/src/select-box/index.js.map +1 -1
- package/dist/cjs/src/select-box/parts/options-area.js +1 -1
- package/dist/cjs/src/select-box/parts/options-area.js.map +1 -1
- package/dist/esm/src/select-box/index.js +1 -1
- package/dist/esm/src/select-box/index.js.map +1 -1
- package/dist/esm/src/select-box/parts/options-area.js +1 -1
- package/dist/esm/src/select-box/parts/options-area.js.map +1 -1
- package/dist/index.d.ts +26 -4
- package/package.json +1 -1
|
@@ -1,2 +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,
|
|
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 s,d,c,l,v=n.useState(null!==(s=a.value)&&void 0!==s?s:""),f=v[0],p=v[1],m=n.useState(null!==(d=a.defaultIsOpen)&&void 0!==d&&d),w=m[0],g=m[1],x=n.useState(""),y=x[0],h=x[1],L=n.useState(void 0),I=L[0],S=L[1],E=function(e){p(e),a.onSelect(e),h(""),g(!1)},j=null!==(l=null===(c=a.options.find((function(e){return e.value===f})))||void 0===c?void 0:c.label)&&void 0!==l?l:"",b=n.useMemo((function(){return a.options.filter((function(e){return e.searchText?e.searchText.toLowerCase().includes(y.toLowerCase()):e.searchLabel?e.searchLabel.toLowerCase().includes(y.toLowerCase()):void e.label.toLowerCase().includes(y.toLowerCase())}))}),[a.options,y]);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))||(h(""),g(!1))};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[]),n.useEffect((function(){if(w){var e=function(e){"ArrowDown"===e.key?(e.preventDefault(),S((function(e){return"number"==typeof e?Math.min(e+1,b.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 I&&E(b[I].value))};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}S(void 0);var n=document.getElementById(i.IdGenerator.generateIdSelectBoxInputArea(a.id));if(n){var t=function(e){"ArrowDown"===e.key&&(e.preventDefault(),g(!0))};return n.addEventListener("keydown",t),function(){n.removeEventListener("keydown",t)}}}),[w,b,I,S]);var k=0===b.length?void 0:"number"==typeof I&&I<b.length?b[I].value:void 0;return e.jsx(u.IdProvider,{id:a.id,children:e.jsxs(o.SelectBoxFrame,{isOpen:w,onToggle:function(){return g((function(e){return!e}))},children:[e.jsx(t.InputArea,{inputRef:a.inputRef,isSelecting:w,selectedValue:j,searchText:y,onChangeSearchText:h}),w&&e.jsx(r.OptionsArea,{options:b,value:f,onSelect:E,selectingValue:k})]})})};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
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)
|
|
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 if (option.searchText) {\n return option.searchText\n .toLowerCase()\n .includes(searchText.toLowerCase());\n } else if (option.searchLabel) {\n return option.searchLabel\n .toLowerCase()\n .includes(searchText.toLowerCase());\n } else {\n option.label.toLowerCase().includes(searchText.toLowerCase());\n }\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","searchLabel","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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../id/provider.js"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../id/provider.js"),l=require("../lib/id-generator.js");exports.OptionsArea=function(n){var a=t.useIdContext();return r.useEffect((function(){var e,r=document.getElementById(l.IdGenerator.generateIdSelectBoxOption(a,null!==(e=n.selectingValue)&&void 0!==e?e:""));r&&r.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}),[n.selectingValue]),e.jsx("div",{id:l.IdGenerator.generateIdSelectBoxOptionsArea(a),className:"absolute top-full left-0 w-full max-h-[40vh] overflow-auto border border-gray-300",children:n.options.map((function(r){var t,o;return e.jsx("div",{id:l.IdGenerator.generateIdSelectBoxOption(a,null!==(t=r.value)&&void 0!==t?t:""),className:"hover:bg-gray-200 px-2 py-1 ".concat("string"==typeof n.selectingValue?n.selectingValue===r.value?"bg-gray-100":"bg-white":n.value===r.value?"bg-gray-100":"bg-white"),onClick:function(){return n.onSelect(r.value)},children:null!==(o=r.searchLabel)&&void 0!==o?o:r.label},r.value)}))})};
|
|
2
2
|
//# sourceMappingURL=options-area.js.map
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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.searchLabel ?? 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","_b","searchLabel","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,WAAW,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,SAAsB,QAAtBC,EAAAN,EAAOO,mBAAe,IAAAD,EAAAA,EAAAN,EAAOQ,OAHzBR,EAAOC,MAKf,KAGP"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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,
|
|
1
|
+
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 s,f,m,v,p=t(null!==(s=c.value)&&void 0!==s?s:""),w=p[0],g=p[1],y=t(null!==(f=c.defaultIsOpen)&&void 0!==f&&f),h=y[0],L=y[1],x=t(""),E=x[0],b=x[1],k=t(void 0),I=k[0],C=k[1],S=function(e){g(e),c.onSelect(e),b(""),L(!1)},j=null!==(v=null===(m=c.options.find((function(e){return e.value===w})))||void 0===m?void 0:m.label)&&void 0!==v?v:"",B=o((function(){return c.options.filter((function(e){return e.searchText?e.searchText.toLowerCase().includes(E.toLowerCase()):e.searchLabel?e.searchLabel.toLowerCase().includes(E.toLowerCase()):void e.label.toLowerCase().includes(E.toLowerCase())}))}),[c.options,E]);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))||(b(""),L(!1))};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[]),r((function(){if(h){var e=function(e){"ArrowDown"===e.key?(e.preventDefault(),C((function(e){return"number"==typeof e?Math.min(e+1,B.length-1):0}))):"ArrowUp"===e.key?(e.preventDefault(),C((function(e){return"number"==typeof e?Math.max(e-1,0):0}))):"Enter"===e.key&&(e.preventDefault(),"number"==typeof I&&S(B[I].value))};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}C(void 0);var n=document.getElementById(l.generateIdSelectBoxInputArea(c.id));if(n){var t=function(e){"ArrowDown"===e.key&&(e.preventDefault(),L(!0))};return n.addEventListener("keydown",t),function(){n.removeEventListener("keydown",t)}}}),[h,B,I,C]);var D=0===B.length?void 0:"number"==typeof I&&I<B.length?B[I].value:void 0;return e(d,{id:c.id,children:n(a,{isOpen:h,onToggle:function(){return L((function(e){return!e}))},children:[e(i,{inputRef:c.inputRef,isSelecting:h,selectedValue:j,searchText:E,onChangeSearchText:b}),h&&e(u,{options:B,value:w,onSelect:S,selectingValue:D})]})})}export{c as SelectBox};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
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)
|
|
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 if (option.searchText) {\n return option.searchText\n .toLowerCase()\n .includes(searchText.toLowerCase());\n } else if (option.searchLabel) {\n return option.searchLabel\n .toLowerCase()\n .includes(searchText.toLowerCase());\n } else {\n option.label.toLowerCase().includes(searchText.toLowerCase());\n }\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","searchLabel","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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{useEffect as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useEffect as r}from"react";import{useIdContext as t}from"../id/provider.js";import{IdGenerator as l}from"../lib/id-generator.js";function o(o){var n=t();return r((function(){var e,r=document.getElementById(l.generateIdSelectBoxOption(n,null!==(e=o.selectingValue)&&void 0!==e?e:""));r&&r.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}),[o.selectingValue]),e("div",{id:l.generateIdSelectBoxOptionsArea(n),className:"absolute top-full left-0 w-full max-h-[40vh] overflow-auto border border-gray-300",children:o.options.map((function(r){var t,a;return e("div",{id:l.generateIdSelectBoxOption(n,null!==(t=r.value)&&void 0!==t?t:""),className:"hover:bg-gray-200 px-2 py-1 ".concat("string"==typeof o.selectingValue?o.selectingValue===r.value?"bg-gray-100":"bg-white":o.value===r.value?"bg-gray-100":"bg-white"),onClick:function(){return o.onSelect(r.value)},children:null!==(a=r.searchLabel)&&void 0!==a?a:r.label},r.value)}))})}export{o as OptionsArea};
|
|
2
2
|
//# sourceMappingURL=options-area.js.map
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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.searchLabel ?? 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","_b","searchLabel","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,WAAW,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,SAAsB,QAAtBC,EAAAN,EAAOO,mBAAe,IAAAD,EAAAA,EAAAN,EAAOQ,OAHzBR,EAAOC,MAKf,KAGP"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
+
interface Options {
|
|
4
|
+
/**
|
|
5
|
+
* The label is the string that will be displayed for the option.
|
|
6
|
+
*/
|
|
7
|
+
label: string;
|
|
8
|
+
/**
|
|
9
|
+
* The value is the value of the option and will not be displayed.
|
|
10
|
+
*/
|
|
11
|
+
value: string;
|
|
12
|
+
/**
|
|
13
|
+
* The searchLabel is the string that will be displayed in the list of options when the user is selecting an option.
|
|
14
|
+
* The difference between label and searchLabel is that label is the string displayed when the option is selected,
|
|
15
|
+
* while searchLabel is the string displayed in the list of options during selection.
|
|
16
|
+
* If searchLabel is undefined, the list of options will display the label.
|
|
17
|
+
*/
|
|
18
|
+
searchLabel?: string;
|
|
19
|
+
/**
|
|
20
|
+
* The searchText is the string used for searching and filtering the list of options.
|
|
21
|
+
* For example, in the case of Japanese options, you can use hiragana or katakana readings in searchText,
|
|
22
|
+
* allowing users to search using hiragana even if the displayed label is in kanji.
|
|
23
|
+
* If searchText is undefined, the search will use searchLabel if defined, otherwise it will use label.
|
|
24
|
+
*/
|
|
25
|
+
searchText?: string;
|
|
26
|
+
}
|
|
27
|
+
|
|
3
28
|
type TStringValidateOption = {
|
|
4
29
|
maxLength?: number;
|
|
5
30
|
minLength?: number;
|
|
@@ -62,10 +87,7 @@ type TNumberCellEditingCondition<T extends DataRecord> = ({
|
|
|
62
87
|
}));
|
|
63
88
|
type TSelectCellEditingCondition<T extends DataRecord> = ({
|
|
64
89
|
type: "select";
|
|
65
|
-
options:
|
|
66
|
-
value: string;
|
|
67
|
-
label: string;
|
|
68
|
-
}[];
|
|
90
|
+
options: Options[];
|
|
69
91
|
} & ({
|
|
70
92
|
editable?: false;
|
|
71
93
|
render?: (value: string, row: DataObject<T>) => React.ReactNode;
|