@tcn/ui 0.12.3 → 0.12.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/actions/index.d.ts +0 -2
- package/dist/actions/index.d.ts.map +1 -1
- package/dist/actions/index.js +6 -10
- package/dist/actions/index.js.map +1 -1
- package/dist/group.css +1 -0
- package/dist/inputs/color_input/color_input.js +2 -4
- package/dist/inputs/color_input/color_input.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_header.js +20 -22
- package/dist/inputs/date_picker/date_picker_header.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_input.js +2 -4
- package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_time_selector.js +9 -11
- package/dist/inputs/date_picker/date_picker_time_selector.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_year_input.js +5 -7
- package/dist/inputs/date_picker/date_picker_year_input.js.map +1 -1
- package/dist/inputs/date_picker/date_picker_year_selector.js +2 -4
- package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
- package/dist/inputs/index.d.ts +2 -0
- package/dist/inputs/index.d.ts.map +1 -1
- package/dist/inputs/index.js +24 -20
- package/dist/inputs/index.js.map +1 -1
- package/dist/inputs/multiselect/multiselect_inline_values.js +7 -9
- package/dist/inputs/multiselect/multiselect_inline_values.js.map +1 -1
- package/dist/inputs/multiselect/multiselect_values.js +2 -4
- package/dist/inputs/multiselect/multiselect_values.js.map +1 -1
- package/dist/inputs/phone_number_input/phone_number_input_adapter.js +2 -4
- package/dist/inputs/phone_number_input/phone_number_input_adapter.js.map +1 -1
- package/dist/inputs/phone_number_input/sip_input.js +13 -15
- package/dist/inputs/phone_number_input/sip_input.js.map +1 -1
- package/dist/inputs/select/select.js +2 -4
- package/dist/inputs/select/select.js.map +1 -1
- package/dist/{actions/button → inputs}/select_group/select_group.d.ts +1 -1
- package/dist/inputs/select_group/select_group.d.ts.map +1 -0
- package/dist/{actions/button → inputs}/select_group/select_group.js +3 -3
- package/dist/inputs/select_group/select_group.js.map +1 -0
- package/dist/inputs/select_group/single_select_group.d.ts.map +1 -0
- package/dist/inputs/select_group/single_select_group.js.map +1 -0
- package/dist/inputs/suggestions/suggestion_list.js +2 -4
- package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
- package/dist/layouts/group/group.d.ts +5 -0
- package/dist/layouts/group/group.d.ts.map +1 -0
- package/dist/layouts/group/group.js +26 -0
- package/dist/layouts/group/group.js.map +1 -0
- package/dist/layouts/index.d.ts +2 -0
- package/dist/layouts/index.d.ts.map +1 -1
- package/dist/layouts/index.js +36 -32
- package/dist/layouts/index.js.map +1 -1
- package/dist/overlay/frame/frame.d.ts.map +1 -1
- package/dist/overlay/frame/frame.js +57 -63
- package/dist/overlay/frame/frame.js.map +1 -1
- package/dist/select_group.css +1 -1
- package/dist/stacks/box/box.d.ts +5 -4
- package/dist/stacks/box/box.d.ts.map +1 -1
- package/dist/stacks/box/box.js.map +1 -1
- package/dist/stacks/box/detect_resize_bounds.d.ts +15 -0
- package/dist/stacks/box/detect_resize_bounds.d.ts.map +1 -0
- package/dist/stacks/box/detect_resize_bounds.js +49 -0
- package/dist/stacks/box/detect_resize_bounds.js.map +1 -0
- package/dist/stacks/box/resize_handlers.d.ts.map +1 -1
- package/dist/stacks/box/resize_handlers.js +51 -44
- package/dist/stacks/box/resize_handlers.js.map +1 -1
- package/dist/stacks/box/start_resize_handle.d.ts.map +1 -1
- package/dist/stacks/box/start_resize_handle.js +2 -1
- package/dist/stacks/box/start_resize_handle.js.map +1 -1
- package/dist/stacks/box/types.d.ts +17 -4
- package/dist/stacks/box/types.d.ts.map +1 -1
- package/dist/surfaces/alert/alert.d.ts +0 -2
- package/dist/surfaces/alert/alert.d.ts.map +1 -1
- package/dist/surfaces/alert/alert.js +5 -7
- package/dist/surfaces/alert/alert.js.map +1 -1
- package/dist/surfaces/confirm/confirm.d.ts +3 -3
- package/dist/surfaces/confirm/confirm.d.ts.map +1 -1
- package/dist/surfaces/confirm/confirm.js +46 -45
- package/dist/surfaces/confirm/confirm.js.map +1 -1
- package/dist/surfaces/modal/modal.d.ts.map +1 -1
- package/dist/surfaces/modal/modal.js +22 -13
- package/dist/surfaces/modal/modal.js.map +1 -1
- package/dist/surfaces/pop_confirm/pop_confirm.js +4 -2
- package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
- package/dist/surfaces/window/window.d.ts.map +1 -1
- package/dist/surfaces/window/window.js +21 -24
- package/dist/surfaces/window/window.js.map +1 -1
- package/dist/themes/stories/button_showcase.d.ts.map +1 -1
- package/dist/themes/stylesheets/reset.css +1 -1
- package/dist/themes/stylesheets/reset.js +3 -3
- package/dist/themes/stylesheets/reset.js.map +1 -1
- package/dist/themes/themes/ergo/ergo_theme.css +1 -1
- package/dist/themes/themes/ergo/ergo_theme.js +30 -4
- package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
- package/package.json +3 -2
- package/src/actions/index.ts +0 -8
- package/src/inputs/index.ts +9 -0
- package/src/{actions/button/__stories__ → inputs/select_group}/select_group.stories.tsx +5 -26
- package/src/{actions/button → inputs}/select_group/select_group.tsx +3 -3
- package/src/layouts/bar/bar.stories.tsx +61 -0
- package/src/layouts/group/group.module.css +8 -0
- package/src/layouts/group/group.tsx +23 -0
- package/src/layouts/index.ts +2 -0
- package/src/overlay/frame/frame.tsx +34 -51
- package/src/overlay/popper/__stories__/element_popper.stories.tsx +1 -1
- package/src/stacks/box/box.tsx +10 -16
- package/src/stacks/box/detect_resize_bounds.ts +84 -0
- package/src/stacks/box/resize_handlers.ts +27 -15
- package/src/stacks/box/start_resize_handle.tsx +6 -3
- package/src/stacks/box/types.ts +23 -25
- package/src/surfaces/alert/alert.tsx +0 -2
- package/src/surfaces/confirm/confirm.tsx +24 -9
- package/src/surfaces/modal/__stories__/modal.stories.tsx +70 -3
- package/src/surfaces/modal/modal.tsx +11 -2
- package/src/surfaces/window/window.stories.tsx +64 -8
- package/src/surfaces/window/window.tsx +6 -9
- package/src/themes/stories/button_showcase.tsx +19 -51
- package/src/themes/stylesheets/reset.css +3 -3
- package/src/themes/themes/ergo/ergo_theme.css +30 -4
- package/dist/actions/button/select_group/select_group.d.ts.map +0 -1
- package/dist/actions/button/select_group/select_group.js.map +0 -1
- package/dist/actions/button/select_group/single_select_group.d.ts.map +0 -1
- package/dist/actions/button/select_group/single_select_group.js.map +0 -1
- /package/dist/{actions/button → inputs}/select_group/single_select_group.d.ts +0 -0
- /package/dist/{actions/button → inputs}/select_group/single_select_group.js +0 -0
- /package/src/{actions/button → inputs}/select_group/select_group.module.css +0 -0
- /package/src/{actions/button → inputs}/select_group/single_select_group.tsx +0 -0
package/dist/inputs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Checkbox as o } from "./checkbox/checkbox.js";
|
|
2
2
|
import { ColorInput as p } from "./color_input/color_input.js";
|
|
3
|
-
import { ColorPicker as
|
|
3
|
+
import { ColorPicker as x } from "./color_input/color_picker.js";
|
|
4
4
|
import { ComboBox as f } from "./combo_box/combo_box.js";
|
|
5
5
|
import { DatePicker as n } from "./date_picker/date_picker.js";
|
|
6
6
|
import { DatePickerDay as c } from "./date_picker/date_picker_day.js";
|
|
@@ -8,14 +8,14 @@ import { DatePickerBody as s } from "./date_picker/date_picker_body.js";
|
|
|
8
8
|
import { DatePickerDate as k } from "./date_picker/date_picker_date.js";
|
|
9
9
|
import { DatePickerInput as P } from "./date_picker/date_picker_input.js";
|
|
10
10
|
import { DatePickerHeader as D } from "./date_picker/date_picker_header.js";
|
|
11
|
-
import { DatePickerPresenter as
|
|
12
|
-
import { Input as
|
|
11
|
+
import { DatePickerPresenter as S } from "./date_picker/date_picker_presenter.js";
|
|
12
|
+
import { Input as b } from "./input/input.js";
|
|
13
13
|
import { AlphaCharacter as A } from "./mask_input/alpha_character.js";
|
|
14
14
|
import { AlphaNumericCharacter as B } from "./mask_input/alpha_numeric_character.js";
|
|
15
|
-
import { Character as
|
|
16
|
-
import { ConstantCharacter as
|
|
17
|
-
import { KeyCaptureInput as
|
|
18
|
-
import { LanguageCharacter as
|
|
15
|
+
import { Character as N } from "./mask_input/character.js";
|
|
16
|
+
import { ConstantCharacter as V } from "./mask_input/constant_character.js";
|
|
17
|
+
import { KeyCaptureInput as R } from "./mask_input/key_capture_input.js";
|
|
18
|
+
import { LanguageCharacter as w } from "./mask_input/language_character.js";
|
|
19
19
|
import { Mask as K } from "./mask_input/mask.js";
|
|
20
20
|
import { MaskInput as U } from "./mask_input/mask_input.js";
|
|
21
21
|
import { MaskPresenter as q } from "./mask_input/mask_presenter.js";
|
|
@@ -27,37 +27,39 @@ import { MultiselectInlineValues as _ } from "./multiselect/multiselect_inline_v
|
|
|
27
27
|
import { MultiselectValues as rr } from "./multiselect/multiselect_values.js";
|
|
28
28
|
import { makeAvailableOptions as or, makeValuesAsOptions as tr } from "./options/utils.js";
|
|
29
29
|
import { Option as mr } from "./options/option.js";
|
|
30
|
-
import { countriesPhoneInformation as
|
|
30
|
+
import { countriesPhoneInformation as ar, defaultCountries as fr } from "./phone_number_input/countries_phone_information.js";
|
|
31
31
|
import { PhoneNumberInput as nr } from "./phone_number_input/phone_number_input.js";
|
|
32
32
|
import { Radio as cr } from "./radio/radio.js";
|
|
33
33
|
import { Select as sr } from "./select/select.js";
|
|
34
34
|
import { Slider as kr } from "./slider/slider.js";
|
|
35
35
|
import { SuggestionItem as Pr } from "./suggestions/suggestion_item.js";
|
|
36
36
|
import { SuggestionList as Dr } from "./suggestions/suggestion_list.js";
|
|
37
|
-
import { Switch as
|
|
38
|
-
import { Textarea as
|
|
37
|
+
import { Switch as Sr } from "./switch/switch.js";
|
|
38
|
+
import { Textarea as br } from "./textarea/textarea.js";
|
|
39
39
|
import { UnitInput as Ar } from "./unit_input/unit_input.js";
|
|
40
40
|
import { InputGroup as Br } from "./input_group/input_group.js";
|
|
41
|
+
import { SelectGroup as Nr } from "./select_group/select_group.js";
|
|
42
|
+
import { SingleSelectGroup as Vr } from "./select_group/single_select_group.js";
|
|
41
43
|
export {
|
|
42
44
|
A as AlphaCharacter,
|
|
43
45
|
B as AlphaNumericCharacter,
|
|
44
|
-
|
|
46
|
+
N as Character,
|
|
45
47
|
o as Checkbox,
|
|
46
48
|
p as ColorInput,
|
|
47
|
-
|
|
49
|
+
x as ColorPicker,
|
|
48
50
|
f as ComboBox,
|
|
49
|
-
|
|
51
|
+
V as ConstantCharacter,
|
|
50
52
|
n as DatePicker,
|
|
51
53
|
s as DatePickerBody,
|
|
52
54
|
k as DatePickerDate,
|
|
53
55
|
c as DatePickerDay,
|
|
54
56
|
D as DatePickerHeader,
|
|
55
57
|
P as DatePickerInput,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
+
S as DatePickerPresenter,
|
|
59
|
+
b as Input,
|
|
58
60
|
Br as InputGroup,
|
|
59
|
-
|
|
60
|
-
|
|
61
|
+
R as KeyCaptureInput,
|
|
62
|
+
w as LanguageCharacter,
|
|
61
63
|
K as Mask,
|
|
62
64
|
U as MaskInput,
|
|
63
65
|
q as MaskPresenter,
|
|
@@ -71,13 +73,15 @@ export {
|
|
|
71
73
|
cr as Radio,
|
|
72
74
|
J as RegexCharacter,
|
|
73
75
|
sr as Select,
|
|
76
|
+
Nr as SelectGroup,
|
|
77
|
+
Vr as SingleSelectGroup,
|
|
74
78
|
kr as Slider,
|
|
75
79
|
Pr as SuggestionItem,
|
|
76
80
|
Dr as SuggestionList,
|
|
77
|
-
|
|
78
|
-
|
|
81
|
+
Sr as Switch,
|
|
82
|
+
br as Textarea,
|
|
79
83
|
Ar as UnitInput,
|
|
80
|
-
|
|
84
|
+
ar as countriesPhoneInformation,
|
|
81
85
|
fr as defaultCountries,
|
|
82
86
|
or as makeAvailableOptions,
|
|
83
87
|
tr as makeValuesAsOptions
|
package/dist/inputs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,24 +1,22 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as p, jsx as r, Fragment as c } from "react/jsx-runtime";
|
|
2
2
|
import { s as e } from "../../multiselect_values.module-BMJOyYHe.js";
|
|
3
3
|
import { CrossIcon as a } from "@tcn/icons/cross_icon.js";
|
|
4
4
|
import "../../actions/button/base_button/base_button.js";
|
|
5
5
|
import "../../actions/button/button_group/button_group.js";
|
|
6
6
|
import { SlimButton as h } from "../../actions/button/slim_button/slim_button.js";
|
|
7
7
|
import "../../actions/button/button/button.js";
|
|
8
|
-
import "../../actions/button/select_group/select_group.js";
|
|
9
|
-
import "../../actions/button/select_group/single_select_group.js";
|
|
10
8
|
import "../../actions/toggle/toggle.js";
|
|
11
9
|
import { Chip as u } from "../../tokens/chip/chip.js";
|
|
12
10
|
import "../../tokens/badge/badge.js";
|
|
13
11
|
import "../../tokens/bubble/bubble.js";
|
|
14
12
|
import m from "clsx";
|
|
15
13
|
import "../../stacks/h_stack.js";
|
|
16
|
-
function
|
|
14
|
+
function v({
|
|
17
15
|
values: o,
|
|
18
16
|
disabled: s,
|
|
19
|
-
onRemove:
|
|
17
|
+
onRemove: l
|
|
20
18
|
}) {
|
|
21
|
-
const t = o.map((i,
|
|
19
|
+
const t = o.map((i, n) => /* @__PURE__ */ p(
|
|
22
20
|
u,
|
|
23
21
|
{
|
|
24
22
|
hAlign: "start",
|
|
@@ -35,18 +33,18 @@ function A({
|
|
|
35
33
|
hierarchy: "tertiary",
|
|
36
34
|
className: m(e.remove, "tcn-multiselect-chip-remove"),
|
|
37
35
|
onClick: () => {
|
|
38
|
-
|
|
36
|
+
l(i);
|
|
39
37
|
},
|
|
40
38
|
children: /* @__PURE__ */ r(a, { size: "xs" })
|
|
41
39
|
}
|
|
42
40
|
)
|
|
43
41
|
]
|
|
44
42
|
},
|
|
45
|
-
|
|
43
|
+
n
|
|
46
44
|
));
|
|
47
45
|
return t.length === 0 ? null : /* @__PURE__ */ r(c, { children: t });
|
|
48
46
|
}
|
|
49
47
|
export {
|
|
50
|
-
|
|
48
|
+
v as MultiselectInlineValues
|
|
51
49
|
};
|
|
52
50
|
//# sourceMappingURL=multiselect_inline_values.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\nimport clsx from 'clsx';\n\nexport interface MultiselectInlineValuesProps {\n values: React.ReactElement<OptionProps>[];\n disabled: boolean;\n onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n values,\n disabled,\n onRemove,\n}: MultiselectInlineValuesProps) {\n const items = values.map((v, index) => {\n return (\n <Chip\n hAlign=\"start\"\n className={clsx(styles.chip, 'tcn-multiselect-chip')}\n key={index}\n paddingInlineStart=\"8px\"\n width=\"auto\"\n >\n <span>{v.props.label}</span>\n <SlimButton\n disabled={disabled}\n size=\"sm\"\n hierarchy=\"tertiary\"\n className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n onClick={() => {\n onRemove(v);\n }}\n >\n <CrossIcon size=\"xs\" />\n </SlimButton>\n </Chip>\n );\n });\n\n if (items.length === 0) {\n return null;\n }\n\n return <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\nimport clsx from 'clsx';\n\nexport interface MultiselectInlineValuesProps {\n values: React.ReactElement<OptionProps>[];\n disabled: boolean;\n onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n values,\n disabled,\n onRemove,\n}: MultiselectInlineValuesProps) {\n const items = values.map((v, index) => {\n return (\n <Chip\n hAlign=\"start\"\n className={clsx(styles.chip, 'tcn-multiselect-chip')}\n key={index}\n paddingInlineStart=\"8px\"\n width=\"auto\"\n >\n <span>{v.props.label}</span>\n <SlimButton\n disabled={disabled}\n size=\"sm\"\n hierarchy=\"tertiary\"\n className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n onClick={() => {\n onRemove(v);\n }}\n >\n <CrossIcon size=\"xs\" />\n </SlimButton>\n </Chip>\n );\n });\n\n if (items.length === 0) {\n return null;\n }\n\n return <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;;AAcO,SAASA,EAAwB;AAAA,EACtC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAiC;AAC/B,QAAMC,IAAQH,EAAO,IAAI,CAACI,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MACnB,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWO,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAfKP;AAAA,EAAA,CAkBV;AAED,SAAIF,EAAM,WAAW,IACZ,8BAGC,UAAAA,EAAA,CAAM;AAClB;"}
|
|
@@ -6,14 +6,12 @@ import "../../actions/button/base_button/base_button.js";
|
|
|
6
6
|
import "../../actions/button/button_group/button_group.js";
|
|
7
7
|
import { SlimButton as h } from "../../actions/button/slim_button/slim_button.js";
|
|
8
8
|
import "../../actions/button/button/button.js";
|
|
9
|
-
import "../../actions/button/select_group/select_group.js";
|
|
10
|
-
import "../../actions/button/select_group/single_select_group.js";
|
|
11
9
|
import "../../actions/toggle/toggle.js";
|
|
12
10
|
import { Chip as u } from "../../tokens/chip/chip.js";
|
|
13
11
|
import "../../tokens/badge/badge.js";
|
|
14
12
|
import "../../tokens/bubble/bubble.js";
|
|
15
13
|
import "../../stacks/h_stack.js";
|
|
16
|
-
function
|
|
14
|
+
function k({
|
|
17
15
|
values: s,
|
|
18
16
|
disabled: e,
|
|
19
17
|
className: l,
|
|
@@ -59,6 +57,6 @@ function B({
|
|
|
59
57
|
);
|
|
60
58
|
}
|
|
61
59
|
export {
|
|
62
|
-
|
|
60
|
+
k as MultiselectValues
|
|
63
61
|
};
|
|
64
62
|
//# sourceMappingURL=multiselect_values.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n values: React.ReactElement<OptionProps>[];\n disabled: boolean;\n onRemove: (value: React.ReactElement<OptionProps>) => void;\n className?: string;\n}\n\nexport function MultiselectValues({\n values,\n disabled,\n className,\n onRemove,\n}: MultiselectValueProps) {\n const items = values.map((v, index) => {\n return (\n <Chip\n hAlign=\"start\"\n color=\"rgb(57, 85, 120)\"\n className={clsx(styles.chip, 'tcn-multiselect-chip')}\n key={index}\n paddingInlineStart=\"8px\"\n >\n <span>{v.props.label}</span>\n <SlimButton\n disabled={disabled}\n size=\"sm\"\n hierarchy=\"tertiary\"\n className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n onClick={() => {\n onRemove(v);\n }}\n >\n <CrossIcon size=\"xs\" />\n </SlimButton>\n </Chip>\n );\n });\n\n if (items.length === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n styles['item-container'],\n className,\n 'tcn-multiselect-values-container'\n )}\n data-is-disabled={disabled}\n >\n {items}\n </div>\n );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n values: React.ReactElement<OptionProps>[];\n disabled: boolean;\n onRemove: (value: React.ReactElement<OptionProps>) => void;\n className?: string;\n}\n\nexport function MultiselectValues({\n values,\n disabled,\n className,\n onRemove,\n}: MultiselectValueProps) {\n const items = values.map((v, index) => {\n return (\n <Chip\n hAlign=\"start\"\n color=\"rgb(57, 85, 120)\"\n className={clsx(styles.chip, 'tcn-multiselect-chip')}\n key={index}\n paddingInlineStart=\"8px\"\n >\n <span>{v.props.label}</span>\n <SlimButton\n disabled={disabled}\n size=\"sm\"\n hierarchy=\"tertiary\"\n className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n onClick={() => {\n onRemove(v);\n }}\n >\n <CrossIcon size=\"xs\" />\n </SlimButton>\n </Chip>\n );\n });\n\n if (items.length === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n styles['item-container'],\n className,\n 'tcn-multiselect-values-container'\n )}\n data-is-disabled={disabled}\n >\n {items}\n </div>\n );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;;AAeO,SAASA,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAQJ,EAAO,IAAI,CAACK,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAX;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAdKP;AAAA,EAAA,CAiBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACTC,EAAO,gBAAgB;AAAA,QACvBR;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MAEjB,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -6,15 +6,13 @@ import "../../actions/button/base_button/base_button.js";
|
|
|
6
6
|
import "../../actions/button/button_group/button_group.js";
|
|
7
7
|
import "../../actions/button/slim_button/slim_button.js";
|
|
8
8
|
import { Button as L } from "../../actions/button/button/button.js";
|
|
9
|
-
import "../../actions/button/select_group/select_group.js";
|
|
10
|
-
import "../../actions/button/select_group/single_select_group.js";
|
|
11
9
|
import "../../actions/toggle/toggle.js";
|
|
12
10
|
import { SuggestionList as w } from "../suggestions/suggestion_list.js";
|
|
13
11
|
import { usePhoneContext as j } from "./phone_number_context.js";
|
|
14
12
|
import { getCountryFromValue as T } from "./phone_number_country_select_adapter.js";
|
|
15
13
|
import { Input as V } from "../input/input.js";
|
|
16
14
|
import { useForkRef as q } from "../../utils/hooks/use_fork_ref.js";
|
|
17
|
-
const
|
|
15
|
+
const to = F(function({ onChange: e, value: t = "", className: a, ...h }, g) {
|
|
18
16
|
t = t.toString();
|
|
19
17
|
const [s, r] = R(
|
|
20
18
|
null
|
|
@@ -95,6 +93,6 @@ const eo = F(function({ onChange: e, value: t = "", className: a, ...h }, g) {
|
|
|
95
93
|
] });
|
|
96
94
|
});
|
|
97
95
|
export {
|
|
98
|
-
|
|
96
|
+
to as PhoneNumberInputAdapter
|
|
99
97
|
};
|
|
100
98
|
//# sourceMappingURL=phone_number_input_adapter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"phone_number_input_adapter.js","sources":["../../../src/inputs/phone_number_input/phone_number_input_adapter.tsx"],"sourcesContent":["import { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport clsx from 'clsx';\nimport { forwardRef, useState, useCallback, useLayoutEffect, useRef } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { usePhoneContext } from './phone_number_context.js';\nimport { getCountryFromValue } from './phone_number_country_select_adapter.js';\nimport { Input } from '../input/input.js';\nimport { useForkRef } from '../../utils/hooks/use_fork_ref.js';\n\n/**\n * Bridges `@tcn/ui/inputs` Input (onChange: (value, event?) => void)\n * with react-phone-number-input's expectation (onChange: (event) => void).\n */\nexport const PhoneNumberInputAdapter = forwardRef<\n HTMLInputElement,\n React.InputHTMLAttributes<HTMLInputElement>\n>(function InputAdapter({ onChange, value = '', className, ...rest }, ref) {\n value = value.toString();\n const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(\n null\n );\n const isPhoneBookOpen = phoneBookElement != null;\n const internalInputRef = useRef<HTMLInputElement | null>(null);\n const forkedRef = useForkRef(ref, internalInputRef);\n\n const {\n phoneBook: phoneBookOptions,\n setValue,\n ariaPhoneBookButtonLabel,\n disabled,\n setFocusNumberInput,\n focusNumberInput,\n } = usePhoneContext();\n\n const showPhoneBook = phoneBookOptions.length > 0;\n\n function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n if (isPhoneBookOpen) {\n setPhoneBookElement(null);\n } else {\n setPhoneBookElement(e.currentTarget);\n }\n }\n\n function closePhoneBook() {\n setPhoneBookElement(null);\n }\n\n function handlePhoneBookOptionSelect(value: string) {\n closePhoneBook();\n setFocusNumberInput(true);\n setValue(value);\n }\n\n const handleChange = useCallback(\n (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n if (!onChange) return;\n const e =\n event ??\n ({\n target: { value },\n currentTarget: { value },\n } as React.ChangeEvent<HTMLInputElement>);\n onChange(e);\n },\n [onChange]\n );\n\n if (value.startsWith('+')) {\n const country = getCountryFromValue(value);\n const prefixLength = country?.prefix?.length || 0;\n value = value.substring(prefixLength);\n }\n\n useLayoutEffect(() => {\n const input = internalInputRef?.current;\n\n if (input == null || !focusNumberInput) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (input.value.length > 0) {\n input.select();\n } else {\n input.focus();\n }\n });\n }, [focusNumberInput]);\n\n return (\n <>\n <Input\n ref={forkedRef}\n value={value}\n {...(rest as any)}\n className={clsx(className, 'tcn-input-group-slot')}\n onChange={handleChange}\n />\n {showPhoneBook && (\n <Button\n disabled={disabled}\n className={clsx('tcn-input-group-slot', 'tcn-phone-number-phone-book')}\n aria-label={ariaPhoneBookButtonLabel}\n onClick={togglePhoneBook}\n size=\"md\"\n >\n <NotebookIcon size=\"md\" />\n </Button>\n )}\n <SuggestionList\n open={isPhoneBookOpen}\n anchorElement={phoneBookElement}\n horizontalAnchor=\"end\"\n horizontalOrigin=\"end\"\n verticalAnchor=\"top\"\n verticalOrigin=\"top\"\n width=\"300px\"\n onOptionSelect={handlePhoneBookOptionSelect}\n onClose={closePhoneBook}\n noSuggestionMessage=\"No phone numbers found\"\n >\n {phoneBookOptions}\n </SuggestionList>\n </>\n );\n});\n"],"names":["PhoneNumberInputAdapter","forwardRef","onChange","value","className","rest","ref","phoneBookElement","setPhoneBookElement","useState","isPhoneBookOpen","internalInputRef","useRef","forkedRef","useForkRef","phoneBookOptions","setValue","ariaPhoneBookButtonLabel","disabled","setFocusNumberInput","focusNumberInput","usePhoneContext","showPhoneBook","togglePhoneBook","e","closePhoneBook","handlePhoneBookOptionSelect","handleChange","useCallback","event","prefixLength","getCountryFromValue","useLayoutEffect","input","jsxs","Fragment","jsx","Input","clsx","Button","NotebookIcon","SuggestionList"],"mappings":"
|
|
1
|
+
{"version":3,"file":"phone_number_input_adapter.js","sources":["../../../src/inputs/phone_number_input/phone_number_input_adapter.tsx"],"sourcesContent":["import { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport clsx from 'clsx';\nimport { forwardRef, useState, useCallback, useLayoutEffect, useRef } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { usePhoneContext } from './phone_number_context.js';\nimport { getCountryFromValue } from './phone_number_country_select_adapter.js';\nimport { Input } from '../input/input.js';\nimport { useForkRef } from '../../utils/hooks/use_fork_ref.js';\n\n/**\n * Bridges `@tcn/ui/inputs` Input (onChange: (value, event?) => void)\n * with react-phone-number-input's expectation (onChange: (event) => void).\n */\nexport const PhoneNumberInputAdapter = forwardRef<\n HTMLInputElement,\n React.InputHTMLAttributes<HTMLInputElement>\n>(function InputAdapter({ onChange, value = '', className, ...rest }, ref) {\n value = value.toString();\n const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(\n null\n );\n const isPhoneBookOpen = phoneBookElement != null;\n const internalInputRef = useRef<HTMLInputElement | null>(null);\n const forkedRef = useForkRef(ref, internalInputRef);\n\n const {\n phoneBook: phoneBookOptions,\n setValue,\n ariaPhoneBookButtonLabel,\n disabled,\n setFocusNumberInput,\n focusNumberInput,\n } = usePhoneContext();\n\n const showPhoneBook = phoneBookOptions.length > 0;\n\n function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n if (isPhoneBookOpen) {\n setPhoneBookElement(null);\n } else {\n setPhoneBookElement(e.currentTarget);\n }\n }\n\n function closePhoneBook() {\n setPhoneBookElement(null);\n }\n\n function handlePhoneBookOptionSelect(value: string) {\n closePhoneBook();\n setFocusNumberInput(true);\n setValue(value);\n }\n\n const handleChange = useCallback(\n (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n if (!onChange) return;\n const e =\n event ??\n ({\n target: { value },\n currentTarget: { value },\n } as React.ChangeEvent<HTMLInputElement>);\n onChange(e);\n },\n [onChange]\n );\n\n if (value.startsWith('+')) {\n const country = getCountryFromValue(value);\n const prefixLength = country?.prefix?.length || 0;\n value = value.substring(prefixLength);\n }\n\n useLayoutEffect(() => {\n const input = internalInputRef?.current;\n\n if (input == null || !focusNumberInput) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (input.value.length > 0) {\n input.select();\n } else {\n input.focus();\n }\n });\n }, [focusNumberInput]);\n\n return (\n <>\n <Input\n ref={forkedRef}\n value={value}\n {...(rest as any)}\n className={clsx(className, 'tcn-input-group-slot')}\n onChange={handleChange}\n />\n {showPhoneBook && (\n <Button\n disabled={disabled}\n className={clsx('tcn-input-group-slot', 'tcn-phone-number-phone-book')}\n aria-label={ariaPhoneBookButtonLabel}\n onClick={togglePhoneBook}\n size=\"md\"\n >\n <NotebookIcon size=\"md\" />\n </Button>\n )}\n <SuggestionList\n open={isPhoneBookOpen}\n anchorElement={phoneBookElement}\n horizontalAnchor=\"end\"\n horizontalOrigin=\"end\"\n verticalAnchor=\"top\"\n verticalOrigin=\"top\"\n width=\"300px\"\n onOptionSelect={handlePhoneBookOptionSelect}\n onClose={closePhoneBook}\n noSuggestionMessage=\"No phone numbers found\"\n >\n {phoneBookOptions}\n </SuggestionList>\n </>\n );\n});\n"],"names":["PhoneNumberInputAdapter","forwardRef","onChange","value","className","rest","ref","phoneBookElement","setPhoneBookElement","useState","isPhoneBookOpen","internalInputRef","useRef","forkedRef","useForkRef","phoneBookOptions","setValue","ariaPhoneBookButtonLabel","disabled","setFocusNumberInput","focusNumberInput","usePhoneContext","showPhoneBook","togglePhoneBook","e","closePhoneBook","handlePhoneBookOptionSelect","handleChange","useCallback","event","prefixLength","getCountryFromValue","useLayoutEffect","input","jsxs","Fragment","jsx","Input","clsx","Button","NotebookIcon","SuggestionList"],"mappings":";;;;;;;;;;;;;;AAcO,MAAMA,KAA0BC,EAGrC,SAAsB,EAAE,UAAAC,GAAU,OAAAC,IAAQ,IAAI,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AACzE,EAAAH,IAAQA,EAAM,SAAA;AACd,QAAM,CAACI,GAAkBC,CAAmB,IAAIC;AAAA,IAC9C;AAAA,EAAA,GAEIC,IAAkBH,KAAoB,MACtCI,IAAmBC,EAAgC,IAAI,GACvDC,IAAYC,EAAWR,GAAKK,CAAgB,GAE5C;AAAA,IACJ,WAAWI;AAAA,IACX,UAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,UAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAgBP,EAAiB,SAAS;AAEhD,WAASQ,EAAgBC,GAAwC;AAC/D,IACEhB,EADEE,IACkB,OAEAc,EAAE,aAFE;AAAA,EAI5B;AAEA,WAASC,IAAiB;AACxB,IAAAjB,EAAoB,IAAI;AAAA,EAC1B;AAEA,WAASkB,EAA4BvB,GAAe;AAClD,IAAAsB,EAAA,GACAN,EAAoB,EAAI,GACxBH,EAASb,CAAK;AAAA,EAChB;AAEA,QAAMwB,IAAeC;AAAA,IACnB,CAACzB,GAAe0B,MAAgD;AAC9D,UAAI,CAAC3B,EAAU;AAOf,MAAAA,EALE2B,KACC;AAAA,QACC,QAAQ,EAAE,OAAA1B,EAAAA;AAAAA,QACV,eAAe,EAAE,OAAAA,EAAAA;AAAAA,MAAM,CAEjB;AAAA,IACZ;AAAA,IACA,CAACD,CAAQ;AAAA,EAAA;AAGX,MAAIC,EAAM,WAAW,GAAG,GAAG;AAEzB,UAAM2B,IADUC,EAAoB5B,CAAK,GACX,QAAQ,UAAU;AAChD,IAAAA,IAAQA,EAAM,UAAU2B,CAAY;AAAA,EACtC;AAEA,SAAAE,EAAgB,MAAM;AACpB,UAAMC,IAAQtB,GAAkB;AAEhC,IAAIsB,KAAS,QAAQ,CAACb,KAItB,sBAAsB,MAAM;AAC1B,MAAIa,EAAM,MAAM,SAAS,IACvBA,EAAM,OAAA,IAENA,EAAM,MAAA;AAAA,IAEV,CAAC;AAAA,EACH,GAAG,CAACb,CAAgB,CAAC,GAGnB,gBAAAc,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKxB;AAAA,QACL,OAAAV;AAAA,QACC,GAAIE;AAAA,QACL,WAAWiC,EAAKlC,GAAW,sBAAsB;AAAA,QACjD,UAAUuB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEXL,KACC,gBAAAc;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAArB;AAAA,QACA,WAAWoB,EAAK,wBAAwB,6BAA6B;AAAA,QACrE,cAAYrB;AAAA,QACZ,SAASM;AAAA,QACT,MAAK;AAAA,QAEL,UAAA,gBAAAa,EAACI,GAAA,EAAa,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAG5B,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,MAAM/B;AAAA,QACN,eAAeH;AAAA,QACf,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,gBAAe;AAAA,QACf,OAAM;AAAA,QACN,gBAAgBmB;AAAA,QAChB,SAASD;AAAA,QACT,qBAAoB;AAAA,QAEnB,UAAAV;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
|
|
@@ -6,15 +6,13 @@ import "../../actions/button/base_button/base_button.js";
|
|
|
6
6
|
import "../../actions/button/button_group/button_group.js";
|
|
7
7
|
import "../../actions/button/slim_button/slim_button.js";
|
|
8
8
|
import { Button as R } from "../../actions/button/button/button.js";
|
|
9
|
-
import "../../actions/button/select_group/select_group.js";
|
|
10
|
-
import "../../actions/button/select_group/single_select_group.js";
|
|
11
9
|
import "../../actions/toggle/toggle.js";
|
|
12
10
|
import { InputGroup as j } from "../input_group/input_group.js";
|
|
13
11
|
import w from "clsx";
|
|
14
12
|
import { usePhoneContext as y } from "./phone_number_context.js";
|
|
15
13
|
import { PhoneNumberCountrySelectAdapter as V } from "./phone_number_country_select_adapter.js";
|
|
16
14
|
import { SuggestionList as _ } from "../suggestions/suggestion_list.js";
|
|
17
|
-
function
|
|
15
|
+
function Z({
|
|
18
16
|
disabled: n,
|
|
19
17
|
countries: d,
|
|
20
18
|
name: k,
|
|
@@ -23,15 +21,15 @@ function eo({
|
|
|
23
21
|
placeholder: P
|
|
24
22
|
}) {
|
|
25
23
|
const i = g.useRef(null), [u, t] = g.useState(null), l = u != null, {
|
|
26
|
-
phoneBook:
|
|
24
|
+
phoneBook: s,
|
|
27
25
|
setValue: r,
|
|
28
26
|
setCountry: b,
|
|
29
27
|
ariaPhoneBookButtonLabel: I,
|
|
30
|
-
sipAddress:
|
|
31
|
-
setSipAddress:
|
|
32
|
-
focusNumberInput:
|
|
28
|
+
sipAddress: p,
|
|
29
|
+
setSipAddress: c,
|
|
30
|
+
focusNumberInput: m,
|
|
33
31
|
setFocusNumberInput: a
|
|
34
|
-
} = y(), C =
|
|
32
|
+
} = y(), C = s.length > 0;
|
|
35
33
|
function x(o) {
|
|
36
34
|
t(l ? null : o.currentTarget);
|
|
37
35
|
}
|
|
@@ -46,17 +44,17 @@ function eo({
|
|
|
46
44
|
label: o
|
|
47
45
|
})) || [];
|
|
48
46
|
function O(o) {
|
|
49
|
-
o !== "SIP" && (
|
|
47
|
+
o !== "SIP" && (c(p), a(!0), r(""), b(o || "US"));
|
|
50
48
|
}
|
|
51
49
|
function v(o) {
|
|
52
|
-
|
|
50
|
+
c(o), r(`sip:${o}`);
|
|
53
51
|
}
|
|
54
52
|
return E(() => {
|
|
55
53
|
const o = i.current;
|
|
56
|
-
o == null || !
|
|
54
|
+
o == null || !m || requestAnimationFrame(() => {
|
|
57
55
|
o.value.length > 0 ? o.select() : o.focus();
|
|
58
56
|
});
|
|
59
|
-
}, [
|
|
57
|
+
}, [m]), /* @__PURE__ */ f(z, { children: [
|
|
60
58
|
/* @__PURE__ */ f(j, { children: [
|
|
61
59
|
/* @__PURE__ */ e(
|
|
62
60
|
V,
|
|
@@ -71,7 +69,7 @@ function eo({
|
|
|
71
69
|
L,
|
|
72
70
|
{
|
|
73
71
|
ref: i,
|
|
74
|
-
value:
|
|
72
|
+
value: p,
|
|
75
73
|
disabled: n,
|
|
76
74
|
onChange: v,
|
|
77
75
|
name: k,
|
|
@@ -105,12 +103,12 @@ function eo({
|
|
|
105
103
|
horizontalOrigin: "end",
|
|
106
104
|
verticalAnchor: "top",
|
|
107
105
|
verticalOrigin: "top",
|
|
108
|
-
children:
|
|
106
|
+
children: s
|
|
109
107
|
}
|
|
110
108
|
)
|
|
111
109
|
] });
|
|
112
110
|
}
|
|
113
111
|
export {
|
|
114
|
-
|
|
112
|
+
Z as SipInput
|
|
115
113
|
};
|
|
116
114
|
//# sourceMappingURL=sip_input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sip_input.js","sources":["../../../src/inputs/phone_number_input/sip_input.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport { Input } from '../input/input.js';\nimport { Button } from '../../actions/index.js';\nimport { InputGroup } from '../input_group/input_group.js';\nimport clsx from 'clsx';\nimport { usePhoneContext } from './phone_number_context.js';\nimport type { CountryCode } from 'libphonenumber-js';\nimport {\n PhoneNumberCountrySelectAdapter,\n type CountryOption,\n} from './phone_number_country_select_adapter.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\n\nexport interface SipInputProps {\n onChange: (value: string) => void;\n countries?: CountryCode[];\n disabled?: boolean;\n name?: string;\n 'aria-label'?: string;\n autoFocus?: boolean;\n placeholder?: string;\n}\n\nexport function SipInput({\n disabled,\n countries,\n name,\n 'aria-label': ariaLabel,\n autoFocus,\n placeholder,\n}: SipInputProps) {\n const inputRef = React.useRef<HTMLInputElement>(null);\n const [phoneBookElement, setPhoneBookElement] =\n React.useState<HTMLButtonElement | null>(null);\n const isPhoneBookOpen = phoneBookElement != null;\n\n const {\n phoneBook: phoneBookOptions,\n setValue,\n setCountry,\n ariaPhoneBookButtonLabel,\n sipAddress,\n setSipAddress,\n focusNumberInput,\n setFocusNumberInput,\n } = usePhoneContext();\n\n const showPhoneBook = phoneBookOptions.length > 0;\n\n function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n if (isPhoneBookOpen) {\n setPhoneBookElement(null);\n } else {\n setPhoneBookElement(e.currentTarget);\n }\n }\n\n function closePhoneBook() {\n setPhoneBookElement(null);\n }\n\n function handlePhoneBookOptionSelect(value: string) {\n closePhoneBook();\n setFocusNumberInput(true);\n setValue(value);\n }\n\n const options: CountryOption[] =\n countries?.map(country => ({\n value: country,\n label: country,\n })) || [];\n\n function selectCountry(countryCode?: string) {\n if (countryCode !== 'SIP') {\n setSipAddress(sipAddress);\n setFocusNumberInput(true);\n setValue('');\n setCountry((countryCode as CountryCode) || 'US');\n }\n }\n\n function updateSipValue(value: string) {\n setSipAddress(value);\n setValue(`sip:${value}`);\n }\n\n useLayoutEffect(() => {\n const input = inputRef.current;\n\n if (input == null || !focusNumberInput) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (input.value.length > 0) {\n input.select();\n } else {\n input.focus();\n }\n });\n }, [focusNumberInput]);\n\n return (\n <>\n <InputGroup>\n <PhoneNumberCountrySelectAdapter\n value=\"SIP\"\n onChange={selectCountry}\n options={options}\n disabled={disabled}\n />\n <Input\n ref={inputRef}\n value={sipAddress}\n disabled={disabled}\n onChange={updateSipValue}\n name={name}\n aria-label={ariaLabel}\n autoFocus={autoFocus}\n placeholder={placeholder}\n />\n {showPhoneBook && (\n <Button\n disabled={disabled}\n className={clsx('tcn-input-group-slot', 'tcn-phone-number-phone-book')}\n aria-label={ariaPhoneBookButtonLabel}\n onClick={togglePhoneBook}\n size=\"md\"\n >\n <NotebookIcon size=\"md\" />\n </Button>\n )}\n </InputGroup>\n <SuggestionList\n open={isPhoneBookOpen}\n anchorElement={phoneBookElement}\n onOptionSelect={handlePhoneBookOptionSelect}\n onClose={closePhoneBook}\n width=\"300px\"\n noSuggestionMessage=\"No phone numbers found\"\n horizontalAnchor=\"end\"\n horizontalOrigin=\"end\"\n verticalAnchor=\"top\"\n verticalOrigin=\"top\"\n >\n {phoneBookOptions}\n </SuggestionList>\n </>\n );\n}\n"],"names":["SipInput","disabled","countries","name","ariaLabel","autoFocus","placeholder","inputRef","React","phoneBookElement","setPhoneBookElement","isPhoneBookOpen","phoneBookOptions","setValue","setCountry","ariaPhoneBookButtonLabel","sipAddress","setSipAddress","focusNumberInput","setFocusNumberInput","usePhoneContext","showPhoneBook","togglePhoneBook","e","closePhoneBook","handlePhoneBookOptionSelect","value","options","country","selectCountry","countryCode","updateSipValue","useLayoutEffect","input","jsxs","Fragment","InputGroup","jsx","PhoneNumberCountrySelectAdapter","Input","Button","clsx","NotebookIcon","SuggestionList"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sip_input.js","sources":["../../../src/inputs/phone_number_input/sip_input.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport { Input } from '../input/input.js';\nimport { Button } from '../../actions/index.js';\nimport { InputGroup } from '../input_group/input_group.js';\nimport clsx from 'clsx';\nimport { usePhoneContext } from './phone_number_context.js';\nimport type { CountryCode } from 'libphonenumber-js';\nimport {\n PhoneNumberCountrySelectAdapter,\n type CountryOption,\n} from './phone_number_country_select_adapter.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\n\nexport interface SipInputProps {\n onChange: (value: string) => void;\n countries?: CountryCode[];\n disabled?: boolean;\n name?: string;\n 'aria-label'?: string;\n autoFocus?: boolean;\n placeholder?: string;\n}\n\nexport function SipInput({\n disabled,\n countries,\n name,\n 'aria-label': ariaLabel,\n autoFocus,\n placeholder,\n}: SipInputProps) {\n const inputRef = React.useRef<HTMLInputElement>(null);\n const [phoneBookElement, setPhoneBookElement] =\n React.useState<HTMLButtonElement | null>(null);\n const isPhoneBookOpen = phoneBookElement != null;\n\n const {\n phoneBook: phoneBookOptions,\n setValue,\n setCountry,\n ariaPhoneBookButtonLabel,\n sipAddress,\n setSipAddress,\n focusNumberInput,\n setFocusNumberInput,\n } = usePhoneContext();\n\n const showPhoneBook = phoneBookOptions.length > 0;\n\n function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n if (isPhoneBookOpen) {\n setPhoneBookElement(null);\n } else {\n setPhoneBookElement(e.currentTarget);\n }\n }\n\n function closePhoneBook() {\n setPhoneBookElement(null);\n }\n\n function handlePhoneBookOptionSelect(value: string) {\n closePhoneBook();\n setFocusNumberInput(true);\n setValue(value);\n }\n\n const options: CountryOption[] =\n countries?.map(country => ({\n value: country,\n label: country,\n })) || [];\n\n function selectCountry(countryCode?: string) {\n if (countryCode !== 'SIP') {\n setSipAddress(sipAddress);\n setFocusNumberInput(true);\n setValue('');\n setCountry((countryCode as CountryCode) || 'US');\n }\n }\n\n function updateSipValue(value: string) {\n setSipAddress(value);\n setValue(`sip:${value}`);\n }\n\n useLayoutEffect(() => {\n const input = inputRef.current;\n\n if (input == null || !focusNumberInput) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (input.value.length > 0) {\n input.select();\n } else {\n input.focus();\n }\n });\n }, [focusNumberInput]);\n\n return (\n <>\n <InputGroup>\n <PhoneNumberCountrySelectAdapter\n value=\"SIP\"\n onChange={selectCountry}\n options={options}\n disabled={disabled}\n />\n <Input\n ref={inputRef}\n value={sipAddress}\n disabled={disabled}\n onChange={updateSipValue}\n name={name}\n aria-label={ariaLabel}\n autoFocus={autoFocus}\n placeholder={placeholder}\n />\n {showPhoneBook && (\n <Button\n disabled={disabled}\n className={clsx('tcn-input-group-slot', 'tcn-phone-number-phone-book')}\n aria-label={ariaPhoneBookButtonLabel}\n onClick={togglePhoneBook}\n size=\"md\"\n >\n <NotebookIcon size=\"md\" />\n </Button>\n )}\n </InputGroup>\n <SuggestionList\n open={isPhoneBookOpen}\n anchorElement={phoneBookElement}\n onOptionSelect={handlePhoneBookOptionSelect}\n onClose={closePhoneBook}\n width=\"300px\"\n noSuggestionMessage=\"No phone numbers found\"\n horizontalAnchor=\"end\"\n horizontalOrigin=\"end\"\n verticalAnchor=\"top\"\n verticalOrigin=\"top\"\n >\n {phoneBookOptions}\n </SuggestionList>\n </>\n );\n}\n"],"names":["SipInput","disabled","countries","name","ariaLabel","autoFocus","placeholder","inputRef","React","phoneBookElement","setPhoneBookElement","isPhoneBookOpen","phoneBookOptions","setValue","setCountry","ariaPhoneBookButtonLabel","sipAddress","setSipAddress","focusNumberInput","setFocusNumberInput","usePhoneContext","showPhoneBook","togglePhoneBook","e","closePhoneBook","handlePhoneBookOptionSelect","value","options","country","selectCountry","countryCode","updateSipValue","useLayoutEffect","input","jsxs","Fragment","InputGroup","jsx","PhoneNumberCountrySelectAdapter","Input","Button","clsx","NotebookIcon","SuggestionList"],"mappings":"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"}
|
|
@@ -13,14 +13,12 @@ import "../../actions/button/base_button/base_button.js";
|
|
|
13
13
|
import "../../actions/button/button_group/button_group.js";
|
|
14
14
|
import "../../actions/button/slim_button/slim_button.js";
|
|
15
15
|
import { Button as W } from "../../actions/button/button/button.js";
|
|
16
|
-
import "../../actions/button/select_group/select_group.js";
|
|
17
|
-
import "../../actions/button/select_group/single_select_group.js";
|
|
18
16
|
import "../../actions/toggle/toggle.js";
|
|
19
17
|
import '../../select.css';const X = "_select_aabe288", Y = "_selectedLabel_b92ff3e", O = { select: X, selectedLabel: Y };
|
|
20
18
|
function Z(a, t) {
|
|
21
19
|
return a.find((n) => n.props.value === t);
|
|
22
20
|
}
|
|
23
|
-
const
|
|
21
|
+
const de = F.forwardRef(function({
|
|
24
22
|
children: t = [],
|
|
25
23
|
onKeyDown: n,
|
|
26
24
|
onKeyUp: f,
|
|
@@ -106,6 +104,6 @@ const he = F.forwardRef(function({
|
|
|
106
104
|
] });
|
|
107
105
|
});
|
|
108
106
|
export {
|
|
109
|
-
|
|
107
|
+
de as Select
|
|
110
108
|
};
|
|
111
109
|
//# sourceMappingURL=select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n onChange?: (value: string) => void;\n value?: string | null;\n placeholder?: string;\n noOptionMatchedMessage?: React.ReactNode;\n trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n {\n children = [],\n onKeyDown,\n onKeyUp,\n value,\n placeholder = '-- Select --',\n noOptionMatchedMessage,\n trimCustomInput = false,\n className,\n onMouseDown,\n onMouseUp,\n onChange,\n ...props\n }: SelectProps,\n ref: React.Ref<HTMLButtonElement>\n) {\n const safeChildren = React.Children.toArray(\n children\n ) as React.ReactElement<OptionProps>[];\n const keyPressedDownRef = useRef('');\n const isAlreadyFocusedRef = useRef(false);\n const isClosingRef = useRef(false);\n const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n const forkedRef = useForkRef(ref, internalButtonRef);\n const selectedOption = findOptionFromValue(safeChildren, value || '');\n const selectedLabel =\n selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n function openSuggestions() {\n setIsSuggestionsOpen(true);\n }\n\n function closeSuggestions() {\n setIsSuggestionsOpen(false);\n }\n\n function handleClose() {\n const button = internalButtonRef.current;\n\n if (button != null) {\n requestAnimationFrame(() => {\n button.focus();\n });\n }\n\n closeSuggestions();\n }\n\n function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n const button = internalButtonRef.current;\n\n if (button != null) {\n requestAnimationFrame(() => {\n if (isSuggestion) {\n onChange && onChange(value);\n }\n button.focus();\n });\n }\n\n closeSuggestions();\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n const key = event.key;\n keyPressedDownRef.current = key;\n onKeyDown && onKeyDown(event);\n }\n\n function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n setAnchorElement(event.currentTarget);\n const isSameKey = (keyPressedDownRef.current = event.key);\n\n keyPressedDownRef.current = '';\n const key = event.key;\n\n if (isSameKey && (key === 'Enter' || key === ' ')) {\n if (isSuggestionsOpen) {\n closeSuggestions();\n } else {\n openSuggestions();\n }\n }\n\n onKeyUp && onKeyUp(event);\n }\n\n function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n setAnchorElement(event.currentTarget);\n isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n onMouseDown && onMouseDown(event);\n }\n\n function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n if (isClosingRef.current) {\n isClosingRef.current = false;\n closeSuggestions();\n }\n\n openSuggestions();\n onMouseUp && onMouseUp(event);\n }\n\n return (\n <>\n <Button\n ref={forkedRef}\n className={clsx(className, 'tcn-select', 'tcn-control', styles.select)}\n width=\"100%\"\n {...props}\n hAlign=\"start\"\n value={selectedLabel}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n onMouseDown={handlMouseDown}\n onMouseUp={handleMouseUp}\n >\n <span className={clsx(styles.selectedLabel, 'tcn-select-selected-label')}>\n {selectedLabel}\n </span>\n </Button>\n <SuggestionList\n open={isSuggestionsOpen}\n anchorElement={anchorElement}\n onClose={handleClose}\n value={''}\n scrollToValue={value || ''}\n trimCustomInput={trimCustomInput}\n onOptionSelect={handleSelection}\n noSuggestionMessage={noOptionMatchedMessage}\n >\n {children}\n </SuggestionList>\n </>\n );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","clsx","styles","SuggestionList"],"mappings":"
|
|
1
|
+
{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n onChange?: (value: string) => void;\n value?: string | null;\n placeholder?: string;\n noOptionMatchedMessage?: React.ReactNode;\n trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n {\n children = [],\n onKeyDown,\n onKeyUp,\n value,\n placeholder = '-- Select --',\n noOptionMatchedMessage,\n trimCustomInput = false,\n className,\n onMouseDown,\n onMouseUp,\n onChange,\n ...props\n }: SelectProps,\n ref: React.Ref<HTMLButtonElement>\n) {\n const safeChildren = React.Children.toArray(\n children\n ) as React.ReactElement<OptionProps>[];\n const keyPressedDownRef = useRef('');\n const isAlreadyFocusedRef = useRef(false);\n const isClosingRef = useRef(false);\n const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n const forkedRef = useForkRef(ref, internalButtonRef);\n const selectedOption = findOptionFromValue(safeChildren, value || '');\n const selectedLabel =\n selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n function openSuggestions() {\n setIsSuggestionsOpen(true);\n }\n\n function closeSuggestions() {\n setIsSuggestionsOpen(false);\n }\n\n function handleClose() {\n const button = internalButtonRef.current;\n\n if (button != null) {\n requestAnimationFrame(() => {\n button.focus();\n });\n }\n\n closeSuggestions();\n }\n\n function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n const button = internalButtonRef.current;\n\n if (button != null) {\n requestAnimationFrame(() => {\n if (isSuggestion) {\n onChange && onChange(value);\n }\n button.focus();\n });\n }\n\n closeSuggestions();\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n const key = event.key;\n keyPressedDownRef.current = key;\n onKeyDown && onKeyDown(event);\n }\n\n function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n setAnchorElement(event.currentTarget);\n const isSameKey = (keyPressedDownRef.current = event.key);\n\n keyPressedDownRef.current = '';\n const key = event.key;\n\n if (isSameKey && (key === 'Enter' || key === ' ')) {\n if (isSuggestionsOpen) {\n closeSuggestions();\n } else {\n openSuggestions();\n }\n }\n\n onKeyUp && onKeyUp(event);\n }\n\n function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n setAnchorElement(event.currentTarget);\n isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n onMouseDown && onMouseDown(event);\n }\n\n function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n if (isClosingRef.current) {\n isClosingRef.current = false;\n closeSuggestions();\n }\n\n openSuggestions();\n onMouseUp && onMouseUp(event);\n }\n\n return (\n <>\n <Button\n ref={forkedRef}\n className={clsx(className, 'tcn-select', 'tcn-control', styles.select)}\n width=\"100%\"\n {...props}\n hAlign=\"start\"\n value={selectedLabel}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n onMouseDown={handlMouseDown}\n onMouseUp={handleMouseUp}\n >\n <span className={clsx(styles.selectedLabel, 'tcn-select-selected-label')}>\n {selectedLabel}\n </span>\n </Button>\n <SuggestionList\n open={isSuggestionsOpen}\n anchorElement={anchorElement}\n onClose={handleClose}\n value={''}\n scrollToValue={value || ''}\n trimCustomInput={trimCustomInput}\n onOptionSelect={handleSelection}\n noSuggestionMessage={noOptionMatchedMessage}\n >\n {children}\n </SuggestionList>\n </>\n );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","clsx","styles","SuggestionList"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { WithDetailedHTMLProps } from '
|
|
1
|
+
import { WithDetailedHTMLProps } from '../../stacks/types/as.js';
|
|
2
2
|
import { default as React } from 'react';
|
|
3
3
|
export type SelectGroupChangeCallback = (values: string[]) => void;
|
|
4
4
|
export interface SelectGroupOwnProps {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select_group.d.ts","sourceRoot":"","sources":["../../../src/inputs/select_group/select_group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,yBAAyB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AACnE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,CAAC,mBAAmB,EAAE,KAAK,CAAC,EACjD,UAAU,CACX,GAAG;IACF,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,GACrC,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,WAAW,sGAsDtB,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import { HStack as _ } from "
|
|
2
|
+
import { HStack as _ } from "../../stacks/h_stack.js";
|
|
3
3
|
import { clsx as l } from "clsx";
|
|
4
4
|
import n from "react";
|
|
5
|
-
import { Button as v } from "
|
|
6
|
-
import '
|
|
5
|
+
import { Button as v } from "../../actions/button/button/button.js";
|
|
6
|
+
import '../../select_group.css';const x = "_select-group_9481949", y = "_select-group-option_d8658c7", G = "_select-group-divider_802bff5", a = { "select-group": x, "select-group-option": y, "select-group-divider": G }, C = n.forwardRef(function({ children: o, value: c, className: u, onChange: d, disabled: t = !1, ...f }, m) {
|
|
7
7
|
const g = Array.isArray(o) ? o : [o], h = (e, p) => {
|
|
8
8
|
if (t) return;
|
|
9
9
|
const r = [...c];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select_group.js","sources":["../../../src/inputs/select_group/select_group.tsx"],"sourcesContent":["import { HStack } from '../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport { Button } from '../../actions/button/button/button.js';\nimport styles from './select_group.module.css';\n\nexport type SelectGroupChangeCallback = (values: string[]) => void;\nexport interface SelectGroupOwnProps {\n value: string[];\n disabled?: boolean;\n}\n\nexport type SelectGroupProps = Omit<\n WithDetailedHTMLProps<SelectGroupOwnProps, 'div'>,\n 'onChange'\n> & {\n onChange?: SelectGroupChangeCallback;\n children:\n | React.ReactElement<HTMLOptionElement>\n | React.ReactElement<HTMLOptionElement>[];\n};\n\nexport const SelectGroup = React.forwardRef(function ButtonGroup(\n { children, value, className, onChange, disabled = false, ...props }: SelectGroupProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const options: React.ReactElement<any>[] = Array.isArray(children)\n ? children\n : [children];\n\n const handleChange = (option: string, isSelected: boolean) => {\n if (disabled) return;\n const next = [...value];\n if (isSelected) {\n const index = value.indexOf(option);\n index > -1 && next.splice(index, 1);\n } else {\n next.push(option);\n }\n onChange?.(next);\n };\n\n return (\n <HStack\n ref={ref}\n as=\"div\"\n inline\n width=\"auto\"\n height=\"auto\"\n data-is-disabled={disabled}\n className={clsx(styles['select-group'], 'tcn-select-group', className)}\n {...props}\n >\n {options.map((option, i) => {\n const isSelected = value.includes(option.props.value);\n const select = () => {\n handleChange(option.props.value, isSelected);\n };\n\n return (\n <React.Fragment key={i}>\n <Button\n disabled={disabled || option.props.disabled}\n data-is-disabled={disabled || option.props.disabled}\n className={clsx(styles['select-group-option'], 'tcn-select-group-option')}\n hierarchy={isSelected ? 'primary' : 'secondary'}\n onClick={select}\n value={option.props.value}\n >\n {option.props.children}\n </Button>\n </React.Fragment>\n );\n })}\n </HStack>\n );\n});\n"],"names":["SelectGroup","React","children","value","className","onChange","disabled","props","ref","options","handleChange","option","isSelected","next","index","jsx","HStack","clsx","styles","i","select","Button"],"mappings":";;;;;4LAuBaA,IAAcC,EAAM,WAAW,SAC1C,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,UAAAC,IAAW,IAAO,GAAGC,EAAA,GAC7DC,GACA;AACA,QAAMC,IAAqC,MAAM,QAAQP,CAAQ,IAC7DA,IACA,CAACA,CAAQ,GAEPQ,IAAe,CAACC,GAAgBC,MAAwB;AAC5D,QAAIN,EAAU;AACd,UAAMO,IAAO,CAAC,GAAGV,CAAK;AACtB,QAAIS,GAAY;AACd,YAAME,IAAQX,EAAM,QAAQQ,CAAM;AAClC,MAAAG,IAAQ,MAAMD,EAAK,OAAOC,GAAO,CAAC;AAAA,IACpC;AACE,MAAAD,EAAK,KAAKF,CAAM;AAElB,IAAAN,IAAWQ,CAAI;AAAA,EACjB;AAEA,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,oBAAkBF;AAAA,MAClB,WAAWW,EAAKC,EAAO,cAAc,GAAG,oBAAoBd,CAAS;AAAA,MACpE,GAAGG;AAAA,MAEH,UAAAE,EAAQ,IAAI,CAACE,GAAQQ,MAAM;AAC1B,cAAMP,IAAaT,EAAM,SAASQ,EAAO,MAAM,KAAK,GAC9CS,IAAS,MAAM;AACnB,UAAAV,EAAaC,EAAO,MAAM,OAAOC,CAAU;AAAA,QAC7C;AAEA,eACE,gBAAAG,EAACd,EAAM,UAAN,EACC,UAAA,gBAAAc;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,UAAUf,KAAYK,EAAO,MAAM;AAAA,YACnC,oBAAkBL,KAAYK,EAAO,MAAM;AAAA,YAC3C,WAAWM,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,YACxE,WAAWN,IAAa,YAAY;AAAA,YACpC,SAASQ;AAAA,YACT,OAAOT,EAAO,MAAM;AAAA,YAEnB,YAAO,MAAM;AAAA,UAAA;AAAA,QAAA,KATGQ,CAWrB;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"single_select_group.d.ts","sourceRoot":"","sources":["../../../src/inputs/select_group/single_select_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAElE,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,gBAAgB,EAChB,OAAO,GAAG,UAAU,GAAG,mBAAmB,CAC3C,GACC,yBAAyB,CAAC;AAE5B,eAAO,MAAM,iBAAiB,4GAgC5B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"single_select_group.js","sources":["../../../src/inputs/select_group/single_select_group.tsx"],"sourcesContent":["import React from 'react';\nimport { SelectGroup, SelectGroupProps } from './select_group.js';\n\nexport interface SingleSelectGroupOwnProps {\n value: string;\n disabled?: boolean;\n onChange?: (value: string) => void;\n}\n\nexport type SingleSelectGroupProps = Omit<\n SelectGroupProps,\n 'value' | 'onChange' | 'enableMultiselect'\n> &\n SingleSelectGroupOwnProps;\n\nexport const SingleSelectGroup = React.forwardRef(function SingleSelectGroup(\n {\n children,\n value,\n className,\n onChange,\n disabled = false,\n ...props\n }: SingleSelectGroupProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const handleChange = (values: string[]) => {\n if (values.length === 0) {\n return;\n }\n // For single select, we take the last selected value or empty string if none selected\n const singleValue = values.length > 0 ? values[values.length - 1] : '';\n onChange?.(singleValue);\n };\n\n return (\n <SelectGroup\n ref={ref}\n value={value != null ? [value] : []}\n onChange={handleChange}\n disabled={disabled}\n className={className}\n {...props}\n >\n {children}\n </SelectGroup>\n );\n});\n"],"names":["SingleSelectGroup","React","children","value","className","onChange","disabled","props","ref","handleChange","values","singleValue","jsx","SelectGroup"],"mappings":";;;AAeO,MAAMA,IAAoBC,EAAM,WAAW,SAChD;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAe,CAACC,MAAqB;AACzC,QAAIA,EAAO,WAAW;AACpB;AAGF,UAAMC,IAAcD,EAAO,SAAS,IAAIA,EAAOA,EAAO,SAAS,CAAC,IAAI;AACpE,IAAAL,IAAWM,CAAW;AAAA,EACxB;AAEA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,OAAOL,KAAS,OAAO,CAACA,CAAK,IAAI,CAAA;AAAA,MACjC,UAAUM;AAAA,MACV,UAAAH;AAAA,MACA,WAAAF;AAAA,MACC,GAAGG;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
|
|
@@ -22,12 +22,10 @@ import "../../actions/button/base_button/base_button.js";
|
|
|
22
22
|
import "../../actions/button/button_group/button_group.js";
|
|
23
23
|
import "../../actions/button/slim_button/slim_button.js";
|
|
24
24
|
import { Button as Re } from "../../actions/button/button/button.js";
|
|
25
|
-
import "../../actions/button/select_group/select_group.js";
|
|
26
|
-
import "../../actions/button/select_group/single_select_group.js";
|
|
27
25
|
import "../../actions/toggle/toggle.js";
|
|
28
26
|
import { Popper as ve } from "../../overlay/popper/legacy/popper.js";
|
|
29
27
|
import '../../suggestion_list.css';const _e = "_suggestion-list_711fb17", Ae = "_input_a0df060", B = { "suggestion-list": _e, input: Ae }, C = 50, De = 50;
|
|
30
|
-
function
|
|
28
|
+
function ot({
|
|
31
29
|
value: X = "",
|
|
32
30
|
initialSearchValue: K,
|
|
33
31
|
scrollToValue: w,
|
|
@@ -292,6 +290,6 @@ function rt({
|
|
|
292
290
|
);
|
|
293
291
|
}
|
|
294
292
|
export {
|
|
295
|
-
|
|
293
|
+
ot as SuggestionList
|
|
296
294
|
};
|
|
297
295
|
//# sourceMappingURL=suggestion_list.js.map
|