smarthr-ui 30.5.0 → 30.7.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/esm/components/ComboBox/MultiComboBox.d.ts +8 -65
- package/esm/components/ComboBox/MultiComboBox.js +2 -2
- package/esm/components/ComboBox/MultiComboBox.js.map +1 -1
- package/esm/components/ComboBox/MultiSelectedItemTooltip.d.ts +1 -1
- package/esm/components/ComboBox/SingleComboBox.d.ts +9 -65
- package/esm/components/ComboBox/SingleComboBox.js +5 -4
- package/esm/components/ComboBox/SingleComboBox.js.map +1 -1
- package/esm/components/ComboBox/types.d.ts +69 -1
- package/esm/components/ComboBox/useListBox.d.ts +1 -1
- package/esm/components/ComboBox/useOptions.js +2 -1
- package/esm/components/ComboBox/useOptions.js.map +1 -1
- package/esm/components/Dialog/RemoteDialogTrigger.d.ts +6 -0
- package/esm/components/Dialog/RemoteDialogTrigger.js +24 -0
- package/esm/components/Dialog/RemoteDialogTrigger.js.map +1 -0
- package/esm/components/Dialog/RemoteTriggerActionDialog/RemoteTriggerActionDialog.d.ts +3 -10
- package/esm/components/Dialog/RemoteTriggerActionDialog/RemoteTriggerActionDialog.js +3 -43
- package/esm/components/Dialog/RemoteTriggerActionDialog/RemoteTriggerActionDialog.js.map +1 -1
- package/esm/components/Dialog/RemoteTriggerActionDialog/index.d.ts +1 -1
- package/esm/components/Dialog/RemoteTriggerActionDialog/index.js +1 -1
- package/esm/components/Dialog/RemoteTriggerActionDialog/index.js.map +1 -1
- package/esm/components/Dialog/RemoteTriggerMessageDialog/RemoteTriggerMessageDialog.d.ts +6 -0
- package/esm/components/Dialog/RemoteTriggerMessageDialog/RemoteTriggerMessageDialog.js +8 -0
- package/esm/components/Dialog/RemoteTriggerMessageDialog/RemoteTriggerMessageDialog.js.map +1 -0
- package/esm/components/Dialog/RemoteTriggerMessageDialog/index.d.ts +1 -0
- package/esm/components/Dialog/RemoteTriggerMessageDialog/index.js +2 -0
- package/esm/components/Dialog/RemoteTriggerMessageDialog/index.js.map +1 -0
- package/esm/components/Dialog/index.d.ts +3 -1
- package/esm/components/Dialog/index.js +3 -1
- package/esm/components/Dialog/index.js.map +1 -1
- package/esm/components/Dialog/useRemoteTrigger.d.ts +8 -0
- package/esm/components/Dialog/useRemoteTrigger.js +29 -0
- package/esm/components/Dialog/useRemoteTrigger.js.map +1 -0
- package/esm/components/Dropdown/DropdownMenuButton/DropdownMenuButton.js +5 -4
- package/esm/components/Dropdown/DropdownMenuButton/DropdownMenuButton.js.map +1 -1
- package/esm/components/Header/HeaderDropdownMenuButton.d.ts +19 -5
- package/esm/components/Header/HeaderLink.d.ts +4 -1
- package/esm/components/Pagination/PaginationItem.d.ts +4 -1
- package/esm/index.d.ts +1 -1
- package/esm/index.js +1 -1
- package/esm/index.js.map +1 -1
- package/lib/components/ComboBox/MultiComboBox.d.ts +8 -65
- package/lib/components/ComboBox/MultiComboBox.js +2 -2
- package/lib/components/ComboBox/MultiComboBox.js.map +1 -1
- package/lib/components/ComboBox/MultiSelectedItemTooltip.d.ts +1 -1
- package/lib/components/ComboBox/SingleComboBox.d.ts +9 -65
- package/lib/components/ComboBox/SingleComboBox.js +8 -4
- package/lib/components/ComboBox/SingleComboBox.js.map +1 -1
- package/lib/components/ComboBox/types.d.ts +69 -1
- package/lib/components/ComboBox/useListBox.d.ts +1 -1
- package/lib/components/ComboBox/useOptions.js +5 -1
- package/lib/components/ComboBox/useOptions.js.map +1 -1
- package/lib/components/Dialog/RemoteDialogTrigger.d.ts +6 -0
- package/lib/components/Dialog/RemoteDialogTrigger.js +28 -0
- package/lib/components/Dialog/RemoteDialogTrigger.js.map +1 -0
- package/lib/components/Dialog/RemoteTriggerActionDialog/RemoteTriggerActionDialog.d.ts +3 -10
- package/lib/components/Dialog/RemoteTriggerActionDialog/RemoteTriggerActionDialog.js +6 -67
- package/lib/components/Dialog/RemoteTriggerActionDialog/RemoteTriggerActionDialog.js.map +1 -1
- package/lib/components/Dialog/RemoteTriggerActionDialog/index.d.ts +1 -1
- package/lib/components/Dialog/RemoteTriggerActionDialog/index.js +1 -2
- package/lib/components/Dialog/RemoteTriggerActionDialog/index.js.map +1 -1
- package/lib/components/Dialog/RemoteTriggerMessageDialog/RemoteTriggerMessageDialog.d.ts +6 -0
- package/lib/components/Dialog/RemoteTriggerMessageDialog/RemoteTriggerMessageDialog.js +15 -0
- package/lib/components/Dialog/RemoteTriggerMessageDialog/RemoteTriggerMessageDialog.js.map +1 -0
- package/lib/components/Dialog/RemoteTriggerMessageDialog/index.d.ts +1 -0
- package/lib/components/Dialog/RemoteTriggerMessageDialog/index.js +6 -0
- package/lib/components/Dialog/RemoteTriggerMessageDialog/index.js.map +1 -0
- package/lib/components/Dialog/index.d.ts +3 -1
- package/lib/components/Dialog/index.js +5 -2
- package/lib/components/Dialog/index.js.map +1 -1
- package/lib/components/Dialog/useRemoteTrigger.d.ts +8 -0
- package/lib/components/Dialog/useRemoteTrigger.js +33 -0
- package/lib/components/Dialog/useRemoteTrigger.js.map +1 -0
- package/lib/components/Dropdown/DropdownMenuButton/DropdownMenuButton.js +4 -3
- package/lib/components/Dropdown/DropdownMenuButton/DropdownMenuButton.js.map +1 -1
- package/lib/components/Header/HeaderDropdownMenuButton.d.ts +19 -5
- package/lib/components/Header/HeaderLink.d.ts +4 -1
- package/lib/components/Pagination/PaginationItem.d.ts +4 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +4 -3
- package/lib/index.js.map +1 -1
- package/package.json +16 -13
|
@@ -1,87 +1,26 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { HTMLAttributes, InputHTMLAttributes } from 'react';
|
|
2
2
|
import { DecoratorsType } from '../../types/props';
|
|
3
|
-
import { ComboBoxItem } from './types';
|
|
4
|
-
type Props<T> = {
|
|
5
|
-
/**
|
|
6
|
-
* 選択可能なアイテムのリスト
|
|
7
|
-
*/
|
|
8
|
-
items: Array<ComboBoxItem<T>>;
|
|
3
|
+
import { BaseProps, ComboBoxItem } from './types';
|
|
4
|
+
type Props<T> = BaseProps<T> & {
|
|
9
5
|
/**
|
|
10
6
|
* 選択されているアイテムのリスト
|
|
11
7
|
*/
|
|
12
8
|
selectedItems: Array<ComboBoxItem<T> & {
|
|
13
9
|
deletable?: boolean;
|
|
14
10
|
}>;
|
|
15
|
-
/**
|
|
16
|
-
* input 要素の `name` 属性の値
|
|
17
|
-
*/
|
|
18
|
-
name?: string;
|
|
19
|
-
/**
|
|
20
|
-
* input 要素の `disabled` 属性の値
|
|
21
|
-
*/
|
|
22
|
-
disabled?: boolean;
|
|
23
|
-
/**
|
|
24
|
-
* `true` のとき、コンポーネントの外枠が `DANGER` カラーになる
|
|
25
|
-
*/
|
|
26
|
-
error?: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* `true` のとき、 `items` 内に存在しないアイテムを新しく追加できるようになる
|
|
29
|
-
*/
|
|
30
|
-
creatable?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* input 要素の `placeholder` 属性の値
|
|
33
|
-
*/
|
|
34
|
-
placeholder?: string;
|
|
35
|
-
/**
|
|
36
|
-
* ドロップダウンリスト内に表示するヘルプメッセージ
|
|
37
|
-
*/
|
|
38
|
-
dropdownHelpMessage?: ReactNode;
|
|
39
|
-
/**
|
|
40
|
-
* `true` のとき、ドロップダウンリスト内にローダーを表示する
|
|
41
|
-
*/
|
|
42
|
-
isLoading?: boolean;
|
|
43
11
|
/**
|
|
44
12
|
* 選択されているアイテムのラベルを省略表示するかどうか
|
|
45
13
|
*/
|
|
46
14
|
selectedItemEllipsis?: boolean;
|
|
47
|
-
/**
|
|
48
|
-
* input 要素の `width` スタイルに適用する値
|
|
49
|
-
*/
|
|
50
|
-
width?: number | string;
|
|
51
|
-
/**
|
|
52
|
-
* ドロップダウンリストの `width` スタイルに適用する値
|
|
53
|
-
*/
|
|
54
|
-
dropdownWidth?: number | string;
|
|
55
15
|
/**
|
|
56
16
|
* テキストボックスの `value` 属性の値。
|
|
57
17
|
* `onChangeInput` と併せて設定することで、テキストボックスの挙動が制御可能になる。
|
|
58
18
|
*/
|
|
59
19
|
inputValue?: string;
|
|
60
|
-
/**
|
|
61
|
-
* コンポーネント内の一番外側の要素に適用するクラス名
|
|
62
|
-
*/
|
|
63
|
-
className?: string;
|
|
64
|
-
/**
|
|
65
|
-
* input 要素の `value` が変わった時に発火するコールバック関数
|
|
66
|
-
* @deprecated `onChange` は非推奨なため、代わりに `onChangeInput` を使用してください。
|
|
67
|
-
*/
|
|
68
|
-
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
69
|
-
/**
|
|
70
|
-
* input 要素の `value` が変わった時に発火するコールバック関数
|
|
71
|
-
*/
|
|
72
|
-
onChangeInput?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
73
|
-
/**
|
|
74
|
-
* `items` 内に存在しないアイテムが追加されたときに発火するコールバック関数
|
|
75
|
-
*/
|
|
76
|
-
onAdd?: (label: string) => void;
|
|
77
20
|
/**
|
|
78
21
|
* 選択されているアイテムの削除ボタンがクリックされた時に発火するコールバック関数
|
|
79
22
|
*/
|
|
80
23
|
onDelete?: (item: ComboBoxItem<T>) => void;
|
|
81
|
-
/**
|
|
82
|
-
* アイテムが選択された時に発火するコールバック関数
|
|
83
|
-
*/
|
|
84
|
-
onSelect?: (item: ComboBoxItem<T>) => void;
|
|
85
24
|
/**
|
|
86
25
|
* 選択されているアイテムのリストが変わった時に発火するコールバック関数
|
|
87
26
|
*/
|
|
@@ -101,7 +40,11 @@ type Props<T> = {
|
|
|
101
40
|
destroyButtonIconAlt?: (text: string) => string;
|
|
102
41
|
selectedListAriaLabel?: (text: string) => string;
|
|
103
42
|
};
|
|
43
|
+
/**
|
|
44
|
+
* input 要素の属性
|
|
45
|
+
*/
|
|
46
|
+
inputAttributes?: Omit<InputHTMLAttributes<HTMLInputElement>, 'name' | 'disabled' | 'required' | 'type' | 'aria-activedescendant' | 'aria-autocomplete' | 'aria-controls' | 'aria-disabled' | 'aria-expanded' | 'aria-haspopup' | 'aria-invalid' | 'autoComplete' | 'className' | 'onChange' | 'onCompositionEnd' | 'onCompositionStart' | 'onFocus' | 'onKeyDown' | 'ref' | 'role' | 'tabIndex' | 'value'>;
|
|
104
47
|
};
|
|
105
48
|
type ElementProps<T> = Omit<HTMLAttributes<HTMLDivElement>, keyof Props<T>>;
|
|
106
|
-
export declare function MultiComboBox<T>({ items, selectedItems, name, disabled, error, creatable, placeholder, dropdownHelpMessage, isLoading, selectedItemEllipsis, width, dropdownWidth, inputValue: controlledInputValue, className, onChange, onChangeInput, onAdd, onDelete, onSelect, onChangeSelected, onFocus, onBlur, decorators, ...props }: Props<T> & ElementProps<T>): JSX.Element;
|
|
49
|
+
export declare function MultiComboBox<T>({ items, selectedItems, name, disabled, required, error, creatable, placeholder, dropdownHelpMessage, isLoading, selectedItemEllipsis, width, dropdownWidth, inputValue: controlledInputValue, className, onChange, onChangeInput, onAdd, onDelete, onSelect, onChangeSelected, onFocus, onBlur, decorators, inputAttributes, ...props }: Props<T> & ElementProps<T>): JSX.Element;
|
|
107
50
|
export {};
|
|
@@ -12,7 +12,7 @@ import { useFocusControl } from './useFocusControl';
|
|
|
12
12
|
import { useListBox } from './useListBox';
|
|
13
13
|
import { useOptions } from './useOptions';
|
|
14
14
|
const SELECTED_LIST_ARIA_LABEL = '選択済みアイテム';
|
|
15
|
-
export function MultiComboBox({ items, selectedItems, name, disabled = false, error = false, creatable = false, placeholder = '', dropdownHelpMessage, isLoading, selectedItemEllipsis, width = 'auto', dropdownWidth = 'auto', inputValue: controlledInputValue, className = '', onChange, onChangeInput, onAdd, onDelete, onSelect, onChangeSelected, onFocus, onBlur, decorators, ...props }) {
|
|
15
|
+
export function MultiComboBox({ items, selectedItems, name, disabled = false, required = false, error = false, creatable = false, placeholder = '', dropdownHelpMessage, isLoading, selectedItemEllipsis, width = 'auto', dropdownWidth = 'auto', inputValue: controlledInputValue, className = '', onChange, onChangeInput, onAdd, onDelete, onSelect, onChangeSelected, onFocus, onBlur, decorators, inputAttributes, ...props }) {
|
|
16
16
|
const theme = useTheme();
|
|
17
17
|
const classNames = useMultiComboBoxClassNames();
|
|
18
18
|
const outerRef = useRef(null);
|
|
@@ -162,7 +162,7 @@ export function MultiComboBox({ items, selectedItems, name, disabled = false, er
|
|
|
162
162
|
SELECTED_LIST_ARIA_LABEL, className: classNames.selectedList }, selectedItems.map((selectedItem, i) => (React.createElement("li", { key: `${selectedItem.label}-${selectedItem.value}` },
|
|
163
163
|
React.createElement(MultiSelectedItem, { item: selectedItem, disabled: disabled, onDelete: handleDelete, enableEllipsis: selectedItemEllipsis, buttonRef: deletionButtonRefs[i], decorators: decorators }))))),
|
|
164
164
|
React.createElement(InputWrapper, { className: isFocused ? undefined : 'hidden' },
|
|
165
|
-
React.createElement(Input, { type: "text", name: name, value: inputValue, disabled: disabled, ref: inputRef, themes: theme, onChange: (e) => {
|
|
165
|
+
React.createElement(Input, { ...inputAttributes, type: "text", name: name, value: inputValue, disabled: disabled, required: required, ref: inputRef, themes: theme, onChange: (e) => {
|
|
166
166
|
if (onChange)
|
|
167
167
|
onChange(e);
|
|
168
168
|
if (onChangeInput)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/MultiComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"MultiComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/MultiComboBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import React, { HTMLAttributes, MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import { DecoratorsType } from '../../types/props';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
* 選択可能なアイテムのリスト
|
|
7
|
-
*/
|
|
8
|
-
items: Array<ComboBoxItem<T>>;
|
|
3
|
+
import { Input } from '../Input';
|
|
4
|
+
import { BaseProps, ComboBoxItem } from './types';
|
|
5
|
+
type Props<T> = BaseProps<T> & {
|
|
9
6
|
/**
|
|
10
7
|
* 選択されているアイテム
|
|
11
8
|
*/
|
|
@@ -14,67 +11,10 @@ type Props<T> = {
|
|
|
14
11
|
* デフォルトで選択されるアイテム
|
|
15
12
|
*/
|
|
16
13
|
defaultItem?: ComboBoxItem<T>;
|
|
17
|
-
/**
|
|
18
|
-
* input 要素の `name` 属性の値
|
|
19
|
-
*/
|
|
20
|
-
name?: string;
|
|
21
|
-
/**
|
|
22
|
-
* input 要素の `disabled` 属性の値
|
|
23
|
-
*/
|
|
24
|
-
disabled?: boolean;
|
|
25
14
|
/**
|
|
26
15
|
* コンポーネント内の先頭に表示する内容
|
|
27
16
|
*/
|
|
28
17
|
prefix?: ReactNode;
|
|
29
|
-
/**
|
|
30
|
-
* `true` のとき、コンポーネントの外枠が `DANGER` カラーになる
|
|
31
|
-
*/
|
|
32
|
-
error?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* `true` のとき、 `items` 内に存在しないアイテムを新しく追加できるようになる
|
|
35
|
-
*/
|
|
36
|
-
creatable?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* input 要素の `placeholder` 属性の値
|
|
39
|
-
*/
|
|
40
|
-
placeholder?: string;
|
|
41
|
-
/**
|
|
42
|
-
* ドロップダウンリスト内に表示するヘルプメッセージ
|
|
43
|
-
*/
|
|
44
|
-
dropdownHelpMessage?: ReactNode;
|
|
45
|
-
/**
|
|
46
|
-
* `true` のとき、ドロップダウンリスト内にローダーを表示する
|
|
47
|
-
*/
|
|
48
|
-
isLoading?: boolean;
|
|
49
|
-
/**
|
|
50
|
-
* input 要素の `width` スタイルに適用する値
|
|
51
|
-
*/
|
|
52
|
-
width?: number | string;
|
|
53
|
-
/**
|
|
54
|
-
* ドロップダウンリストの `width` スタイルに適用する値
|
|
55
|
-
*/
|
|
56
|
-
dropdownWidth?: number | string;
|
|
57
|
-
/**
|
|
58
|
-
* コンポーネント内の一番外側の要素に適用するクラス名
|
|
59
|
-
*/
|
|
60
|
-
className?: string;
|
|
61
|
-
/**
|
|
62
|
-
* input 要素の `value` が変わった時に発火するコールバック関数
|
|
63
|
-
* @deprecated `onChange` は非推奨なため、 代わりに `onChangeInput` を使用してください。
|
|
64
|
-
*/
|
|
65
|
-
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
66
|
-
/**
|
|
67
|
-
* input 要素の `value` が変わった時に発火するコールバック関数
|
|
68
|
-
*/
|
|
69
|
-
onChangeInput?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
70
|
-
/**
|
|
71
|
-
* `items` 内に存在しないアイテムが追加されたときに発火するコールバック関数
|
|
72
|
-
*/
|
|
73
|
-
onAdd?: (label: string) => void;
|
|
74
|
-
/**
|
|
75
|
-
* アイテムが選択された時に発火するコールバック関数
|
|
76
|
-
*/
|
|
77
|
-
onSelect?: (item: ComboBoxItem<T>) => void;
|
|
78
18
|
/**
|
|
79
19
|
* 選択されているアイテムがクリアされた時に発火するコールバック関数
|
|
80
20
|
*/
|
|
@@ -94,7 +34,11 @@ type Props<T> = {
|
|
|
94
34
|
decorators?: DecoratorsType<'noResultText'> & {
|
|
95
35
|
destroyButtonIconAlt?: (text: string) => string;
|
|
96
36
|
};
|
|
37
|
+
/**
|
|
38
|
+
* input 要素の属性
|
|
39
|
+
*/
|
|
40
|
+
inputAttributes?: Omit<React.ComponentProps<typeof Input>, 'aria-activedescendant' | 'aria-autocomplete' | 'autoComplete' | 'className' | 'disabled' | 'required' | 'error' | 'name' | 'onChange' | 'onClick' | 'onCompositionEnd' | 'onCompositionStart' | 'onFocus' | 'onKeyDown' | 'placeholder' | 'prefix' | 'ref' | 'suffix' | 'type' | 'value'>;
|
|
97
41
|
};
|
|
98
42
|
type ElementProps<T> = Omit<HTMLAttributes<HTMLDivElement>, keyof Props<T>>;
|
|
99
|
-
export declare function SingleComboBox<T>({ items, selectedItem, defaultItem, name, disabled, prefix, error, creatable, placeholder, dropdownHelpMessage, isLoading, width, dropdownWidth, className, onChange, onChangeInput, onAdd, onSelect, onClear, onClearClick, onChangeSelected, decorators, ...props }: Props<T> & ElementProps<T>): JSX.Element;
|
|
43
|
+
export declare function SingleComboBox<T>({ items, selectedItem, defaultItem, name, disabled, required, prefix, error, creatable, placeholder, dropdownHelpMessage, isLoading, width, dropdownWidth, className, onChange, onChangeInput, onAdd, onSelect, onClear, onClearClick, onChangeSelected, decorators, inputAttributes, ...props }: Props<T> & ElementProps<T>): JSX.Element;
|
|
100
44
|
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
|
|
2
|
+
import innerText from 'react-innertext';
|
|
2
3
|
import styled, { css } from 'styled-components';
|
|
3
4
|
import { useClick } from '../../hooks/useClick';
|
|
4
5
|
import { useTheme } from '../../hooks/useTheme';
|
|
@@ -10,7 +11,7 @@ import { useSingleComboBoxClassNames } from './useClassNames';
|
|
|
10
11
|
import { useListBox } from './useListBox';
|
|
11
12
|
import { useOptions } from './useOptions';
|
|
12
13
|
const DESTROY_BUTTON_TEXT = '削除';
|
|
13
|
-
export function SingleComboBox({ items, selectedItem, defaultItem, name, disabled = false, prefix, error = false, creatable = false, placeholder = '', dropdownHelpMessage, isLoading, width = 'auto', dropdownWidth = 'auto', className = '', onChange, onChangeInput, onAdd, onSelect, onClear, onClearClick, onChangeSelected, decorators, ...props }) {
|
|
14
|
+
export function SingleComboBox({ items, selectedItem, defaultItem, name, disabled = false, required = false, prefix, error = false, creatable = false, placeholder = '', dropdownHelpMessage, isLoading, width = 'auto', dropdownWidth = 'auto', className = '', onChange, onChangeInput, onAdd, onSelect, onClear, onClearClick, onChangeSelected, decorators, inputAttributes, ...props }) {
|
|
14
15
|
const theme = useTheme();
|
|
15
16
|
const classNames = useSingleComboBoxClassNames();
|
|
16
17
|
const outerRef = useRef(null);
|
|
@@ -59,7 +60,7 @@ export function SingleComboBox({ items, selectedItem, defaultItem, name, disable
|
|
|
59
60
|
setIsExpanded(false);
|
|
60
61
|
setIsEditing(false);
|
|
61
62
|
if (!selectedItem && defaultItem) {
|
|
62
|
-
setInputValue(defaultItem.label);
|
|
63
|
+
setInputValue(innerText(defaultItem.label));
|
|
63
64
|
onSelect && onSelect(defaultItem);
|
|
64
65
|
}
|
|
65
66
|
}, [selectedItem, defaultItem, onSelect]);
|
|
@@ -156,7 +157,7 @@ export function SingleComboBox({ items, selectedItem, defaultItem, name, disable
|
|
|
156
157
|
}, [unfocus]));
|
|
157
158
|
useEffect(() => {
|
|
158
159
|
if (selectedItem) {
|
|
159
|
-
setInputValue(selectedItem.label);
|
|
160
|
+
setInputValue(innerText(selectedItem.label));
|
|
160
161
|
}
|
|
161
162
|
else {
|
|
162
163
|
setInputValue('');
|
|
@@ -174,7 +175,7 @@ export function SingleComboBox({ items, selectedItem, defaultItem, name, disable
|
|
|
174
175
|
}), [classNames.listBox]);
|
|
175
176
|
return (React.createElement(ComboBoxContext.Provider, { value: contextValue },
|
|
176
177
|
React.createElement(Container, { ...props, ref: outerRef, className: `${disabled ? 'disabled' : ''} ${className} ${classNames.wrapper}`, "$width": width, role: "combobox", "aria-haspopup": "listbox", "aria-controls": listBoxId, "aria-expanded": isFocused, "aria-invalid": error || undefined },
|
|
177
|
-
React.createElement(StyledInput, { placeholder: placeholder, type: "text", name: name, value: inputValue, disabled: disabled, prefix: prefix, error: error, suffix: React.createElement(React.Fragment, null,
|
|
178
|
+
React.createElement(StyledInput, { ...inputAttributes, placeholder: placeholder, type: "text", name: name, value: inputValue, disabled: disabled, required: required, prefix: prefix, error: error, suffix: React.createElement(React.Fragment, null,
|
|
178
179
|
React.createElement(ClearButton, { type: "button", onClick: onClickClear, ref: clearButtonRef, themes: theme, className: `${needsClearButton ? '' : 'hidden'} ${classNames.clearButton}` },
|
|
179
180
|
React.createElement(FaTimesCircleIcon, { color: theme.color.TEXT_BLACK, alt: decorators?.destroyButtonIconAlt?.(DESTROY_BUTTON_TEXT) || DESTROY_BUTTON_TEXT })),
|
|
180
181
|
React.createElement(CaretDownLayout, { themes: theme, onClick: onClickInput },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SingleComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/SingleComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAS,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,2BAA2B,EAAE,MAAM,iBAAiB,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"SingleComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/SingleComboBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import React, { ChangeEvent, ReactNode } from 'react';
|
|
1
2
|
export type ComboBoxItem<T> = {
|
|
2
3
|
value: string;
|
|
3
|
-
label:
|
|
4
|
+
label: React.ReactNode;
|
|
4
5
|
disabled?: boolean;
|
|
5
6
|
data?: T;
|
|
6
7
|
};
|
|
@@ -10,3 +11,70 @@ export type ComboBoxOption<T> = {
|
|
|
10
11
|
isNew: boolean;
|
|
11
12
|
item: ComboBoxItem<T>;
|
|
12
13
|
};
|
|
14
|
+
export type BaseProps<T> = {
|
|
15
|
+
/**
|
|
16
|
+
* 選択可能なアイテムのリスト
|
|
17
|
+
*/
|
|
18
|
+
items: Array<ComboBoxItem<T>>;
|
|
19
|
+
/**
|
|
20
|
+
* input 要素の `name` 属性の値
|
|
21
|
+
*/
|
|
22
|
+
name?: string;
|
|
23
|
+
/**
|
|
24
|
+
* input 要素の `disabled` 属性の値
|
|
25
|
+
*/
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* input 要素の `required` 属性の値
|
|
29
|
+
*/
|
|
30
|
+
required?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* コンポーネント内の一番外側の要素に適用するクラス名
|
|
33
|
+
*/
|
|
34
|
+
className?: string;
|
|
35
|
+
/**
|
|
36
|
+
* `true` のとき、コンポーネントの外枠が `DANGER` カラーになる
|
|
37
|
+
*/
|
|
38
|
+
error?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* `true` のとき、 `items` 内に存在しないアイテムを新しく追加できるようになる
|
|
41
|
+
*/
|
|
42
|
+
creatable?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* input 要素の `placeholder` 属性の値
|
|
45
|
+
*/
|
|
46
|
+
placeholder?: string;
|
|
47
|
+
/**
|
|
48
|
+
* `true` のとき、ドロップダウンリスト内にローダーを表示する
|
|
49
|
+
*/
|
|
50
|
+
isLoading?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* input 要素の `width` スタイルに適用する値
|
|
53
|
+
*/
|
|
54
|
+
width?: number | string;
|
|
55
|
+
/**
|
|
56
|
+
* ドロップダウンリスト内に表示するヘルプメッセージ
|
|
57
|
+
*/
|
|
58
|
+
dropdownHelpMessage?: ReactNode;
|
|
59
|
+
/**
|
|
60
|
+
* ドロップダウンリストの `width` スタイルに適用する値
|
|
61
|
+
*/
|
|
62
|
+
dropdownWidth?: number | string;
|
|
63
|
+
/**
|
|
64
|
+
* input 要素の `value` が変わった時に発火するコールバック関数
|
|
65
|
+
*/
|
|
66
|
+
onChangeInput?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
67
|
+
/**
|
|
68
|
+
* `items` 内に存在しないアイテムが追加されたときに発火するコールバック関数
|
|
69
|
+
*/
|
|
70
|
+
onAdd?: (label: ReactNode) => void;
|
|
71
|
+
/**
|
|
72
|
+
* アイテムが選択された時に発火するコールバック関数
|
|
73
|
+
*/
|
|
74
|
+
onSelect?: (item: ComboBoxItem<T>) => void;
|
|
75
|
+
/**
|
|
76
|
+
* input 要素の `value` が変わった時に発火するコールバック関数
|
|
77
|
+
* @deprecated `onChange` は非推奨なため、 代わりに `onChangeInput` を使用してください。
|
|
78
|
+
*/
|
|
79
|
+
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
80
|
+
};
|
|
@@ -5,7 +5,7 @@ type Props<T> = {
|
|
|
5
5
|
options: Array<ComboBoxOption<T>>;
|
|
6
6
|
dropdownHelpMessage?: ReactNode;
|
|
7
7
|
dropdownWidth?: string | number;
|
|
8
|
-
onAdd?: (label:
|
|
8
|
+
onAdd?: (label: ReactNode) => void;
|
|
9
9
|
onSelect: (item: ComboBoxItem<T>) => void;
|
|
10
10
|
isExpanded: boolean;
|
|
11
11
|
isLoading?: boolean;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useCallback, useMemo } from 'react';
|
|
2
|
+
import innerText from 'react-innertext';
|
|
2
3
|
import { useId } from '../../hooks/useId';
|
|
3
4
|
import { convertMatchableString } from './comboBoxHelper';
|
|
4
5
|
export function useOptions({ items, selected, creatable, inputValue = '', isFilteringDisabled = false, }) {
|
|
@@ -41,7 +42,7 @@ export function useOptions({ items, selected, creatable, inputValue = '', isFilt
|
|
|
41
42
|
return allOptions.filter(({ item: { label } }) => {
|
|
42
43
|
if (!inputValue)
|
|
43
44
|
return true;
|
|
44
|
-
return convertMatchableString(label).includes(convertMatchableString(inputValue));
|
|
45
|
+
return convertMatchableString(innerText(label)).includes(convertMatchableString(inputValue));
|
|
45
46
|
});
|
|
46
47
|
}, [allOptions, inputValue, isFilteringDisabled]);
|
|
47
48
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOptions.js","sourceRoot":"","sources":["../../../src/components/ComboBox/useOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"useOptions.js","sourceRoot":"","sources":["../../../src/components/ComboBox/useOptions.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { cloneElement, useCallback, useMemo } from 'react';
|
|
2
|
+
import { TRIGGER_EVENT } from './useRemoteTrigger';
|
|
3
|
+
const onClickRemoteDialogTrigger = (e) => {
|
|
4
|
+
document.dispatchEvent(new CustomEvent(TRIGGER_EVENT, {
|
|
5
|
+
detail: { id: e.currentTarget.getAttribute('aria-controls') },
|
|
6
|
+
}));
|
|
7
|
+
};
|
|
8
|
+
export const RemoteDialogTrigger = ({ targetId, children, onClick }) => {
|
|
9
|
+
const actualOnClick = useCallback((e) => {
|
|
10
|
+
if (onClick) {
|
|
11
|
+
return onClick(() => {
|
|
12
|
+
onClickRemoteDialogTrigger(e);
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
onClickRemoteDialogTrigger(e);
|
|
16
|
+
}, [onClick]);
|
|
17
|
+
const actualTrigger = useMemo(() => cloneElement(children, {
|
|
18
|
+
onClick: actualOnClick,
|
|
19
|
+
'aria-haspopup': 'true',
|
|
20
|
+
'aria-controls': targetId,
|
|
21
|
+
}), [children, targetId, actualOnClick]);
|
|
22
|
+
return actualTrigger;
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=RemoteDialogTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RemoteDialogTrigger.js","sourceRoot":"","sources":["../../../src/components/Dialog/RemoteDialogTrigger.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/E,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,MAAM,0BAA0B,GAAG,CAAC,CAAgC,EAAE,EAAE;IACtE,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,aAAa,EAAE;QAC7B,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,eAAe,CAAW,EAAE;KACxE,CAAC,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAI3B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;IACvC,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAgC,EAAE,EAAE;QACnC,IAAI,OAAO,EAAE;YACX,OAAO,OAAO,CAAC,GAAG,EAAE;gBAClB,0BAA0B,CAAC,CAAC,CAAC,CAAA;YAC/B,CAAC,CAAC,CAAA;SACH;QAED,0BAA0B,CAAC,CAAC,CAAC,CAAA;IAC/B,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IACD,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CACH,YAAY,CAAC,QAAwB,EAAE;QACrC,OAAO,EAAE,aAAa;QACtB,eAAe,EAAE,MAAM;QACvB,eAAe,EAAE,QAAQ;KAC1B,CAAC,EACJ,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,CAAC,CACpC,CAAA;IAED,OAAO,aAAa,CAAA;AACtB,CAAC,CAAA"}
|
|
@@ -1,13 +1,6 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { ActionDialog } from '../ActionDialog';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
onClickClose?: (close: () => void) => void;
|
|
6
|
-
};
|
|
7
|
-
export declare const RemoteDialogTrigger: React.FC<{
|
|
8
|
-
targetId: string;
|
|
9
|
-
onClick?: (open: () => void) => void;
|
|
10
|
-
children: Omit<ReactElement, 'onClick' | 'aria-haspopup' | 'aria-controls'>;
|
|
11
|
-
}>;
|
|
3
|
+
import { useRemoteTrigger } from '../useRemoteTrigger';
|
|
4
|
+
type Props = Omit<React.ComponentProps<typeof ActionDialog>, 'isOpen' | 'onClickClose' | 'id'> & Parameters<typeof useRemoteTrigger>[0];
|
|
12
5
|
export declare const RemoteTriggerActionDialog: React.FC<Props>;
|
|
13
6
|
export {};
|
|
@@ -1,48 +1,8 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { ActionDialog } from '../ActionDialog';
|
|
3
|
-
|
|
4
|
-
const onClickRemoteDialogTrigger = (e) => {
|
|
5
|
-
document.dispatchEvent(new CustomEvent(TRIGGER_EVENT, {
|
|
6
|
-
detail: { id: e.currentTarget.getAttribute('aria-controls') },
|
|
7
|
-
}));
|
|
8
|
-
};
|
|
9
|
-
export const RemoteDialogTrigger = ({ targetId, children, onClick }) => {
|
|
10
|
-
const actualOnClick = useCallback((e) => {
|
|
11
|
-
if (onClick) {
|
|
12
|
-
return onClick(() => {
|
|
13
|
-
onClickRemoteDialogTrigger(e);
|
|
14
|
-
});
|
|
15
|
-
}
|
|
16
|
-
onClickRemoteDialogTrigger(e);
|
|
17
|
-
}, [onClick]);
|
|
18
|
-
const actualTrigger = useMemo(() => cloneElement(children, {
|
|
19
|
-
onClick: actualOnClick,
|
|
20
|
-
'aria-haspopup': 'true',
|
|
21
|
-
'aria-controls': targetId,
|
|
22
|
-
}), [children, targetId, actualOnClick]);
|
|
23
|
-
return actualTrigger;
|
|
24
|
-
};
|
|
3
|
+
import { useRemoteTrigger } from '../useRemoteTrigger';
|
|
25
4
|
export const RemoteTriggerActionDialog = ({ id, onClickClose, ...props }) => {
|
|
26
|
-
const
|
|
27
|
-
const actualOnClickClose = useCallback(() => {
|
|
28
|
-
if (onClickClose) {
|
|
29
|
-
return onClickClose(() => {
|
|
30
|
-
setIsOpen(false);
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
setIsOpen(false);
|
|
34
|
-
}, [onClickClose]);
|
|
35
|
-
useEffect(() => {
|
|
36
|
-
const handler = ((e) => {
|
|
37
|
-
if (id === e.detail.id) {
|
|
38
|
-
setIsOpen(true);
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
document.addEventListener(TRIGGER_EVENT, handler);
|
|
42
|
-
return () => {
|
|
43
|
-
document.removeEventListener(TRIGGER_EVENT, handler);
|
|
44
|
-
};
|
|
45
|
-
}, [id]);
|
|
5
|
+
const { isOpen, onClickClose: actualOnClickClose } = useRemoteTrigger({ id, onClickClose });
|
|
46
6
|
return React.createElement(ActionDialog, { ...props, id: id, isOpen: isOpen, onClickClose: actualOnClickClose });
|
|
47
7
|
};
|
|
48
8
|
//# sourceMappingURL=RemoteTriggerActionDialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RemoteTriggerActionDialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/RemoteTriggerActionDialog/RemoteTriggerActionDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"RemoteTriggerActionDialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/RemoteTriggerActionDialog/RemoteTriggerActionDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAKtD,MAAM,CAAC,MAAM,yBAAyB,GAAoB,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3F,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,kBAAkB,EAAE,GAAG,gBAAgB,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,CAAA;IAE3F,OAAO,oBAAC,YAAY,OAAK,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,kBAAkB,GAAI,CAAA;AAC9F,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { RemoteTriggerActionDialog
|
|
1
|
+
export { RemoteTriggerActionDialog } from './RemoteTriggerActionDialog';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { RemoteTriggerActionDialog
|
|
1
|
+
export { RemoteTriggerActionDialog } from './RemoteTriggerActionDialog';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Dialog/RemoteTriggerActionDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Dialog/RemoteTriggerActionDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { MessageDialog } from '../MessageDialog';
|
|
3
|
+
import { useRemoteTrigger } from '../useRemoteTrigger';
|
|
4
|
+
type Props = Omit<React.ComponentProps<typeof MessageDialog>, 'isOpen' | 'onClickClose' | 'id'> & Parameters<typeof useRemoteTrigger>[0];
|
|
5
|
+
export declare const RemoteTriggerMessageDialog: React.FC<Props>;
|
|
6
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { MessageDialog } from '../MessageDialog';
|
|
3
|
+
import { useRemoteTrigger } from '../useRemoteTrigger';
|
|
4
|
+
export const RemoteTriggerMessageDialog = ({ id, onClickClose, ...props }) => {
|
|
5
|
+
const { isOpen, onClickClose: actualOnClickClose } = useRemoteTrigger({ id, onClickClose });
|
|
6
|
+
return React.createElement(MessageDialog, { ...props, id: id, isOpen: isOpen, onClickClose: actualOnClickClose });
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=RemoteTriggerMessageDialog.js.map
|