matsuri-ui-base 0.0.0 → 0.0.1-alpha-8ba7e50.0
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/SelectField/index.d.ts +10 -1
- package/SelectField/index.js +14 -5
- package/SelectField/index.js.map +1 -1
- package/SelectField/stories/mock/index.d.ts +2 -0
- package/cjs/SelectField/index.js +13 -4
- package/cjs/SelectField/index.js.map +1 -1
- package/esm/SelectField/index.js +14 -5
- package/esm/SelectField/index.js.map +1 -1
- package/package.json +1 -1
- package/types/SelectField/index.d.ts +10 -1
- package/types/SelectField/stories/mock/index.d.ts +2 -0
package/SelectField/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ export interface SelectOptionValue {
|
|
|
11
11
|
keys?: string[];
|
|
12
12
|
[key: string]: unknown;
|
|
13
13
|
}
|
|
14
|
-
interface UseSelectFieldArgs<T extends SelectOptionValue> {
|
|
14
|
+
export interface UseSelectFieldArgs<T extends SelectOptionValue> {
|
|
15
15
|
/**
|
|
16
16
|
* 選択肢の初期値を指定する。
|
|
17
17
|
*/
|
|
@@ -49,6 +49,11 @@ interface UseSelectFieldArgs<T extends SelectOptionValue> {
|
|
|
49
49
|
* 選択肢が変更された時に呼ばれるコールバック関数を指定する。
|
|
50
50
|
*/
|
|
51
51
|
onChangeOption?: (option: T) => void;
|
|
52
|
+
/**
|
|
53
|
+
* 選択後にinput要素から離脱する
|
|
54
|
+
* @default false
|
|
55
|
+
*/
|
|
56
|
+
blurOnSelect?: boolean;
|
|
52
57
|
}
|
|
53
58
|
interface UseSelectFieldResult<T extends SelectOptionValue> {
|
|
54
59
|
/**
|
|
@@ -91,6 +96,10 @@ interface UseSelectFieldResult<T extends SelectOptionValue> {
|
|
|
91
96
|
* 全ての要素の親となる要素に渡すprops
|
|
92
97
|
*/
|
|
93
98
|
rootProps: React.ComponentPropsWithRef<"div">;
|
|
99
|
+
/**
|
|
100
|
+
* 擬似的なinput要素つまり検索用のinput要素にフォーカスしているかどうかを表すフラグ。
|
|
101
|
+
*/
|
|
102
|
+
isFocused: boolean;
|
|
94
103
|
}
|
|
95
104
|
export declare const useSelectField: <T extends SelectOptionValue>(args: UseSelectFieldArgs<T>) => UseSelectFieldResult<T>;
|
|
96
105
|
export {};
|
package/SelectField/index.js
CHANGED
|
@@ -154,6 +154,7 @@ export var useSelectField = args => {
|
|
|
154
154
|
options: propsOptions,
|
|
155
155
|
loadOptions = defaultLoadOptions,
|
|
156
156
|
treatQueryAsValue = false,
|
|
157
|
+
blurOnSelect = false,
|
|
157
158
|
defaultValue = undefined,
|
|
158
159
|
onChangeOption
|
|
159
160
|
} = args;
|
|
@@ -162,6 +163,7 @@ export var useSelectField = args => {
|
|
|
162
163
|
var [value, setValue] = useState(defaultValue);
|
|
163
164
|
var selectedOptionsCache = useRef(propsOptions);
|
|
164
165
|
var [options, setOptions] = useState(propsOptions);
|
|
166
|
+
var [isFocused, setIsFocused] = useState(false);
|
|
165
167
|
var rootRef = useRef(null);
|
|
166
168
|
var originalInputRef = useRef(null);
|
|
167
169
|
var listRef = useRef(null);
|
|
@@ -250,6 +252,10 @@ export var useSelectField = args => {
|
|
|
250
252
|
if (readOnly !== true) {
|
|
251
253
|
setOpen(true);
|
|
252
254
|
}
|
|
255
|
+
setIsFocused(true);
|
|
256
|
+
},
|
|
257
|
+
onBlur: () => {
|
|
258
|
+
setIsFocused(false);
|
|
253
259
|
},
|
|
254
260
|
onKeyDown: event => {
|
|
255
261
|
var {
|
|
@@ -318,10 +324,12 @@ export var useSelectField = args => {
|
|
|
318
324
|
*/
|
|
319
325
|
tabIndex: (value === undefined ? index === 0 : selected) ? -1 : -1,
|
|
320
326
|
onClick: () => {
|
|
321
|
-
var _pseudoInputRef$curre2;
|
|
322
327
|
updateValue(option);
|
|
323
328
|
setQuery("");
|
|
324
|
-
|
|
329
|
+
if (blurOnSelect === false) {
|
|
330
|
+
var _pseudoInputRef$curre2;
|
|
331
|
+
pseudoInputRef == null ? void 0 : (_pseudoInputRef$curre2 = pseudoInputRef.current) == null ? void 0 : _pseudoInputRef$curre2.focus();
|
|
332
|
+
}
|
|
325
333
|
setOpen(false);
|
|
326
334
|
},
|
|
327
335
|
onKeyDown: event => {
|
|
@@ -334,7 +342,7 @@ export var useSelectField = args => {
|
|
|
334
342
|
}
|
|
335
343
|
};
|
|
336
344
|
});
|
|
337
|
-
}, [options, updateValue, value]);
|
|
345
|
+
}, [blurOnSelect, options, updateValue, value]);
|
|
338
346
|
var result = useMemo(() => {
|
|
339
347
|
return {
|
|
340
348
|
displayValue,
|
|
@@ -345,9 +353,10 @@ export var useSelectField = args => {
|
|
|
345
353
|
pseudoInputProps,
|
|
346
354
|
listProps,
|
|
347
355
|
listItems,
|
|
348
|
-
rootProps
|
|
356
|
+
rootProps,
|
|
357
|
+
isFocused: isFocused
|
|
349
358
|
};
|
|
350
|
-
}, [displayValue, inputProps, listItems, listProps, open, pseudoInputProps, query, rootProps, value]);
|
|
359
|
+
}, [displayValue, inputProps, listItems, listProps, open, pseudoInputProps, query, rootProps, value, isFocused]);
|
|
351
360
|
return result;
|
|
352
361
|
};
|
|
353
362
|
//# sourceMappingURL=index.js.map
|
package/SelectField/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["useCallback","useEffect","useMemo","useRef","useState","useOnClickOutside","ref","handler","undefined","listener","event","Array","isArray","i","length","element","current","contains","composedPath","document","addEventListener","removeEventListener","getSearch","items","query","copy","slice","len","key","toLowerCase","c","tmp","res","j","index","keylen","keys","indexOf","score","_extends","sort","a","b","dispatchChangeEvent","value","_Object$getOwnPropert","nativeInputValueSetter","Object","getOwnPropertyDescriptor","tagName","HTMLInputElement","prototype","HTMLTextAreaElement","set","call","dispatchEvent","Event","bubbles","ownerDocument","node","nextItem","list","item","firstChild","nextElementSibling","previousItem","lastChild","previousElementSibling","moveFocus","currentFocus","traversalFunction","nextFocus","disabledFocus","disabled","getAttribute","focus","filterSelectOptionsByQuery","options","result","map","option","label","content","defaultLoadOptions","_ref2","_asyncToGenerator","_ref","_x","apply","arguments","useSelectField","args","readOnly","name","required","propsOptions","loadOptions","treatQueryAsValue","defaultValue","onChangeOption","open","setOpen","setQuery","setValue","selectedOptionsCache","setOptions","rootRef","originalInputRef","listRef","pseudoInputRef","selectedOptions","then","inputProps","tabIndex","autoComplete","autoCorrect","autoCapitalize","spellCheck","onFocus","_pseudoInputRef$curre","currentTarget","blur","displayValue","_ref3","_selectedOptionsCache","find","rootProps","updateValue","pseudoInputProps","onChange","onClick","activeElement","onKeyDown","prev","preventDefault","nativeEvent","isComposing","listProps","role","listItems","selected","props","_pseudoInputRef$curre2","click","openList"],"sources":["../../../src/SelectField/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst useOnClickOutside = (\n ref: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n handler?: (event: MouseEvent | TouchEvent) => void\n) => {\n useEffect(() => {\n if (!handler) {\n return undefined;\n }\n const listener = (event: MouseEvent | TouchEvent) => {\n if (Array.isArray(ref)) {\n for (let i = 0; i < ref.length; i++) {\n const element = ref[i].current;\n // 1つ目の要素がないからといって、2つ目の要素もなくクリック範囲に含まれていないとは言えない。\n if (element && element.contains(event.composedPath()[0] as Node)) {\n return;\n }\n }\n } else {\n if (\n !ref.current ||\n ref.current.contains(event.composedPath()[0] as Node)\n ) {\n return;\n }\n }\n\n handler(event);\n };\n\n document.addEventListener(\"mousedown\", listener);\n document.addEventListener(\"touchstart\", listener);\n\n return () => {\n document.removeEventListener(\"mousedown\", listener);\n document.removeEventListener(\"touchstart\", listener);\n };\n }, [ref, handler]);\n};\n\nconst getSearch = <\n T extends {\n keys: string[];\n }\n>(\n items: T[],\n query: string\n) => {\n const copy = items.slice();\n const len = items.length;\n const key = query.toLowerCase();\n let i = -1;\n let c = 0;\n let tmp: {\n keys: string[];\n };\n const res = new Array(len);\n while (++i !== len) {\n tmp = copy[i];\n /**\n * Caluculate Minimum Index\n */\n let j = -1;\n let index = -1;\n const keylen = tmp.keys.length;\n let current;\n while (++j !== keylen) {\n current = tmp.keys[j].toLowerCase().indexOf(key);\n if (index === -1 || (current !== -1 && current < index)) {\n index = current;\n }\n }\n /**\n * Caluculate Score\n */\n const score = index > -1 ? 1 / (index + 1) : 0;\n if (score > 0) {\n res[c++] = { ...tmp, score };\n }\n }\n\n res.length = c;\n res.sort((a, b) => {\n if (a.score <= b.score) {\n return 1;\n } else {\n return -1;\n }\n });\n return res;\n};\n\nconst dispatchChangeEvent = (\n element: HTMLInputElement | HTMLTextAreaElement,\n value?: string | number\n) => {\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n element.tagName.toLowerCase() === \"input\"\n ? HTMLInputElement.prototype\n : HTMLTextAreaElement.prototype,\n \"value\"\n )?.set;\n\n nativeInputValueSetter?.call(element, value);\n\n element.dispatchEvent(new Event(\"change\", { bubbles: true }));\n};\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n return (node && node.ownerDocument) || document;\n}\n\ntype TraversalFunction = (\n list: HTMLUListElement,\n item?: Element | null\n) => ChildNode | null;\n\nconst nextItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.firstChild;\n }\n if (item && item.nextElementSibling) {\n return item.nextElementSibling;\n }\n return list.firstChild;\n};\n\nconst previousItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.lastChild;\n }\n if (item && item.previousElementSibling) {\n return item.previousElementSibling;\n }\n return list.lastChild;\n};\n\nconst moveFocus = (\n list: HTMLUListElement,\n currentFocus: Element | null,\n traversalFunction: TraversalFunction\n) => {\n let nextFocus = traversalFunction(list, currentFocus) as HTMLElement | null;\n while (nextFocus) {\n if (\n currentFocus === null\n ? nextFocus === list.lastChild\n : nextFocus === currentFocus\n ) {\n break;\n }\n const disabledFocus =\n (nextFocus as HTMLInputElement).disabled ||\n nextFocus.getAttribute(\"aria-disabled\") === \"true\";\n if (disabledFocus) {\n nextFocus = traversalFunction(list, nextFocus) as HTMLElement;\n } else {\n nextFocus.focus();\n break;\n }\n }\n};\n\nexport const filterSelectOptionsByQuery = <\n T extends SelectOptionValue = SelectOptionValue\n>(\n options: T[],\n query: string\n) => {\n const result = getSearch(\n options.map((option) => {\n return {\n ...option,\n keys: option.keys || [option.label],\n content: option.value,\n };\n }),\n query\n );\n return result;\n};\n\nconst defaultLoadOptions = async <\n T extends SelectOptionValue = SelectOptionValue\n>({\n query,\n options,\n}: {\n query: string;\n options?: T[];\n}): Promise<T[] | undefined> => {\n if (options === undefined) {\n return undefined;\n }\n if (query === undefined) {\n return options;\n }\n const result = filterSelectOptionsByQuery(options, query);\n return result.length ? result : options;\n};\n\nexport type SelectLoadOptions<T extends SelectOptionValue = SelectOptionValue> =\n (args: {\n query: string;\n options?: T[];\n selectedOptions?: T[];\n }) => Promise<T[] | undefined>;\n\nexport interface SelectOptionValue {\n value: string | undefined;\n label: string;\n keys?: string[];\n [key: string]: unknown;\n}\n\ninterface UseSelectFieldArgs<T extends SelectOptionValue> {\n /**\n * 選択肢の初期値を指定する。\n */\n defaultValue?: string;\n /**\n * 選択肢の選択が可能かどうか指定する。\n * @default false\n */\n readOnly?: boolean;\n /**\n * 選択肢の選択が必須かどうか指定する。\n * @default false\n */\n required?: boolean;\n /**\n * input要素に渡したいname属性を指定する。\n */\n name?: string;\n /**\n * queryに応じて選択肢をロードする関数を指定する。\n * この関数で返された選択肢が、選択肢として表示される。\n */\n loadOptions?: SelectLoadOptions<T>;\n /**\n * 選択肢を指定する。\n * 各選択肢は、valueとlabel及び任意のプロパティを持つオブジェクトである必要がある。\n */\n options?: T[];\n /**\n * このフラグがtrueの場合、queryもvalueとして扱えるようになる\n * @default false\n */\n treatQueryAsValue?: boolean;\n /**\n * 選択肢が変更された時に呼ばれるコールバック関数を指定する。\n */\n onChangeOption?: (option: T) => void;\n}\n\ninterface UseSelectFieldResult<T extends SelectOptionValue> {\n /**\n * 表示用の文字列。\n */\n displayValue: string | undefined;\n /**\n * 検索用に入力された文字列。\n */\n query: string;\n /**\n * input要素に渡される値。\n */\n value: string | undefined;\n /**\n * 選択肢のリストを開くかどうか。\n */\n openList: boolean;\n /**\n * 実態となるinput要素に渡すprops\n */\n inputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 擬似的なinput要素つまり検索用のinput要素に渡すprops\n */\n pseudoInputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 選択肢のリストに渡すprops\n */\n listProps: React.ComponentPropsWithRef<\"ul\">;\n /**\n * 選択肢のリストの各要素に渡すpropsと、各選択肢、及びkeyを持つオブジェクトの配列。\n */\n listItems?: {\n key: string;\n option: T;\n props: React.ComponentPropsWithoutRef<\"li\">;\n }[];\n /**\n * 全ての要素の親となる要素に渡すprops\n */\n rootProps: React.ComponentPropsWithRef<\"div\">;\n}\n\nexport const useSelectField = <T extends SelectOptionValue>(\n args: UseSelectFieldArgs<T>\n): UseSelectFieldResult<T> => {\n const {\n readOnly = false,\n name,\n required = false,\n options: propsOptions,\n loadOptions = defaultLoadOptions,\n treatQueryAsValue = false,\n defaultValue = undefined,\n onChangeOption,\n } = args;\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [value, setValue] = useState<string | undefined>(defaultValue);\n\n const selectedOptionsCache = useRef<T[] | undefined>(propsOptions);\n const [options, setOptions] = useState(propsOptions);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const originalInputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLUListElement>(null);\n const pseudoInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n void loadOptions({\n query,\n options: propsOptions,\n selectedOptions: selectedOptionsCache.current,\n }).then((result) => {\n setOptions(result);\n });\n }, [propsOptions, loadOptions, query]);\n\n const inputProps = useMemo((): React.ComponentPropsWithRef<\"input\"> => {\n return {\n ref: originalInputRef,\n required: required,\n name: name,\n defaultValue: value,\n key: value,\n tabIndex: -1,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n autoCapitalize: \"none\",\n spellCheck: false,\n onFocus: (event) => {\n event.currentTarget.blur();\n pseudoInputRef.current?.focus();\n },\n };\n }, [name, required, value]);\n\n const displayValue = useMemo(() => {\n return (\n selectedOptionsCache.current?.find((option) => option.value === value) ||\n options?.find((option) => option.value === value)\n )?.label;\n }, [options, value]);\n\n const rootProps = useMemo(() => {\n return {\n ref: rootRef,\n };\n }, []);\n\n useOnClickOutside([rootRef, listRef], () => {\n setOpen(false);\n setQuery(\"\");\n });\n\n const updateValue = useCallback(\n (option: T) => {\n const value = option.value;\n setValue(value);\n if (onChangeOption) {\n onChangeOption(option);\n }\n selectedOptionsCache.current = options;\n if (originalInputRef.current) {\n dispatchChangeEvent(originalInputRef.current, value);\n }\n },\n [onChangeOption, options]\n );\n\n const pseudoInputProps = useMemo((): React.ComponentPropsWithRef<\"input\"> => {\n return {\n ref: pseudoInputRef,\n value: query,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n autoCapitalize: \"none\",\n spellCheck: false,\n tabIndex: 0,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n const query = event.currentTarget.value;\n setQuery(query);\n if (treatQueryAsValue) {\n updateValue({\n label: query,\n value: query,\n } as T);\n }\n },\n onClick: (event) => {\n /**\n * ユーザーがフォーカスされている状態で入力要素をクリックするのは、\n * ユーザーが選択肢を一度選択してから再度選択したいケースと想定されるため、リストを再度開く。\n */\n if (event.currentTarget === document.activeElement) {\n setOpen(true);\n }\n },\n onFocus: () => {\n if (readOnly !== true) {\n setOpen(true);\n }\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n const { key } = event;\n if (key === \"Delete\" || key === \"Backspace\") {\n setQuery((prev) => {\n if (prev === \"\") {\n setValue(undefined);\n }\n return prev;\n });\n } else if (key === \"ArrowDown\") {\n event.preventDefault();\n const list = listRef.current;\n if (list) {\n moveFocus(list, null, nextItem);\n }\n } else if (\n treatQueryAsValue &&\n event.nativeEvent.isComposing === false &&\n key === \"Enter\"\n ) {\n if (treatQueryAsValue) {\n selectedOptionsCache.current = [\n {\n value: query,\n label: query,\n } as T,\n ];\n }\n setOpen(false);\n } else if (event.key.length === 1) {\n setOpen(true);\n }\n },\n };\n }, [query, treatQueryAsValue, updateValue, readOnly]);\n\n const listProps = useMemo(() => {\n return {\n ref: listRef,\n role: \"listbox\",\n tabIndex: -1,\n onKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => {\n const key = event.key;\n const list = listRef.current;\n if (list === null) {\n return;\n }\n const currentFocus = ownerDocument(list).activeElement;\n if (key === \"ArrowDown\") {\n event.preventDefault();\n moveFocus(list, currentFocus, nextItem);\n } else if (key === \"ArrowUp\") {\n event.preventDefault();\n moveFocus(list, currentFocus, previousItem);\n }\n },\n };\n }, []);\n\n const listItems = useMemo(() => {\n return options?.map((option, index) => {\n const selected = option.value === value;\n return {\n key: `${option.value}-${index}`,\n option,\n props: {\n role: \"option\",\n \"aria-selected\": selected,\n /**\n * 何も選択されていないときは、先頭のオプションに飛べるようにする\n */\n tabIndex: (value === undefined ? index === 0 : selected) ? -1 : -1,\n onClick: () => {\n updateValue(option);\n setQuery(\"\");\n pseudoInputRef?.current?.focus();\n setOpen(false);\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLLIElement>) => {\n const key = event.key;\n if (key === \"Enter\" || key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n },\n },\n };\n });\n }, [options, updateValue, value]);\n\n const result = useMemo(() => {\n return {\n displayValue,\n query,\n value,\n openList: open,\n inputProps,\n pseudoInputProps,\n listProps,\n listItems,\n rootProps,\n };\n }, [\n displayValue,\n inputProps,\n listItems,\n listProps,\n open,\n pseudoInputProps,\n query,\n rootProps,\n value,\n ]);\n return result;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["useCallback","useEffect","useMemo","useRef","useState","useOnClickOutside","ref","handler","undefined","listener","event","Array","isArray","i","length","element","current","contains","composedPath","document","addEventListener","removeEventListener","getSearch","items","query","copy","slice","len","key","toLowerCase","c","tmp","res","j","index","keylen","keys","indexOf","score","_extends","sort","a","b","dispatchChangeEvent","value","_Object$getOwnPropert","nativeInputValueSetter","Object","getOwnPropertyDescriptor","tagName","HTMLInputElement","prototype","HTMLTextAreaElement","set","call","dispatchEvent","Event","bubbles","ownerDocument","node","nextItem","list","item","firstChild","nextElementSibling","previousItem","lastChild","previousElementSibling","moveFocus","currentFocus","traversalFunction","nextFocus","disabledFocus","disabled","getAttribute","focus","filterSelectOptionsByQuery","options","result","map","option","label","content","defaultLoadOptions","_ref2","_asyncToGenerator","_ref","_x","apply","arguments","useSelectField","args","readOnly","name","required","propsOptions","loadOptions","treatQueryAsValue","blurOnSelect","defaultValue","onChangeOption","open","setOpen","setQuery","setValue","selectedOptionsCache","setOptions","isFocused","setIsFocused","rootRef","originalInputRef","listRef","pseudoInputRef","selectedOptions","then","inputProps","tabIndex","autoComplete","autoCorrect","autoCapitalize","spellCheck","onFocus","_pseudoInputRef$curre","currentTarget","blur","displayValue","_ref3","_selectedOptionsCache","find","rootProps","updateValue","pseudoInputProps","onChange","onClick","activeElement","onBlur","onKeyDown","prev","preventDefault","nativeEvent","isComposing","listProps","role","listItems","selected","props","_pseudoInputRef$curre2","click","openList"],"sources":["../../../src/SelectField/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst useOnClickOutside = (\n ref: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n handler?: (event: MouseEvent | TouchEvent) => void\n) => {\n useEffect(() => {\n if (!handler) {\n return undefined;\n }\n const listener = (event: MouseEvent | TouchEvent) => {\n if (Array.isArray(ref)) {\n for (let i = 0; i < ref.length; i++) {\n const element = ref[i].current;\n // 1つ目の要素がないからといって、2つ目の要素もなくクリック範囲に含まれていないとは言えない。\n if (element && element.contains(event.composedPath()[0] as Node)) {\n return;\n }\n }\n } else {\n if (\n !ref.current ||\n ref.current.contains(event.composedPath()[0] as Node)\n ) {\n return;\n }\n }\n\n handler(event);\n };\n\n document.addEventListener(\"mousedown\", listener);\n document.addEventListener(\"touchstart\", listener);\n\n return () => {\n document.removeEventListener(\"mousedown\", listener);\n document.removeEventListener(\"touchstart\", listener);\n };\n }, [ref, handler]);\n};\n\nconst getSearch = <\n T extends {\n keys: string[];\n }\n>(\n items: T[],\n query: string\n) => {\n const copy = items.slice();\n const len = items.length;\n const key = query.toLowerCase();\n let i = -1;\n let c = 0;\n let tmp: {\n keys: string[];\n };\n const res = new Array(len);\n while (++i !== len) {\n tmp = copy[i];\n /**\n * Caluculate Minimum Index\n */\n let j = -1;\n let index = -1;\n const keylen = tmp.keys.length;\n let current;\n while (++j !== keylen) {\n current = tmp.keys[j].toLowerCase().indexOf(key);\n if (index === -1 || (current !== -1 && current < index)) {\n index = current;\n }\n }\n /**\n * Caluculate Score\n */\n const score = index > -1 ? 1 / (index + 1) : 0;\n if (score > 0) {\n res[c++] = { ...tmp, score };\n }\n }\n\n res.length = c;\n res.sort((a, b) => {\n if (a.score <= b.score) {\n return 1;\n } else {\n return -1;\n }\n });\n return res;\n};\n\nconst dispatchChangeEvent = (\n element: HTMLInputElement | HTMLTextAreaElement,\n value?: string | number\n) => {\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n element.tagName.toLowerCase() === \"input\"\n ? HTMLInputElement.prototype\n : HTMLTextAreaElement.prototype,\n \"value\"\n )?.set;\n\n nativeInputValueSetter?.call(element, value);\n\n element.dispatchEvent(new Event(\"change\", { bubbles: true }));\n};\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n return (node && node.ownerDocument) || document;\n}\n\ntype TraversalFunction = (\n list: HTMLUListElement,\n item?: Element | null\n) => ChildNode | null;\n\nconst nextItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.firstChild;\n }\n if (item && item.nextElementSibling) {\n return item.nextElementSibling;\n }\n return list.firstChild;\n};\n\nconst previousItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.lastChild;\n }\n if (item && item.previousElementSibling) {\n return item.previousElementSibling;\n }\n return list.lastChild;\n};\n\nconst moveFocus = (\n list: HTMLUListElement,\n currentFocus: Element | null,\n traversalFunction: TraversalFunction\n) => {\n let nextFocus = traversalFunction(list, currentFocus) as HTMLElement | null;\n while (nextFocus) {\n if (\n currentFocus === null\n ? nextFocus === list.lastChild\n : nextFocus === currentFocus\n ) {\n break;\n }\n const disabledFocus =\n (nextFocus as HTMLInputElement).disabled ||\n nextFocus.getAttribute(\"aria-disabled\") === \"true\";\n if (disabledFocus) {\n nextFocus = traversalFunction(list, nextFocus) as HTMLElement;\n } else {\n nextFocus.focus();\n break;\n }\n }\n};\n\nexport const filterSelectOptionsByQuery = <\n T extends SelectOptionValue = SelectOptionValue\n>(\n options: T[],\n query: string\n) => {\n const result = getSearch(\n options.map((option) => {\n return {\n ...option,\n keys: option.keys || [option.label],\n content: option.value,\n };\n }),\n query\n );\n return result;\n};\n\nconst defaultLoadOptions = async <\n T extends SelectOptionValue = SelectOptionValue\n>({\n query,\n options,\n}: {\n query: string;\n options?: T[];\n}): Promise<T[] | undefined> => {\n if (options === undefined) {\n return undefined;\n }\n if (query === undefined) {\n return options;\n }\n const result = filterSelectOptionsByQuery(options, query);\n return result.length ? result : options;\n};\n\nexport type SelectLoadOptions<T extends SelectOptionValue = SelectOptionValue> =\n (args: {\n query: string;\n options?: T[];\n selectedOptions?: T[];\n }) => Promise<T[] | undefined>;\n\nexport interface SelectOptionValue {\n value: string | undefined;\n label: string;\n keys?: string[];\n [key: string]: unknown;\n}\n\nexport interface UseSelectFieldArgs<T extends SelectOptionValue> {\n /**\n * 選択肢の初期値を指定する。\n */\n defaultValue?: string;\n /**\n * 選択肢の選択が可能かどうか指定する。\n * @default false\n */\n readOnly?: boolean;\n /**\n * 選択肢の選択が必須かどうか指定する。\n * @default false\n */\n required?: boolean;\n /**\n * input要素に渡したいname属性を指定する。\n */\n name?: string;\n /**\n * queryに応じて選択肢をロードする関数を指定する。\n * この関数で返された選択肢が、選択肢として表示される。\n */\n loadOptions?: SelectLoadOptions<T>;\n /**\n * 選択肢を指定する。\n * 各選択肢は、valueとlabel及び任意のプロパティを持つオブジェクトである必要がある。\n */\n options?: T[];\n /**\n * このフラグがtrueの場合、queryもvalueとして扱えるようになる\n * @default false\n */\n treatQueryAsValue?: boolean;\n /**\n * 選択肢が変更された時に呼ばれるコールバック関数を指定する。\n */\n onChangeOption?: (option: T) => void;\n /**\n * 選択後にinput要素から離脱する\n * @default false\n */\n blurOnSelect?: boolean;\n}\n\ninterface UseSelectFieldResult<T extends SelectOptionValue> {\n /**\n * 表示用の文字列。\n */\n displayValue: string | undefined;\n /**\n * 検索用に入力された文字列。\n */\n query: string;\n /**\n * input要素に渡される値。\n */\n value: string | undefined;\n /**\n * 選択肢のリストを開くかどうか。\n */\n openList: boolean;\n /**\n * 実態となるinput要素に渡すprops\n */\n inputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 擬似的なinput要素つまり検索用のinput要素に渡すprops\n */\n pseudoInputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 選択肢のリストに渡すprops\n */\n listProps: React.ComponentPropsWithRef<\"ul\">;\n /**\n * 選択肢のリストの各要素に渡すpropsと、各選択肢、及びkeyを持つオブジェクトの配列。\n */\n listItems?: {\n key: string;\n option: T;\n props: React.ComponentPropsWithoutRef<\"li\">;\n }[];\n /**\n * 全ての要素の親となる要素に渡すprops\n */\n rootProps: React.ComponentPropsWithRef<\"div\">;\n /**\n * 擬似的なinput要素つまり検索用のinput要素にフォーカスしているかどうかを表すフラグ。\n */\n isFocused: boolean;\n}\n\nexport const useSelectField = <T extends SelectOptionValue>(\n args: UseSelectFieldArgs<T>\n): UseSelectFieldResult<T> => {\n const {\n readOnly = false,\n name,\n required = false,\n options: propsOptions,\n loadOptions = defaultLoadOptions,\n treatQueryAsValue = false,\n blurOnSelect = false,\n defaultValue = undefined,\n onChangeOption,\n } = args;\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [value, setValue] = useState<string | undefined>(defaultValue);\n const selectedOptionsCache = useRef<T[] | undefined>(propsOptions);\n const [options, setOptions] = useState(propsOptions);\n const [isFocused, setIsFocused] = useState(false);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const originalInputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLUListElement>(null);\n const pseudoInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n void loadOptions({\n query,\n options: propsOptions,\n selectedOptions: selectedOptionsCache.current,\n }).then((result) => {\n setOptions(result);\n });\n }, [propsOptions, loadOptions, query]);\n\n const inputProps = useMemo((): React.ComponentPropsWithRef<\"input\"> => {\n return {\n ref: originalInputRef,\n required: required,\n name: name,\n defaultValue: value,\n key: value,\n tabIndex: -1,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n autoCapitalize: \"none\",\n spellCheck: false,\n onFocus: (event) => {\n event.currentTarget.blur();\n pseudoInputRef.current?.focus();\n },\n };\n }, [name, required, value]);\n\n const displayValue = useMemo(() => {\n return (\n selectedOptionsCache.current?.find((option) => option.value === value) ||\n options?.find((option) => option.value === value)\n )?.label;\n }, [options, value]);\n\n const rootProps = useMemo(() => {\n return {\n ref: rootRef,\n };\n }, []);\n\n useOnClickOutside([rootRef, listRef], () => {\n setOpen(false);\n setQuery(\"\");\n });\n\n const updateValue = useCallback(\n (option: T) => {\n const value = option.value;\n setValue(value);\n if (onChangeOption) {\n onChangeOption(option);\n }\n selectedOptionsCache.current = options;\n if (originalInputRef.current) {\n dispatchChangeEvent(originalInputRef.current, value);\n }\n },\n [onChangeOption, options]\n );\n\n const pseudoInputProps = useMemo(() => {\n return {\n ref: pseudoInputRef,\n value: query,\n autoComplete: \"off\" as const,\n autoCorrect: \"off\" as const,\n autoCapitalize: \"none\" as const,\n spellCheck: false,\n tabIndex: 0,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n const query = event.currentTarget.value;\n setQuery(query);\n if (treatQueryAsValue) {\n updateValue({\n label: query,\n value: query,\n } as T);\n }\n },\n onClick: (event: React.MouseEvent<HTMLInputElement>) => {\n /**\n * ユーザーがフォーカスされている状態で入力要素をクリックするのは、\n * ユーザーが選択肢を一度選択してから再度選択したいケースと想定されるため、リストを再度開く。\n */\n if (event.currentTarget === document.activeElement) {\n setOpen(true);\n }\n },\n onFocus: () => {\n if (readOnly !== true) {\n setOpen(true);\n }\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n const { key } = event;\n if (key === \"Delete\" || key === \"Backspace\") {\n setQuery((prev) => {\n if (prev === \"\") {\n setValue(undefined);\n }\n return prev;\n });\n } else if (key === \"ArrowDown\") {\n event.preventDefault();\n const list = listRef.current;\n if (list) {\n moveFocus(list, null, nextItem);\n }\n } else if (\n treatQueryAsValue &&\n event.nativeEvent.isComposing === false &&\n key === \"Enter\"\n ) {\n if (treatQueryAsValue) {\n selectedOptionsCache.current = [\n {\n value: query,\n label: query,\n } as T,\n ];\n }\n setOpen(false);\n } else if (event.key.length === 1) {\n setOpen(true);\n }\n },\n };\n }, [query, treatQueryAsValue, updateValue, readOnly]);\n\n const listProps = useMemo(() => {\n return {\n ref: listRef,\n role: \"listbox\",\n tabIndex: -1,\n onKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => {\n const key = event.key;\n const list = listRef.current;\n if (list === null) {\n return;\n }\n const currentFocus = ownerDocument(list).activeElement;\n if (key === \"ArrowDown\") {\n event.preventDefault();\n moveFocus(list, currentFocus, nextItem);\n } else if (key === \"ArrowUp\") {\n event.preventDefault();\n moveFocus(list, currentFocus, previousItem);\n }\n },\n };\n }, []);\n\n const listItems = useMemo(() => {\n return options?.map((option, index) => {\n const selected = option.value === value;\n return {\n key: `${option.value}-${index}`,\n option,\n props: {\n role: \"option\",\n \"aria-selected\": selected,\n /**\n * 何も選択されていないときは、先頭のオプションに飛べるようにする\n */\n tabIndex: (value === undefined ? index === 0 : selected) ? -1 : -1,\n onClick: () => {\n updateValue(option);\n setQuery(\"\");\n if (blurOnSelect === false) {\n pseudoInputRef?.current?.focus();\n }\n setOpen(false);\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLLIElement>) => {\n const key = event.key;\n if (key === \"Enter\" || key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n },\n },\n };\n });\n }, [blurOnSelect, options, updateValue, value]);\n\n const result = useMemo(() => {\n return {\n displayValue,\n query,\n value,\n openList: open,\n inputProps,\n pseudoInputProps,\n listProps,\n listItems,\n rootProps,\n isFocused: isFocused,\n };\n }, [\n displayValue,\n inputProps,\n listItems,\n listProps,\n open,\n pseudoInputProps,\n query,\n rootProps,\n value,\n isFocused,\n ]);\n return result;\n};\n"],"mappings":"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"}
|
package/cjs/SelectField/index.js
CHANGED
|
@@ -151,6 +151,7 @@ const useSelectField = args => {
|
|
|
151
151
|
options: propsOptions,
|
|
152
152
|
loadOptions = defaultLoadOptions,
|
|
153
153
|
treatQueryAsValue = false,
|
|
154
|
+
blurOnSelect = false,
|
|
154
155
|
defaultValue = undefined,
|
|
155
156
|
onChangeOption
|
|
156
157
|
} = args;
|
|
@@ -159,6 +160,7 @@ const useSelectField = args => {
|
|
|
159
160
|
const [value, setValue] = (0, _react.useState)(defaultValue);
|
|
160
161
|
const selectedOptionsCache = (0, _react.useRef)(propsOptions);
|
|
161
162
|
const [options, setOptions] = (0, _react.useState)(propsOptions);
|
|
163
|
+
const [isFocused, setIsFocused] = (0, _react.useState)(false);
|
|
162
164
|
const rootRef = (0, _react.useRef)(null);
|
|
163
165
|
const originalInputRef = (0, _react.useRef)(null);
|
|
164
166
|
const listRef = (0, _react.useRef)(null);
|
|
@@ -245,6 +247,10 @@ const useSelectField = args => {
|
|
|
245
247
|
if (readOnly !== true) {
|
|
246
248
|
setOpen(true);
|
|
247
249
|
}
|
|
250
|
+
setIsFocused(true);
|
|
251
|
+
},
|
|
252
|
+
onBlur: () => {
|
|
253
|
+
setIsFocused(false);
|
|
248
254
|
},
|
|
249
255
|
onKeyDown: event => {
|
|
250
256
|
const {
|
|
@@ -315,7 +321,9 @@ const useSelectField = args => {
|
|
|
315
321
|
onClick: () => {
|
|
316
322
|
updateValue(option);
|
|
317
323
|
setQuery("");
|
|
318
|
-
|
|
324
|
+
if (blurOnSelect === false) {
|
|
325
|
+
pseudoInputRef?.current?.focus();
|
|
326
|
+
}
|
|
319
327
|
setOpen(false);
|
|
320
328
|
},
|
|
321
329
|
onKeyDown: event => {
|
|
@@ -328,7 +336,7 @@ const useSelectField = args => {
|
|
|
328
336
|
}
|
|
329
337
|
};
|
|
330
338
|
});
|
|
331
|
-
}, [options, updateValue, value]);
|
|
339
|
+
}, [blurOnSelect, options, updateValue, value]);
|
|
332
340
|
const result = (0, _react.useMemo)(() => {
|
|
333
341
|
return {
|
|
334
342
|
displayValue,
|
|
@@ -339,9 +347,10 @@ const useSelectField = args => {
|
|
|
339
347
|
pseudoInputProps,
|
|
340
348
|
listProps,
|
|
341
349
|
listItems,
|
|
342
|
-
rootProps
|
|
350
|
+
rootProps,
|
|
351
|
+
isFocused: isFocused
|
|
343
352
|
};
|
|
344
|
-
}, [displayValue, inputProps, listItems, listProps, open, pseudoInputProps, query, rootProps, value]);
|
|
353
|
+
}, [displayValue, inputProps, listItems, listProps, open, pseudoInputProps, query, rootProps, value, isFocused]);
|
|
345
354
|
return result;
|
|
346
355
|
};
|
|
347
356
|
exports.useSelectField = useSelectField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","useOnClickOutside","ref","handler","useEffect","undefined","listener","event","Array","isArray","i","length","element","current","contains","composedPath","document","addEventListener","removeEventListener","getSearch","items","query","copy","slice","len","key","toLowerCase","c","tmp","res","j","index","keylen","keys","indexOf","score","sort","a","b","dispatchChangeEvent","value","nativeInputValueSetter","Object","getOwnPropertyDescriptor","tagName","HTMLInputElement","prototype","HTMLTextAreaElement","set","call","dispatchEvent","Event","bubbles","ownerDocument","node","nextItem","list","item","firstChild","nextElementSibling","previousItem","lastChild","previousElementSibling","moveFocus","currentFocus","traversalFunction","nextFocus","disabledFocus","disabled","getAttribute","focus","filterSelectOptionsByQuery","options","result","map","option","label","content","exports","defaultLoadOptions","useSelectField","args","readOnly","name","required","propsOptions","loadOptions","treatQueryAsValue","defaultValue","onChangeOption","open","setOpen","useState","setQuery","setValue","selectedOptionsCache","useRef","setOptions","rootRef","originalInputRef","listRef","pseudoInputRef","selectedOptions","then","inputProps","useMemo","tabIndex","autoComplete","autoCorrect","autoCapitalize","spellCheck","onFocus","currentTarget","blur","displayValue","find","rootProps","updateValue","useCallback","pseudoInputProps","onChange","onClick","activeElement","onKeyDown","prev","preventDefault","nativeEvent","isComposing","listProps","role","listItems","selected","props","click","openList"],"sources":["../../../src/SelectField/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst useOnClickOutside = (\n ref: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n handler?: (event: MouseEvent | TouchEvent) => void\n) => {\n useEffect(() => {\n if (!handler) {\n return undefined;\n }\n const listener = (event: MouseEvent | TouchEvent) => {\n if (Array.isArray(ref)) {\n for (let i = 0; i < ref.length; i++) {\n const element = ref[i].current;\n // 1つ目の要素がないからといって、2つ目の要素もなくクリック範囲に含まれていないとは言えない。\n if (element && element.contains(event.composedPath()[0] as Node)) {\n return;\n }\n }\n } else {\n if (\n !ref.current ||\n ref.current.contains(event.composedPath()[0] as Node)\n ) {\n return;\n }\n }\n\n handler(event);\n };\n\n document.addEventListener(\"mousedown\", listener);\n document.addEventListener(\"touchstart\", listener);\n\n return () => {\n document.removeEventListener(\"mousedown\", listener);\n document.removeEventListener(\"touchstart\", listener);\n };\n }, [ref, handler]);\n};\n\nconst getSearch = <\n T extends {\n keys: string[];\n }\n>(\n items: T[],\n query: string\n) => {\n const copy = items.slice();\n const len = items.length;\n const key = query.toLowerCase();\n let i = -1;\n let c = 0;\n let tmp: {\n keys: string[];\n };\n const res = new Array(len);\n while (++i !== len) {\n tmp = copy[i];\n /**\n * Caluculate Minimum Index\n */\n let j = -1;\n let index = -1;\n const keylen = tmp.keys.length;\n let current;\n while (++j !== keylen) {\n current = tmp.keys[j].toLowerCase().indexOf(key);\n if (index === -1 || (current !== -1 && current < index)) {\n index = current;\n }\n }\n /**\n * Caluculate Score\n */\n const score = index > -1 ? 1 / (index + 1) : 0;\n if (score > 0) {\n res[c++] = { ...tmp, score };\n }\n }\n\n res.length = c;\n res.sort((a, b) => {\n if (a.score <= b.score) {\n return 1;\n } else {\n return -1;\n }\n });\n return res;\n};\n\nconst dispatchChangeEvent = (\n element: HTMLInputElement | HTMLTextAreaElement,\n value?: string | number\n) => {\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n element.tagName.toLowerCase() === \"input\"\n ? HTMLInputElement.prototype\n : HTMLTextAreaElement.prototype,\n \"value\"\n )?.set;\n\n nativeInputValueSetter?.call(element, value);\n\n element.dispatchEvent(new Event(\"change\", { bubbles: true }));\n};\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n return (node && node.ownerDocument) || document;\n}\n\ntype TraversalFunction = (\n list: HTMLUListElement,\n item?: Element | null\n) => ChildNode | null;\n\nconst nextItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.firstChild;\n }\n if (item && item.nextElementSibling) {\n return item.nextElementSibling;\n }\n return list.firstChild;\n};\n\nconst previousItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.lastChild;\n }\n if (item && item.previousElementSibling) {\n return item.previousElementSibling;\n }\n return list.lastChild;\n};\n\nconst moveFocus = (\n list: HTMLUListElement,\n currentFocus: Element | null,\n traversalFunction: TraversalFunction\n) => {\n let nextFocus = traversalFunction(list, currentFocus) as HTMLElement | null;\n while (nextFocus) {\n if (\n currentFocus === null\n ? nextFocus === list.lastChild\n : nextFocus === currentFocus\n ) {\n break;\n }\n const disabledFocus =\n (nextFocus as HTMLInputElement).disabled ||\n nextFocus.getAttribute(\"aria-disabled\") === \"true\";\n if (disabledFocus) {\n nextFocus = traversalFunction(list, nextFocus) as HTMLElement;\n } else {\n nextFocus.focus();\n break;\n }\n }\n};\n\nexport const filterSelectOptionsByQuery = <\n T extends SelectOptionValue = SelectOptionValue\n>(\n options: T[],\n query: string\n) => {\n const result = getSearch(\n options.map((option) => {\n return {\n ...option,\n keys: option.keys || [option.label],\n content: option.value,\n };\n }),\n query\n );\n return result;\n};\n\nconst defaultLoadOptions = async <\n T extends SelectOptionValue = SelectOptionValue\n>({\n query,\n options,\n}: {\n query: string;\n options?: T[];\n}): Promise<T[] | undefined> => {\n if (options === undefined) {\n return undefined;\n }\n if (query === undefined) {\n return options;\n }\n const result = filterSelectOptionsByQuery(options, query);\n return result.length ? result : options;\n};\n\nexport type SelectLoadOptions<T extends SelectOptionValue = SelectOptionValue> =\n (args: {\n query: string;\n options?: T[];\n selectedOptions?: T[];\n }) => Promise<T[] | undefined>;\n\nexport interface SelectOptionValue {\n value: string | undefined;\n label: string;\n keys?: string[];\n [key: string]: unknown;\n}\n\ninterface UseSelectFieldArgs<T extends SelectOptionValue> {\n /**\n * 選択肢の初期値を指定する。\n */\n defaultValue?: string;\n /**\n * 選択肢の選択が可能かどうか指定する。\n * @default false\n */\n readOnly?: boolean;\n /**\n * 選択肢の選択が必須かどうか指定する。\n * @default false\n */\n required?: boolean;\n /**\n * input要素に渡したいname属性を指定する。\n */\n name?: string;\n /**\n * queryに応じて選択肢をロードする関数を指定する。\n * この関数で返された選択肢が、選択肢として表示される。\n */\n loadOptions?: SelectLoadOptions<T>;\n /**\n * 選択肢を指定する。\n * 各選択肢は、valueとlabel及び任意のプロパティを持つオブジェクトである必要がある。\n */\n options?: T[];\n /**\n * このフラグがtrueの場合、queryもvalueとして扱えるようになる\n * @default false\n */\n treatQueryAsValue?: boolean;\n /**\n * 選択肢が変更された時に呼ばれるコールバック関数を指定する。\n */\n onChangeOption?: (option: T) => void;\n}\n\ninterface UseSelectFieldResult<T extends SelectOptionValue> {\n /**\n * 表示用の文字列。\n */\n displayValue: string | undefined;\n /**\n * 検索用に入力された文字列。\n */\n query: string;\n /**\n * input要素に渡される値。\n */\n value: string | undefined;\n /**\n * 選択肢のリストを開くかどうか。\n */\n openList: boolean;\n /**\n * 実態となるinput要素に渡すprops\n */\n inputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 擬似的なinput要素つまり検索用のinput要素に渡すprops\n */\n pseudoInputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 選択肢のリストに渡すprops\n */\n listProps: React.ComponentPropsWithRef<\"ul\">;\n /**\n * 選択肢のリストの各要素に渡すpropsと、各選択肢、及びkeyを持つオブジェクトの配列。\n */\n listItems?: {\n key: string;\n option: T;\n props: React.ComponentPropsWithoutRef<\"li\">;\n }[];\n /**\n * 全ての要素の親となる要素に渡すprops\n */\n rootProps: React.ComponentPropsWithRef<\"div\">;\n}\n\nexport const useSelectField = <T extends SelectOptionValue>(\n args: UseSelectFieldArgs<T>\n): UseSelectFieldResult<T> => {\n const {\n readOnly = false,\n name,\n required = false,\n options: propsOptions,\n loadOptions = defaultLoadOptions,\n treatQueryAsValue = false,\n defaultValue = undefined,\n onChangeOption,\n } = args;\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [value, setValue] = useState<string | undefined>(defaultValue);\n\n const selectedOptionsCache = useRef<T[] | undefined>(propsOptions);\n const [options, setOptions] = useState(propsOptions);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const originalInputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLUListElement>(null);\n const pseudoInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n void loadOptions({\n query,\n options: propsOptions,\n selectedOptions: selectedOptionsCache.current,\n }).then((result) => {\n setOptions(result);\n });\n }, [propsOptions, loadOptions, query]);\n\n const inputProps = useMemo((): React.ComponentPropsWithRef<\"input\"> => {\n return {\n ref: originalInputRef,\n required: required,\n name: name,\n defaultValue: value,\n key: value,\n tabIndex: -1,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n autoCapitalize: \"none\",\n spellCheck: false,\n onFocus: (event) => {\n event.currentTarget.blur();\n pseudoInputRef.current?.focus();\n },\n };\n }, [name, required, value]);\n\n const displayValue = useMemo(() => {\n return (\n selectedOptionsCache.current?.find((option) => option.value === value) ||\n options?.find((option) => option.value === value)\n )?.label;\n }, [options, value]);\n\n const rootProps = useMemo(() => {\n return {\n ref: rootRef,\n };\n }, []);\n\n useOnClickOutside([rootRef, listRef], () => {\n setOpen(false);\n setQuery(\"\");\n });\n\n const updateValue = useCallback(\n (option: T) => {\n const value = option.value;\n setValue(value);\n if (onChangeOption) {\n onChangeOption(option);\n }\n selectedOptionsCache.current = options;\n if (originalInputRef.current) {\n dispatchChangeEvent(originalInputRef.current, value);\n }\n },\n [onChangeOption, options]\n );\n\n const pseudoInputProps = useMemo((): React.ComponentPropsWithRef<\"input\"> => {\n return {\n ref: pseudoInputRef,\n value: query,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n autoCapitalize: \"none\",\n spellCheck: false,\n tabIndex: 0,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n const query = event.currentTarget.value;\n setQuery(query);\n if (treatQueryAsValue) {\n updateValue({\n label: query,\n value: query,\n } as T);\n }\n },\n onClick: (event) => {\n /**\n * ユーザーがフォーカスされている状態で入力要素をクリックするのは、\n * ユーザーが選択肢を一度選択してから再度選択したいケースと想定されるため、リストを再度開く。\n */\n if (event.currentTarget === document.activeElement) {\n setOpen(true);\n }\n },\n onFocus: () => {\n if (readOnly !== true) {\n setOpen(true);\n }\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n const { key } = event;\n if (key === \"Delete\" || key === \"Backspace\") {\n setQuery((prev) => {\n if (prev === \"\") {\n setValue(undefined);\n }\n return prev;\n });\n } else if (key === \"ArrowDown\") {\n event.preventDefault();\n const list = listRef.current;\n if (list) {\n moveFocus(list, null, nextItem);\n }\n } else if (\n treatQueryAsValue &&\n event.nativeEvent.isComposing === false &&\n key === \"Enter\"\n ) {\n if (treatQueryAsValue) {\n selectedOptionsCache.current = [\n {\n value: query,\n label: query,\n } as T,\n ];\n }\n setOpen(false);\n } else if (event.key.length === 1) {\n setOpen(true);\n }\n },\n };\n }, [query, treatQueryAsValue, updateValue, readOnly]);\n\n const listProps = useMemo(() => {\n return {\n ref: listRef,\n role: \"listbox\",\n tabIndex: -1,\n onKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => {\n const key = event.key;\n const list = listRef.current;\n if (list === null) {\n return;\n }\n const currentFocus = ownerDocument(list).activeElement;\n if (key === \"ArrowDown\") {\n event.preventDefault();\n moveFocus(list, currentFocus, nextItem);\n } else if (key === \"ArrowUp\") {\n event.preventDefault();\n moveFocus(list, currentFocus, previousItem);\n }\n },\n };\n }, []);\n\n const listItems = useMemo(() => {\n return options?.map((option, index) => {\n const selected = option.value === value;\n return {\n key: `${option.value}-${index}`,\n option,\n props: {\n role: \"option\",\n \"aria-selected\": selected,\n /**\n * 何も選択されていないときは、先頭のオプションに飛べるようにする\n */\n tabIndex: (value === undefined ? index === 0 : selected) ? -1 : -1,\n onClick: () => {\n updateValue(option);\n setQuery(\"\");\n pseudoInputRef?.current?.focus();\n setOpen(false);\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLLIElement>) => {\n const key = event.key;\n if (key === \"Enter\" || key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n },\n },\n };\n });\n }, [options, updateValue, value]);\n\n const result = useMemo(() => {\n return {\n displayValue,\n query,\n value,\n openList: open,\n inputProps,\n pseudoInputProps,\n listProps,\n listItems,\n rootProps,\n };\n }, [\n displayValue,\n inputProps,\n listItems,\n listProps,\n open,\n pseudoInputProps,\n query,\n rootProps,\n value,\n ]);\n return result;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","useOnClickOutside","ref","handler","useEffect","undefined","listener","event","Array","isArray","i","length","element","current","contains","composedPath","document","addEventListener","removeEventListener","getSearch","items","query","copy","slice","len","key","toLowerCase","c","tmp","res","j","index","keylen","keys","indexOf","score","sort","a","b","dispatchChangeEvent","value","nativeInputValueSetter","Object","getOwnPropertyDescriptor","tagName","HTMLInputElement","prototype","HTMLTextAreaElement","set","call","dispatchEvent","Event","bubbles","ownerDocument","node","nextItem","list","item","firstChild","nextElementSibling","previousItem","lastChild","previousElementSibling","moveFocus","currentFocus","traversalFunction","nextFocus","disabledFocus","disabled","getAttribute","focus","filterSelectOptionsByQuery","options","result","map","option","label","content","exports","defaultLoadOptions","useSelectField","args","readOnly","name","required","propsOptions","loadOptions","treatQueryAsValue","blurOnSelect","defaultValue","onChangeOption","open","setOpen","useState","setQuery","setValue","selectedOptionsCache","useRef","setOptions","isFocused","setIsFocused","rootRef","originalInputRef","listRef","pseudoInputRef","selectedOptions","then","inputProps","useMemo","tabIndex","autoComplete","autoCorrect","autoCapitalize","spellCheck","onFocus","currentTarget","blur","displayValue","find","rootProps","updateValue","useCallback","pseudoInputProps","onChange","onClick","activeElement","onBlur","onKeyDown","prev","preventDefault","nativeEvent","isComposing","listProps","role","listItems","selected","props","click","openList"],"sources":["../../../src/SelectField/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst useOnClickOutside = (\n ref: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n handler?: (event: MouseEvent | TouchEvent) => void\n) => {\n useEffect(() => {\n if (!handler) {\n return undefined;\n }\n const listener = (event: MouseEvent | TouchEvent) => {\n if (Array.isArray(ref)) {\n for (let i = 0; i < ref.length; i++) {\n const element = ref[i].current;\n // 1つ目の要素がないからといって、2つ目の要素もなくクリック範囲に含まれていないとは言えない。\n if (element && element.contains(event.composedPath()[0] as Node)) {\n return;\n }\n }\n } else {\n if (\n !ref.current ||\n ref.current.contains(event.composedPath()[0] as Node)\n ) {\n return;\n }\n }\n\n handler(event);\n };\n\n document.addEventListener(\"mousedown\", listener);\n document.addEventListener(\"touchstart\", listener);\n\n return () => {\n document.removeEventListener(\"mousedown\", listener);\n document.removeEventListener(\"touchstart\", listener);\n };\n }, [ref, handler]);\n};\n\nconst getSearch = <\n T extends {\n keys: string[];\n }\n>(\n items: T[],\n query: string\n) => {\n const copy = items.slice();\n const len = items.length;\n const key = query.toLowerCase();\n let i = -1;\n let c = 0;\n let tmp: {\n keys: string[];\n };\n const res = new Array(len);\n while (++i !== len) {\n tmp = copy[i];\n /**\n * Caluculate Minimum Index\n */\n let j = -1;\n let index = -1;\n const keylen = tmp.keys.length;\n let current;\n while (++j !== keylen) {\n current = tmp.keys[j].toLowerCase().indexOf(key);\n if (index === -1 || (current !== -1 && current < index)) {\n index = current;\n }\n }\n /**\n * Caluculate Score\n */\n const score = index > -1 ? 1 / (index + 1) : 0;\n if (score > 0) {\n res[c++] = { ...tmp, score };\n }\n }\n\n res.length = c;\n res.sort((a, b) => {\n if (a.score <= b.score) {\n return 1;\n } else {\n return -1;\n }\n });\n return res;\n};\n\nconst dispatchChangeEvent = (\n element: HTMLInputElement | HTMLTextAreaElement,\n value?: string | number\n) => {\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n element.tagName.toLowerCase() === \"input\"\n ? HTMLInputElement.prototype\n : HTMLTextAreaElement.prototype,\n \"value\"\n )?.set;\n\n nativeInputValueSetter?.call(element, value);\n\n element.dispatchEvent(new Event(\"change\", { bubbles: true }));\n};\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n return (node && node.ownerDocument) || document;\n}\n\ntype TraversalFunction = (\n list: HTMLUListElement,\n item?: Element | null\n) => ChildNode | null;\n\nconst nextItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.firstChild;\n }\n if (item && item.nextElementSibling) {\n return item.nextElementSibling;\n }\n return list.firstChild;\n};\n\nconst previousItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.lastChild;\n }\n if (item && item.previousElementSibling) {\n return item.previousElementSibling;\n }\n return list.lastChild;\n};\n\nconst moveFocus = (\n list: HTMLUListElement,\n currentFocus: Element | null,\n traversalFunction: TraversalFunction\n) => {\n let nextFocus = traversalFunction(list, currentFocus) as HTMLElement | null;\n while (nextFocus) {\n if (\n currentFocus === null\n ? nextFocus === list.lastChild\n : nextFocus === currentFocus\n ) {\n break;\n }\n const disabledFocus =\n (nextFocus as HTMLInputElement).disabled ||\n nextFocus.getAttribute(\"aria-disabled\") === \"true\";\n if (disabledFocus) {\n nextFocus = traversalFunction(list, nextFocus) as HTMLElement;\n } else {\n nextFocus.focus();\n break;\n }\n }\n};\n\nexport const filterSelectOptionsByQuery = <\n T extends SelectOptionValue = SelectOptionValue\n>(\n options: T[],\n query: string\n) => {\n const result = getSearch(\n options.map((option) => {\n return {\n ...option,\n keys: option.keys || [option.label],\n content: option.value,\n };\n }),\n query\n );\n return result;\n};\n\nconst defaultLoadOptions = async <\n T extends SelectOptionValue = SelectOptionValue\n>({\n query,\n options,\n}: {\n query: string;\n options?: T[];\n}): Promise<T[] | undefined> => {\n if (options === undefined) {\n return undefined;\n }\n if (query === undefined) {\n return options;\n }\n const result = filterSelectOptionsByQuery(options, query);\n return result.length ? result : options;\n};\n\nexport type SelectLoadOptions<T extends SelectOptionValue = SelectOptionValue> =\n (args: {\n query: string;\n options?: T[];\n selectedOptions?: T[];\n }) => Promise<T[] | undefined>;\n\nexport interface SelectOptionValue {\n value: string | undefined;\n label: string;\n keys?: string[];\n [key: string]: unknown;\n}\n\nexport interface UseSelectFieldArgs<T extends SelectOptionValue> {\n /**\n * 選択肢の初期値を指定する。\n */\n defaultValue?: string;\n /**\n * 選択肢の選択が可能かどうか指定する。\n * @default false\n */\n readOnly?: boolean;\n /**\n * 選択肢の選択が必須かどうか指定する。\n * @default false\n */\n required?: boolean;\n /**\n * input要素に渡したいname属性を指定する。\n */\n name?: string;\n /**\n * queryに応じて選択肢をロードする関数を指定する。\n * この関数で返された選択肢が、選択肢として表示される。\n */\n loadOptions?: SelectLoadOptions<T>;\n /**\n * 選択肢を指定する。\n * 各選択肢は、valueとlabel及び任意のプロパティを持つオブジェクトである必要がある。\n */\n options?: T[];\n /**\n * このフラグがtrueの場合、queryもvalueとして扱えるようになる\n * @default false\n */\n treatQueryAsValue?: boolean;\n /**\n * 選択肢が変更された時に呼ばれるコールバック関数を指定する。\n */\n onChangeOption?: (option: T) => void;\n /**\n * 選択後にinput要素から離脱する\n * @default false\n */\n blurOnSelect?: boolean;\n}\n\ninterface UseSelectFieldResult<T extends SelectOptionValue> {\n /**\n * 表示用の文字列。\n */\n displayValue: string | undefined;\n /**\n * 検索用に入力された文字列。\n */\n query: string;\n /**\n * input要素に渡される値。\n */\n value: string | undefined;\n /**\n * 選択肢のリストを開くかどうか。\n */\n openList: boolean;\n /**\n * 実態となるinput要素に渡すprops\n */\n inputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 擬似的なinput要素つまり検索用のinput要素に渡すprops\n */\n pseudoInputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 選択肢のリストに渡すprops\n */\n listProps: React.ComponentPropsWithRef<\"ul\">;\n /**\n * 選択肢のリストの各要素に渡すpropsと、各選択肢、及びkeyを持つオブジェクトの配列。\n */\n listItems?: {\n key: string;\n option: T;\n props: React.ComponentPropsWithoutRef<\"li\">;\n }[];\n /**\n * 全ての要素の親となる要素に渡すprops\n */\n rootProps: React.ComponentPropsWithRef<\"div\">;\n /**\n * 擬似的なinput要素つまり検索用のinput要素にフォーカスしているかどうかを表すフラグ。\n */\n isFocused: boolean;\n}\n\nexport const useSelectField = <T extends SelectOptionValue>(\n args: UseSelectFieldArgs<T>\n): UseSelectFieldResult<T> => {\n const {\n readOnly = false,\n name,\n required = false,\n options: propsOptions,\n loadOptions = defaultLoadOptions,\n treatQueryAsValue = false,\n blurOnSelect = false,\n defaultValue = undefined,\n onChangeOption,\n } = args;\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [value, setValue] = useState<string | undefined>(defaultValue);\n const selectedOptionsCache = useRef<T[] | undefined>(propsOptions);\n const [options, setOptions] = useState(propsOptions);\n const [isFocused, setIsFocused] = useState(false);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const originalInputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLUListElement>(null);\n const pseudoInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n void loadOptions({\n query,\n options: propsOptions,\n selectedOptions: selectedOptionsCache.current,\n }).then((result) => {\n setOptions(result);\n });\n }, [propsOptions, loadOptions, query]);\n\n const inputProps = useMemo((): React.ComponentPropsWithRef<\"input\"> => {\n return {\n ref: originalInputRef,\n required: required,\n name: name,\n defaultValue: value,\n key: value,\n tabIndex: -1,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n autoCapitalize: \"none\",\n spellCheck: false,\n onFocus: (event) => {\n event.currentTarget.blur();\n pseudoInputRef.current?.focus();\n },\n };\n }, [name, required, value]);\n\n const displayValue = useMemo(() => {\n return (\n selectedOptionsCache.current?.find((option) => option.value === value) ||\n options?.find((option) => option.value === value)\n )?.label;\n }, [options, value]);\n\n const rootProps = useMemo(() => {\n return {\n ref: rootRef,\n };\n }, []);\n\n useOnClickOutside([rootRef, listRef], () => {\n setOpen(false);\n setQuery(\"\");\n });\n\n const updateValue = useCallback(\n (option: T) => {\n const value = option.value;\n setValue(value);\n if (onChangeOption) {\n onChangeOption(option);\n }\n selectedOptionsCache.current = options;\n if (originalInputRef.current) {\n dispatchChangeEvent(originalInputRef.current, value);\n }\n },\n [onChangeOption, options]\n );\n\n const pseudoInputProps = useMemo(() => {\n return {\n ref: pseudoInputRef,\n value: query,\n autoComplete: \"off\" as const,\n autoCorrect: \"off\" as const,\n autoCapitalize: \"none\" as const,\n spellCheck: false,\n tabIndex: 0,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n const query = event.currentTarget.value;\n setQuery(query);\n if (treatQueryAsValue) {\n updateValue({\n label: query,\n value: query,\n } as T);\n }\n },\n onClick: (event: React.MouseEvent<HTMLInputElement>) => {\n /**\n * ユーザーがフォーカスされている状態で入力要素をクリックするのは、\n * ユーザーが選択肢を一度選択してから再度選択したいケースと想定されるため、リストを再度開く。\n */\n if (event.currentTarget === document.activeElement) {\n setOpen(true);\n }\n },\n onFocus: () => {\n if (readOnly !== true) {\n setOpen(true);\n }\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n const { key } = event;\n if (key === \"Delete\" || key === \"Backspace\") {\n setQuery((prev) => {\n if (prev === \"\") {\n setValue(undefined);\n }\n return prev;\n });\n } else if (key === \"ArrowDown\") {\n event.preventDefault();\n const list = listRef.current;\n if (list) {\n moveFocus(list, null, nextItem);\n }\n } else if (\n treatQueryAsValue &&\n event.nativeEvent.isComposing === false &&\n key === \"Enter\"\n ) {\n if (treatQueryAsValue) {\n selectedOptionsCache.current = [\n {\n value: query,\n label: query,\n } as T,\n ];\n }\n setOpen(false);\n } else if (event.key.length === 1) {\n setOpen(true);\n }\n },\n };\n }, [query, treatQueryAsValue, updateValue, readOnly]);\n\n const listProps = useMemo(() => {\n return {\n ref: listRef,\n role: \"listbox\",\n tabIndex: -1,\n onKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => {\n const key = event.key;\n const list = listRef.current;\n if (list === null) {\n return;\n }\n const currentFocus = ownerDocument(list).activeElement;\n if (key === \"ArrowDown\") {\n event.preventDefault();\n moveFocus(list, currentFocus, nextItem);\n } else if (key === \"ArrowUp\") {\n event.preventDefault();\n moveFocus(list, currentFocus, previousItem);\n }\n },\n };\n }, []);\n\n const listItems = useMemo(() => {\n return options?.map((option, index) => {\n const selected = option.value === value;\n return {\n key: `${option.value}-${index}`,\n option,\n props: {\n role: \"option\",\n \"aria-selected\": selected,\n /**\n * 何も選択されていないときは、先頭のオプションに飛べるようにする\n */\n tabIndex: (value === undefined ? index === 0 : selected) ? -1 : -1,\n onClick: () => {\n updateValue(option);\n setQuery(\"\");\n if (blurOnSelect === false) {\n pseudoInputRef?.current?.focus();\n }\n setOpen(false);\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLLIElement>) => {\n const key = event.key;\n if (key === \"Enter\" || key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n },\n },\n };\n });\n }, [blurOnSelect, options, updateValue, value]);\n\n const result = useMemo(() => {\n return {\n displayValue,\n query,\n value,\n openList: open,\n inputProps,\n pseudoInputProps,\n listProps,\n listItems,\n rootProps,\n isFocused: isFocused,\n };\n }, [\n displayValue,\n inputProps,\n listItems,\n listProps,\n open,\n pseudoInputProps,\n query,\n rootProps,\n value,\n isFocused,\n ]);\n return result;\n};\n"],"mappings":"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"}
|
package/esm/SelectField/index.js
CHANGED
|
@@ -154,6 +154,7 @@ export var useSelectField = args => {
|
|
|
154
154
|
options: propsOptions,
|
|
155
155
|
loadOptions = defaultLoadOptions,
|
|
156
156
|
treatQueryAsValue = false,
|
|
157
|
+
blurOnSelect = false,
|
|
157
158
|
defaultValue = undefined,
|
|
158
159
|
onChangeOption
|
|
159
160
|
} = args;
|
|
@@ -162,6 +163,7 @@ export var useSelectField = args => {
|
|
|
162
163
|
var [value, setValue] = useState(defaultValue);
|
|
163
164
|
var selectedOptionsCache = useRef(propsOptions);
|
|
164
165
|
var [options, setOptions] = useState(propsOptions);
|
|
166
|
+
var [isFocused, setIsFocused] = useState(false);
|
|
165
167
|
var rootRef = useRef(null);
|
|
166
168
|
var originalInputRef = useRef(null);
|
|
167
169
|
var listRef = useRef(null);
|
|
@@ -250,6 +252,10 @@ export var useSelectField = args => {
|
|
|
250
252
|
if (readOnly !== true) {
|
|
251
253
|
setOpen(true);
|
|
252
254
|
}
|
|
255
|
+
setIsFocused(true);
|
|
256
|
+
},
|
|
257
|
+
onBlur: () => {
|
|
258
|
+
setIsFocused(false);
|
|
253
259
|
},
|
|
254
260
|
onKeyDown: event => {
|
|
255
261
|
var {
|
|
@@ -318,10 +324,12 @@ export var useSelectField = args => {
|
|
|
318
324
|
*/
|
|
319
325
|
tabIndex: (value === undefined ? index === 0 : selected) ? -1 : -1,
|
|
320
326
|
onClick: () => {
|
|
321
|
-
var _pseudoInputRef$curre2;
|
|
322
327
|
updateValue(option);
|
|
323
328
|
setQuery("");
|
|
324
|
-
|
|
329
|
+
if (blurOnSelect === false) {
|
|
330
|
+
var _pseudoInputRef$curre2;
|
|
331
|
+
pseudoInputRef == null ? void 0 : (_pseudoInputRef$curre2 = pseudoInputRef.current) == null ? void 0 : _pseudoInputRef$curre2.focus();
|
|
332
|
+
}
|
|
325
333
|
setOpen(false);
|
|
326
334
|
},
|
|
327
335
|
onKeyDown: event => {
|
|
@@ -334,7 +342,7 @@ export var useSelectField = args => {
|
|
|
334
342
|
}
|
|
335
343
|
};
|
|
336
344
|
});
|
|
337
|
-
}, [options, updateValue, value]);
|
|
345
|
+
}, [blurOnSelect, options, updateValue, value]);
|
|
338
346
|
var result = useMemo(() => {
|
|
339
347
|
return {
|
|
340
348
|
displayValue,
|
|
@@ -345,9 +353,10 @@ export var useSelectField = args => {
|
|
|
345
353
|
pseudoInputProps,
|
|
346
354
|
listProps,
|
|
347
355
|
listItems,
|
|
348
|
-
rootProps
|
|
356
|
+
rootProps,
|
|
357
|
+
isFocused: isFocused
|
|
349
358
|
};
|
|
350
|
-
}, [displayValue, inputProps, listItems, listProps, open, pseudoInputProps, query, rootProps, value]);
|
|
359
|
+
}, [displayValue, inputProps, listItems, listProps, open, pseudoInputProps, query, rootProps, value, isFocused]);
|
|
351
360
|
return result;
|
|
352
361
|
};
|
|
353
362
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["useCallback","useEffect","useMemo","useRef","useState","useOnClickOutside","ref","handler","undefined","listener","event","Array","isArray","i","length","element","current","contains","composedPath","document","addEventListener","removeEventListener","getSearch","items","query","copy","slice","len","key","toLowerCase","c","tmp","res","j","index","keylen","keys","indexOf","score","_extends","sort","a","b","dispatchChangeEvent","value","_Object$getOwnPropert","nativeInputValueSetter","Object","getOwnPropertyDescriptor","tagName","HTMLInputElement","prototype","HTMLTextAreaElement","set","call","dispatchEvent","Event","bubbles","ownerDocument","node","nextItem","list","item","firstChild","nextElementSibling","previousItem","lastChild","previousElementSibling","moveFocus","currentFocus","traversalFunction","nextFocus","disabledFocus","disabled","getAttribute","focus","filterSelectOptionsByQuery","options","result","map","option","label","content","defaultLoadOptions","_ref2","_asyncToGenerator","_ref","_x","apply","arguments","useSelectField","args","readOnly","name","required","propsOptions","loadOptions","treatQueryAsValue","defaultValue","onChangeOption","open","setOpen","setQuery","setValue","selectedOptionsCache","setOptions","rootRef","originalInputRef","listRef","pseudoInputRef","selectedOptions","then","inputProps","tabIndex","autoComplete","autoCorrect","autoCapitalize","spellCheck","onFocus","_pseudoInputRef$curre","currentTarget","blur","displayValue","_ref3","_selectedOptionsCache","find","rootProps","updateValue","pseudoInputProps","onChange","onClick","activeElement","onKeyDown","prev","preventDefault","nativeEvent","isComposing","listProps","role","listItems","selected","props","_pseudoInputRef$curre2","click","openList"],"sources":["../../../src/SelectField/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst useOnClickOutside = (\n ref: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n handler?: (event: MouseEvent | TouchEvent) => void\n) => {\n useEffect(() => {\n if (!handler) {\n return undefined;\n }\n const listener = (event: MouseEvent | TouchEvent) => {\n if (Array.isArray(ref)) {\n for (let i = 0; i < ref.length; i++) {\n const element = ref[i].current;\n // 1つ目の要素がないからといって、2つ目の要素もなくクリック範囲に含まれていないとは言えない。\n if (element && element.contains(event.composedPath()[0] as Node)) {\n return;\n }\n }\n } else {\n if (\n !ref.current ||\n ref.current.contains(event.composedPath()[0] as Node)\n ) {\n return;\n }\n }\n\n handler(event);\n };\n\n document.addEventListener(\"mousedown\", listener);\n document.addEventListener(\"touchstart\", listener);\n\n return () => {\n document.removeEventListener(\"mousedown\", listener);\n document.removeEventListener(\"touchstart\", listener);\n };\n }, [ref, handler]);\n};\n\nconst getSearch = <\n T extends {\n keys: string[];\n }\n>(\n items: T[],\n query: string\n) => {\n const copy = items.slice();\n const len = items.length;\n const key = query.toLowerCase();\n let i = -1;\n let c = 0;\n let tmp: {\n keys: string[];\n };\n const res = new Array(len);\n while (++i !== len) {\n tmp = copy[i];\n /**\n * Caluculate Minimum Index\n */\n let j = -1;\n let index = -1;\n const keylen = tmp.keys.length;\n let current;\n while (++j !== keylen) {\n current = tmp.keys[j].toLowerCase().indexOf(key);\n if (index === -1 || (current !== -1 && current < index)) {\n index = current;\n }\n }\n /**\n * Caluculate Score\n */\n const score = index > -1 ? 1 / (index + 1) : 0;\n if (score > 0) {\n res[c++] = { ...tmp, score };\n }\n }\n\n res.length = c;\n res.sort((a, b) => {\n if (a.score <= b.score) {\n return 1;\n } else {\n return -1;\n }\n });\n return res;\n};\n\nconst dispatchChangeEvent = (\n element: HTMLInputElement | HTMLTextAreaElement,\n value?: string | number\n) => {\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n element.tagName.toLowerCase() === \"input\"\n ? HTMLInputElement.prototype\n : HTMLTextAreaElement.prototype,\n \"value\"\n )?.set;\n\n nativeInputValueSetter?.call(element, value);\n\n element.dispatchEvent(new Event(\"change\", { bubbles: true }));\n};\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n return (node && node.ownerDocument) || document;\n}\n\ntype TraversalFunction = (\n list: HTMLUListElement,\n item?: Element | null\n) => ChildNode | null;\n\nconst nextItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.firstChild;\n }\n if (item && item.nextElementSibling) {\n return item.nextElementSibling;\n }\n return list.firstChild;\n};\n\nconst previousItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.lastChild;\n }\n if (item && item.previousElementSibling) {\n return item.previousElementSibling;\n }\n return list.lastChild;\n};\n\nconst moveFocus = (\n list: HTMLUListElement,\n currentFocus: Element | null,\n traversalFunction: TraversalFunction\n) => {\n let nextFocus = traversalFunction(list, currentFocus) as HTMLElement | null;\n while (nextFocus) {\n if (\n currentFocus === null\n ? nextFocus === list.lastChild\n : nextFocus === currentFocus\n ) {\n break;\n }\n const disabledFocus =\n (nextFocus as HTMLInputElement).disabled ||\n nextFocus.getAttribute(\"aria-disabled\") === \"true\";\n if (disabledFocus) {\n nextFocus = traversalFunction(list, nextFocus) as HTMLElement;\n } else {\n nextFocus.focus();\n break;\n }\n }\n};\n\nexport const filterSelectOptionsByQuery = <\n T extends SelectOptionValue = SelectOptionValue\n>(\n options: T[],\n query: string\n) => {\n const result = getSearch(\n options.map((option) => {\n return {\n ...option,\n keys: option.keys || [option.label],\n content: option.value,\n };\n }),\n query\n );\n return result;\n};\n\nconst defaultLoadOptions = async <\n T extends SelectOptionValue = SelectOptionValue\n>({\n query,\n options,\n}: {\n query: string;\n options?: T[];\n}): Promise<T[] | undefined> => {\n if (options === undefined) {\n return undefined;\n }\n if (query === undefined) {\n return options;\n }\n const result = filterSelectOptionsByQuery(options, query);\n return result.length ? result : options;\n};\n\nexport type SelectLoadOptions<T extends SelectOptionValue = SelectOptionValue> =\n (args: {\n query: string;\n options?: T[];\n selectedOptions?: T[];\n }) => Promise<T[] | undefined>;\n\nexport interface SelectOptionValue {\n value: string | undefined;\n label: string;\n keys?: string[];\n [key: string]: unknown;\n}\n\ninterface UseSelectFieldArgs<T extends SelectOptionValue> {\n /**\n * 選択肢の初期値を指定する。\n */\n defaultValue?: string;\n /**\n * 選択肢の選択が可能かどうか指定する。\n * @default false\n */\n readOnly?: boolean;\n /**\n * 選択肢の選択が必須かどうか指定する。\n * @default false\n */\n required?: boolean;\n /**\n * input要素に渡したいname属性を指定する。\n */\n name?: string;\n /**\n * queryに応じて選択肢をロードする関数を指定する。\n * この関数で返された選択肢が、選択肢として表示される。\n */\n loadOptions?: SelectLoadOptions<T>;\n /**\n * 選択肢を指定する。\n * 各選択肢は、valueとlabel及び任意のプロパティを持つオブジェクトである必要がある。\n */\n options?: T[];\n /**\n * このフラグがtrueの場合、queryもvalueとして扱えるようになる\n * @default false\n */\n treatQueryAsValue?: boolean;\n /**\n * 選択肢が変更された時に呼ばれるコールバック関数を指定する。\n */\n onChangeOption?: (option: T) => void;\n}\n\ninterface UseSelectFieldResult<T extends SelectOptionValue> {\n /**\n * 表示用の文字列。\n */\n displayValue: string | undefined;\n /**\n * 検索用に入力された文字列。\n */\n query: string;\n /**\n * input要素に渡される値。\n */\n value: string | undefined;\n /**\n * 選択肢のリストを開くかどうか。\n */\n openList: boolean;\n /**\n * 実態となるinput要素に渡すprops\n */\n inputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 擬似的なinput要素つまり検索用のinput要素に渡すprops\n */\n pseudoInputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 選択肢のリストに渡すprops\n */\n listProps: React.ComponentPropsWithRef<\"ul\">;\n /**\n * 選択肢のリストの各要素に渡すpropsと、各選択肢、及びkeyを持つオブジェクトの配列。\n */\n listItems?: {\n key: string;\n option: T;\n props: React.ComponentPropsWithoutRef<\"li\">;\n }[];\n /**\n * 全ての要素の親となる要素に渡すprops\n */\n rootProps: React.ComponentPropsWithRef<\"div\">;\n}\n\nexport const useSelectField = <T extends SelectOptionValue>(\n args: UseSelectFieldArgs<T>\n): UseSelectFieldResult<T> => {\n const {\n readOnly = false,\n name,\n required = false,\n options: propsOptions,\n loadOptions = defaultLoadOptions,\n treatQueryAsValue = false,\n defaultValue = undefined,\n onChangeOption,\n } = args;\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [value, setValue] = useState<string | undefined>(defaultValue);\n\n const selectedOptionsCache = useRef<T[] | undefined>(propsOptions);\n const [options, setOptions] = useState(propsOptions);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const originalInputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLUListElement>(null);\n const pseudoInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n void loadOptions({\n query,\n options: propsOptions,\n selectedOptions: selectedOptionsCache.current,\n }).then((result) => {\n setOptions(result);\n });\n }, [propsOptions, loadOptions, query]);\n\n const inputProps = useMemo((): React.ComponentPropsWithRef<\"input\"> => {\n return {\n ref: originalInputRef,\n required: required,\n name: name,\n defaultValue: value,\n key: value,\n tabIndex: -1,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n autoCapitalize: \"none\",\n spellCheck: false,\n onFocus: (event) => {\n event.currentTarget.blur();\n pseudoInputRef.current?.focus();\n },\n };\n }, [name, required, value]);\n\n const displayValue = useMemo(() => {\n return (\n selectedOptionsCache.current?.find((option) => option.value === value) ||\n options?.find((option) => option.value === value)\n )?.label;\n }, [options, value]);\n\n const rootProps = useMemo(() => {\n return {\n ref: rootRef,\n };\n }, []);\n\n useOnClickOutside([rootRef, listRef], () => {\n setOpen(false);\n setQuery(\"\");\n });\n\n const updateValue = useCallback(\n (option: T) => {\n const value = option.value;\n setValue(value);\n if (onChangeOption) {\n onChangeOption(option);\n }\n selectedOptionsCache.current = options;\n if (originalInputRef.current) {\n dispatchChangeEvent(originalInputRef.current, value);\n }\n },\n [onChangeOption, options]\n );\n\n const pseudoInputProps = useMemo((): React.ComponentPropsWithRef<\"input\"> => {\n return {\n ref: pseudoInputRef,\n value: query,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n autoCapitalize: \"none\",\n spellCheck: false,\n tabIndex: 0,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n const query = event.currentTarget.value;\n setQuery(query);\n if (treatQueryAsValue) {\n updateValue({\n label: query,\n value: query,\n } as T);\n }\n },\n onClick: (event) => {\n /**\n * ユーザーがフォーカスされている状態で入力要素をクリックするのは、\n * ユーザーが選択肢を一度選択してから再度選択したいケースと想定されるため、リストを再度開く。\n */\n if (event.currentTarget === document.activeElement) {\n setOpen(true);\n }\n },\n onFocus: () => {\n if (readOnly !== true) {\n setOpen(true);\n }\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n const { key } = event;\n if (key === \"Delete\" || key === \"Backspace\") {\n setQuery((prev) => {\n if (prev === \"\") {\n setValue(undefined);\n }\n return prev;\n });\n } else if (key === \"ArrowDown\") {\n event.preventDefault();\n const list = listRef.current;\n if (list) {\n moveFocus(list, null, nextItem);\n }\n } else if (\n treatQueryAsValue &&\n event.nativeEvent.isComposing === false &&\n key === \"Enter\"\n ) {\n if (treatQueryAsValue) {\n selectedOptionsCache.current = [\n {\n value: query,\n label: query,\n } as T,\n ];\n }\n setOpen(false);\n } else if (event.key.length === 1) {\n setOpen(true);\n }\n },\n };\n }, [query, treatQueryAsValue, updateValue, readOnly]);\n\n const listProps = useMemo(() => {\n return {\n ref: listRef,\n role: \"listbox\",\n tabIndex: -1,\n onKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => {\n const key = event.key;\n const list = listRef.current;\n if (list === null) {\n return;\n }\n const currentFocus = ownerDocument(list).activeElement;\n if (key === \"ArrowDown\") {\n event.preventDefault();\n moveFocus(list, currentFocus, nextItem);\n } else if (key === \"ArrowUp\") {\n event.preventDefault();\n moveFocus(list, currentFocus, previousItem);\n }\n },\n };\n }, []);\n\n const listItems = useMemo(() => {\n return options?.map((option, index) => {\n const selected = option.value === value;\n return {\n key: `${option.value}-${index}`,\n option,\n props: {\n role: \"option\",\n \"aria-selected\": selected,\n /**\n * 何も選択されていないときは、先頭のオプションに飛べるようにする\n */\n tabIndex: (value === undefined ? index === 0 : selected) ? -1 : -1,\n onClick: () => {\n updateValue(option);\n setQuery(\"\");\n pseudoInputRef?.current?.focus();\n setOpen(false);\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLLIElement>) => {\n const key = event.key;\n if (key === \"Enter\" || key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n },\n },\n };\n });\n }, [options, updateValue, value]);\n\n const result = useMemo(() => {\n return {\n displayValue,\n query,\n value,\n openList: open,\n inputProps,\n pseudoInputProps,\n listProps,\n listItems,\n rootProps,\n };\n }, [\n displayValue,\n inputProps,\n listItems,\n listProps,\n open,\n pseudoInputProps,\n query,\n rootProps,\n value,\n ]);\n return result;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["useCallback","useEffect","useMemo","useRef","useState","useOnClickOutside","ref","handler","undefined","listener","event","Array","isArray","i","length","element","current","contains","composedPath","document","addEventListener","removeEventListener","getSearch","items","query","copy","slice","len","key","toLowerCase","c","tmp","res","j","index","keylen","keys","indexOf","score","_extends","sort","a","b","dispatchChangeEvent","value","_Object$getOwnPropert","nativeInputValueSetter","Object","getOwnPropertyDescriptor","tagName","HTMLInputElement","prototype","HTMLTextAreaElement","set","call","dispatchEvent","Event","bubbles","ownerDocument","node","nextItem","list","item","firstChild","nextElementSibling","previousItem","lastChild","previousElementSibling","moveFocus","currentFocus","traversalFunction","nextFocus","disabledFocus","disabled","getAttribute","focus","filterSelectOptionsByQuery","options","result","map","option","label","content","defaultLoadOptions","_ref2","_asyncToGenerator","_ref","_x","apply","arguments","useSelectField","args","readOnly","name","required","propsOptions","loadOptions","treatQueryAsValue","blurOnSelect","defaultValue","onChangeOption","open","setOpen","setQuery","setValue","selectedOptionsCache","setOptions","isFocused","setIsFocused","rootRef","originalInputRef","listRef","pseudoInputRef","selectedOptions","then","inputProps","tabIndex","autoComplete","autoCorrect","autoCapitalize","spellCheck","onFocus","_pseudoInputRef$curre","currentTarget","blur","displayValue","_ref3","_selectedOptionsCache","find","rootProps","updateValue","pseudoInputProps","onChange","onClick","activeElement","onBlur","onKeyDown","prev","preventDefault","nativeEvent","isComposing","listProps","role","listItems","selected","props","_pseudoInputRef$curre2","click","openList"],"sources":["../../../src/SelectField/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst useOnClickOutside = (\n ref: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n handler?: (event: MouseEvent | TouchEvent) => void\n) => {\n useEffect(() => {\n if (!handler) {\n return undefined;\n }\n const listener = (event: MouseEvent | TouchEvent) => {\n if (Array.isArray(ref)) {\n for (let i = 0; i < ref.length; i++) {\n const element = ref[i].current;\n // 1つ目の要素がないからといって、2つ目の要素もなくクリック範囲に含まれていないとは言えない。\n if (element && element.contains(event.composedPath()[0] as Node)) {\n return;\n }\n }\n } else {\n if (\n !ref.current ||\n ref.current.contains(event.composedPath()[0] as Node)\n ) {\n return;\n }\n }\n\n handler(event);\n };\n\n document.addEventListener(\"mousedown\", listener);\n document.addEventListener(\"touchstart\", listener);\n\n return () => {\n document.removeEventListener(\"mousedown\", listener);\n document.removeEventListener(\"touchstart\", listener);\n };\n }, [ref, handler]);\n};\n\nconst getSearch = <\n T extends {\n keys: string[];\n }\n>(\n items: T[],\n query: string\n) => {\n const copy = items.slice();\n const len = items.length;\n const key = query.toLowerCase();\n let i = -1;\n let c = 0;\n let tmp: {\n keys: string[];\n };\n const res = new Array(len);\n while (++i !== len) {\n tmp = copy[i];\n /**\n * Caluculate Minimum Index\n */\n let j = -1;\n let index = -1;\n const keylen = tmp.keys.length;\n let current;\n while (++j !== keylen) {\n current = tmp.keys[j].toLowerCase().indexOf(key);\n if (index === -1 || (current !== -1 && current < index)) {\n index = current;\n }\n }\n /**\n * Caluculate Score\n */\n const score = index > -1 ? 1 / (index + 1) : 0;\n if (score > 0) {\n res[c++] = { ...tmp, score };\n }\n }\n\n res.length = c;\n res.sort((a, b) => {\n if (a.score <= b.score) {\n return 1;\n } else {\n return -1;\n }\n });\n return res;\n};\n\nconst dispatchChangeEvent = (\n element: HTMLInputElement | HTMLTextAreaElement,\n value?: string | number\n) => {\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n element.tagName.toLowerCase() === \"input\"\n ? HTMLInputElement.prototype\n : HTMLTextAreaElement.prototype,\n \"value\"\n )?.set;\n\n nativeInputValueSetter?.call(element, value);\n\n element.dispatchEvent(new Event(\"change\", { bubbles: true }));\n};\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n return (node && node.ownerDocument) || document;\n}\n\ntype TraversalFunction = (\n list: HTMLUListElement,\n item?: Element | null\n) => ChildNode | null;\n\nconst nextItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.firstChild;\n }\n if (item && item.nextElementSibling) {\n return item.nextElementSibling;\n }\n return list.firstChild;\n};\n\nconst previousItem: TraversalFunction = (list, item) => {\n if (list === item) {\n return list.lastChild;\n }\n if (item && item.previousElementSibling) {\n return item.previousElementSibling;\n }\n return list.lastChild;\n};\n\nconst moveFocus = (\n list: HTMLUListElement,\n currentFocus: Element | null,\n traversalFunction: TraversalFunction\n) => {\n let nextFocus = traversalFunction(list, currentFocus) as HTMLElement | null;\n while (nextFocus) {\n if (\n currentFocus === null\n ? nextFocus === list.lastChild\n : nextFocus === currentFocus\n ) {\n break;\n }\n const disabledFocus =\n (nextFocus as HTMLInputElement).disabled ||\n nextFocus.getAttribute(\"aria-disabled\") === \"true\";\n if (disabledFocus) {\n nextFocus = traversalFunction(list, nextFocus) as HTMLElement;\n } else {\n nextFocus.focus();\n break;\n }\n }\n};\n\nexport const filterSelectOptionsByQuery = <\n T extends SelectOptionValue = SelectOptionValue\n>(\n options: T[],\n query: string\n) => {\n const result = getSearch(\n options.map((option) => {\n return {\n ...option,\n keys: option.keys || [option.label],\n content: option.value,\n };\n }),\n query\n );\n return result;\n};\n\nconst defaultLoadOptions = async <\n T extends SelectOptionValue = SelectOptionValue\n>({\n query,\n options,\n}: {\n query: string;\n options?: T[];\n}): Promise<T[] | undefined> => {\n if (options === undefined) {\n return undefined;\n }\n if (query === undefined) {\n return options;\n }\n const result = filterSelectOptionsByQuery(options, query);\n return result.length ? result : options;\n};\n\nexport type SelectLoadOptions<T extends SelectOptionValue = SelectOptionValue> =\n (args: {\n query: string;\n options?: T[];\n selectedOptions?: T[];\n }) => Promise<T[] | undefined>;\n\nexport interface SelectOptionValue {\n value: string | undefined;\n label: string;\n keys?: string[];\n [key: string]: unknown;\n}\n\nexport interface UseSelectFieldArgs<T extends SelectOptionValue> {\n /**\n * 選択肢の初期値を指定する。\n */\n defaultValue?: string;\n /**\n * 選択肢の選択が可能かどうか指定する。\n * @default false\n */\n readOnly?: boolean;\n /**\n * 選択肢の選択が必須かどうか指定する。\n * @default false\n */\n required?: boolean;\n /**\n * input要素に渡したいname属性を指定する。\n */\n name?: string;\n /**\n * queryに応じて選択肢をロードする関数を指定する。\n * この関数で返された選択肢が、選択肢として表示される。\n */\n loadOptions?: SelectLoadOptions<T>;\n /**\n * 選択肢を指定する。\n * 各選択肢は、valueとlabel及び任意のプロパティを持つオブジェクトである必要がある。\n */\n options?: T[];\n /**\n * このフラグがtrueの場合、queryもvalueとして扱えるようになる\n * @default false\n */\n treatQueryAsValue?: boolean;\n /**\n * 選択肢が変更された時に呼ばれるコールバック関数を指定する。\n */\n onChangeOption?: (option: T) => void;\n /**\n * 選択後にinput要素から離脱する\n * @default false\n */\n blurOnSelect?: boolean;\n}\n\ninterface UseSelectFieldResult<T extends SelectOptionValue> {\n /**\n * 表示用の文字列。\n */\n displayValue: string | undefined;\n /**\n * 検索用に入力された文字列。\n */\n query: string;\n /**\n * input要素に渡される値。\n */\n value: string | undefined;\n /**\n * 選択肢のリストを開くかどうか。\n */\n openList: boolean;\n /**\n * 実態となるinput要素に渡すprops\n */\n inputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 擬似的なinput要素つまり検索用のinput要素に渡すprops\n */\n pseudoInputProps: React.ComponentPropsWithRef<\"input\">;\n /**\n * 選択肢のリストに渡すprops\n */\n listProps: React.ComponentPropsWithRef<\"ul\">;\n /**\n * 選択肢のリストの各要素に渡すpropsと、各選択肢、及びkeyを持つオブジェクトの配列。\n */\n listItems?: {\n key: string;\n option: T;\n props: React.ComponentPropsWithoutRef<\"li\">;\n }[];\n /**\n * 全ての要素の親となる要素に渡すprops\n */\n rootProps: React.ComponentPropsWithRef<\"div\">;\n /**\n * 擬似的なinput要素つまり検索用のinput要素にフォーカスしているかどうかを表すフラグ。\n */\n isFocused: boolean;\n}\n\nexport const useSelectField = <T extends SelectOptionValue>(\n args: UseSelectFieldArgs<T>\n): UseSelectFieldResult<T> => {\n const {\n readOnly = false,\n name,\n required = false,\n options: propsOptions,\n loadOptions = defaultLoadOptions,\n treatQueryAsValue = false,\n blurOnSelect = false,\n defaultValue = undefined,\n onChangeOption,\n } = args;\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [value, setValue] = useState<string | undefined>(defaultValue);\n const selectedOptionsCache = useRef<T[] | undefined>(propsOptions);\n const [options, setOptions] = useState(propsOptions);\n const [isFocused, setIsFocused] = useState(false);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const originalInputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLUListElement>(null);\n const pseudoInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n void loadOptions({\n query,\n options: propsOptions,\n selectedOptions: selectedOptionsCache.current,\n }).then((result) => {\n setOptions(result);\n });\n }, [propsOptions, loadOptions, query]);\n\n const inputProps = useMemo((): React.ComponentPropsWithRef<\"input\"> => {\n return {\n ref: originalInputRef,\n required: required,\n name: name,\n defaultValue: value,\n key: value,\n tabIndex: -1,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n autoCapitalize: \"none\",\n spellCheck: false,\n onFocus: (event) => {\n event.currentTarget.blur();\n pseudoInputRef.current?.focus();\n },\n };\n }, [name, required, value]);\n\n const displayValue = useMemo(() => {\n return (\n selectedOptionsCache.current?.find((option) => option.value === value) ||\n options?.find((option) => option.value === value)\n )?.label;\n }, [options, value]);\n\n const rootProps = useMemo(() => {\n return {\n ref: rootRef,\n };\n }, []);\n\n useOnClickOutside([rootRef, listRef], () => {\n setOpen(false);\n setQuery(\"\");\n });\n\n const updateValue = useCallback(\n (option: T) => {\n const value = option.value;\n setValue(value);\n if (onChangeOption) {\n onChangeOption(option);\n }\n selectedOptionsCache.current = options;\n if (originalInputRef.current) {\n dispatchChangeEvent(originalInputRef.current, value);\n }\n },\n [onChangeOption, options]\n );\n\n const pseudoInputProps = useMemo(() => {\n return {\n ref: pseudoInputRef,\n value: query,\n autoComplete: \"off\" as const,\n autoCorrect: \"off\" as const,\n autoCapitalize: \"none\" as const,\n spellCheck: false,\n tabIndex: 0,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n const query = event.currentTarget.value;\n setQuery(query);\n if (treatQueryAsValue) {\n updateValue({\n label: query,\n value: query,\n } as T);\n }\n },\n onClick: (event: React.MouseEvent<HTMLInputElement>) => {\n /**\n * ユーザーがフォーカスされている状態で入力要素をクリックするのは、\n * ユーザーが選択肢を一度選択してから再度選択したいケースと想定されるため、リストを再度開く。\n */\n if (event.currentTarget === document.activeElement) {\n setOpen(true);\n }\n },\n onFocus: () => {\n if (readOnly !== true) {\n setOpen(true);\n }\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n const { key } = event;\n if (key === \"Delete\" || key === \"Backspace\") {\n setQuery((prev) => {\n if (prev === \"\") {\n setValue(undefined);\n }\n return prev;\n });\n } else if (key === \"ArrowDown\") {\n event.preventDefault();\n const list = listRef.current;\n if (list) {\n moveFocus(list, null, nextItem);\n }\n } else if (\n treatQueryAsValue &&\n event.nativeEvent.isComposing === false &&\n key === \"Enter\"\n ) {\n if (treatQueryAsValue) {\n selectedOptionsCache.current = [\n {\n value: query,\n label: query,\n } as T,\n ];\n }\n setOpen(false);\n } else if (event.key.length === 1) {\n setOpen(true);\n }\n },\n };\n }, [query, treatQueryAsValue, updateValue, readOnly]);\n\n const listProps = useMemo(() => {\n return {\n ref: listRef,\n role: \"listbox\",\n tabIndex: -1,\n onKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => {\n const key = event.key;\n const list = listRef.current;\n if (list === null) {\n return;\n }\n const currentFocus = ownerDocument(list).activeElement;\n if (key === \"ArrowDown\") {\n event.preventDefault();\n moveFocus(list, currentFocus, nextItem);\n } else if (key === \"ArrowUp\") {\n event.preventDefault();\n moveFocus(list, currentFocus, previousItem);\n }\n },\n };\n }, []);\n\n const listItems = useMemo(() => {\n return options?.map((option, index) => {\n const selected = option.value === value;\n return {\n key: `${option.value}-${index}`,\n option,\n props: {\n role: \"option\",\n \"aria-selected\": selected,\n /**\n * 何も選択されていないときは、先頭のオプションに飛べるようにする\n */\n tabIndex: (value === undefined ? index === 0 : selected) ? -1 : -1,\n onClick: () => {\n updateValue(option);\n setQuery(\"\");\n if (blurOnSelect === false) {\n pseudoInputRef?.current?.focus();\n }\n setOpen(false);\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLLIElement>) => {\n const key = event.key;\n if (key === \"Enter\" || key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n },\n },\n };\n });\n }, [blurOnSelect, options, updateValue, value]);\n\n const result = useMemo(() => {\n return {\n displayValue,\n query,\n value,\n openList: open,\n inputProps,\n pseudoInputProps,\n listProps,\n listItems,\n rootProps,\n isFocused: isFocused,\n };\n }, [\n displayValue,\n inputProps,\n listItems,\n listProps,\n open,\n pseudoInputProps,\n query,\n rootProps,\n value,\n isFocused,\n ]);\n return result;\n};\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@ export interface SelectOptionValue {
|
|
|
11
11
|
keys?: string[];
|
|
12
12
|
[key: string]: unknown;
|
|
13
13
|
}
|
|
14
|
-
interface UseSelectFieldArgs<T extends SelectOptionValue> {
|
|
14
|
+
export interface UseSelectFieldArgs<T extends SelectOptionValue> {
|
|
15
15
|
/**
|
|
16
16
|
* 選択肢の初期値を指定する。
|
|
17
17
|
*/
|
|
@@ -49,6 +49,11 @@ interface UseSelectFieldArgs<T extends SelectOptionValue> {
|
|
|
49
49
|
* 選択肢が変更された時に呼ばれるコールバック関数を指定する。
|
|
50
50
|
*/
|
|
51
51
|
onChangeOption?: (option: T) => void;
|
|
52
|
+
/**
|
|
53
|
+
* 選択後にinput要素から離脱する
|
|
54
|
+
* @default false
|
|
55
|
+
*/
|
|
56
|
+
blurOnSelect?: boolean;
|
|
52
57
|
}
|
|
53
58
|
interface UseSelectFieldResult<T extends SelectOptionValue> {
|
|
54
59
|
/**
|
|
@@ -91,6 +96,10 @@ interface UseSelectFieldResult<T extends SelectOptionValue> {
|
|
|
91
96
|
* 全ての要素の親となる要素に渡すprops
|
|
92
97
|
*/
|
|
93
98
|
rootProps: React.ComponentPropsWithRef<"div">;
|
|
99
|
+
/**
|
|
100
|
+
* 擬似的なinput要素つまり検索用のinput要素にフォーカスしているかどうかを表すフラグ。
|
|
101
|
+
*/
|
|
102
|
+
isFocused: boolean;
|
|
94
103
|
}
|
|
95
104
|
export declare const useSelectField: <T extends SelectOptionValue>(args: UseSelectFieldArgs<T>) => UseSelectFieldResult<T>;
|
|
96
105
|
export {};
|