@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.
Files changed (122) hide show
  1. package/dist/actions/index.d.ts +0 -2
  2. package/dist/actions/index.d.ts.map +1 -1
  3. package/dist/actions/index.js +6 -10
  4. package/dist/actions/index.js.map +1 -1
  5. package/dist/group.css +1 -0
  6. package/dist/inputs/color_input/color_input.js +2 -4
  7. package/dist/inputs/color_input/color_input.js.map +1 -1
  8. package/dist/inputs/date_picker/date_picker_header.js +20 -22
  9. package/dist/inputs/date_picker/date_picker_header.js.map +1 -1
  10. package/dist/inputs/date_picker/date_picker_input.js +2 -4
  11. package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
  12. package/dist/inputs/date_picker/date_picker_time_selector.js +9 -11
  13. package/dist/inputs/date_picker/date_picker_time_selector.js.map +1 -1
  14. package/dist/inputs/date_picker/date_picker_year_input.js +5 -7
  15. package/dist/inputs/date_picker/date_picker_year_input.js.map +1 -1
  16. package/dist/inputs/date_picker/date_picker_year_selector.js +2 -4
  17. package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
  18. package/dist/inputs/index.d.ts +2 -0
  19. package/dist/inputs/index.d.ts.map +1 -1
  20. package/dist/inputs/index.js +24 -20
  21. package/dist/inputs/index.js.map +1 -1
  22. package/dist/inputs/multiselect/multiselect_inline_values.js +7 -9
  23. package/dist/inputs/multiselect/multiselect_inline_values.js.map +1 -1
  24. package/dist/inputs/multiselect/multiselect_values.js +2 -4
  25. package/dist/inputs/multiselect/multiselect_values.js.map +1 -1
  26. package/dist/inputs/phone_number_input/phone_number_input_adapter.js +2 -4
  27. package/dist/inputs/phone_number_input/phone_number_input_adapter.js.map +1 -1
  28. package/dist/inputs/phone_number_input/sip_input.js +13 -15
  29. package/dist/inputs/phone_number_input/sip_input.js.map +1 -1
  30. package/dist/inputs/select/select.js +2 -4
  31. package/dist/inputs/select/select.js.map +1 -1
  32. package/dist/{actions/button → inputs}/select_group/select_group.d.ts +1 -1
  33. package/dist/inputs/select_group/select_group.d.ts.map +1 -0
  34. package/dist/{actions/button → inputs}/select_group/select_group.js +3 -3
  35. package/dist/inputs/select_group/select_group.js.map +1 -0
  36. package/dist/inputs/select_group/single_select_group.d.ts.map +1 -0
  37. package/dist/inputs/select_group/single_select_group.js.map +1 -0
  38. package/dist/inputs/suggestions/suggestion_list.js +2 -4
  39. package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
  40. package/dist/layouts/group/group.d.ts +5 -0
  41. package/dist/layouts/group/group.d.ts.map +1 -0
  42. package/dist/layouts/group/group.js +26 -0
  43. package/dist/layouts/group/group.js.map +1 -0
  44. package/dist/layouts/index.d.ts +2 -0
  45. package/dist/layouts/index.d.ts.map +1 -1
  46. package/dist/layouts/index.js +36 -32
  47. package/dist/layouts/index.js.map +1 -1
  48. package/dist/overlay/frame/frame.d.ts.map +1 -1
  49. package/dist/overlay/frame/frame.js +57 -63
  50. package/dist/overlay/frame/frame.js.map +1 -1
  51. package/dist/select_group.css +1 -1
  52. package/dist/stacks/box/box.d.ts +5 -4
  53. package/dist/stacks/box/box.d.ts.map +1 -1
  54. package/dist/stacks/box/box.js.map +1 -1
  55. package/dist/stacks/box/detect_resize_bounds.d.ts +15 -0
  56. package/dist/stacks/box/detect_resize_bounds.d.ts.map +1 -0
  57. package/dist/stacks/box/detect_resize_bounds.js +49 -0
  58. package/dist/stacks/box/detect_resize_bounds.js.map +1 -0
  59. package/dist/stacks/box/resize_handlers.d.ts.map +1 -1
  60. package/dist/stacks/box/resize_handlers.js +51 -44
  61. package/dist/stacks/box/resize_handlers.js.map +1 -1
  62. package/dist/stacks/box/start_resize_handle.d.ts.map +1 -1
  63. package/dist/stacks/box/start_resize_handle.js +2 -1
  64. package/dist/stacks/box/start_resize_handle.js.map +1 -1
  65. package/dist/stacks/box/types.d.ts +17 -4
  66. package/dist/stacks/box/types.d.ts.map +1 -1
  67. package/dist/surfaces/alert/alert.d.ts +0 -2
  68. package/dist/surfaces/alert/alert.d.ts.map +1 -1
  69. package/dist/surfaces/alert/alert.js +5 -7
  70. package/dist/surfaces/alert/alert.js.map +1 -1
  71. package/dist/surfaces/confirm/confirm.d.ts +3 -3
  72. package/dist/surfaces/confirm/confirm.d.ts.map +1 -1
  73. package/dist/surfaces/confirm/confirm.js +46 -45
  74. package/dist/surfaces/confirm/confirm.js.map +1 -1
  75. package/dist/surfaces/modal/modal.d.ts.map +1 -1
  76. package/dist/surfaces/modal/modal.js +22 -13
  77. package/dist/surfaces/modal/modal.js.map +1 -1
  78. package/dist/surfaces/pop_confirm/pop_confirm.js +4 -2
  79. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  80. package/dist/surfaces/window/window.d.ts.map +1 -1
  81. package/dist/surfaces/window/window.js +21 -24
  82. package/dist/surfaces/window/window.js.map +1 -1
  83. package/dist/themes/stories/button_showcase.d.ts.map +1 -1
  84. package/dist/themes/stylesheets/reset.css +1 -1
  85. package/dist/themes/stylesheets/reset.js +3 -3
  86. package/dist/themes/stylesheets/reset.js.map +1 -1
  87. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  88. package/dist/themes/themes/ergo/ergo_theme.js +30 -4
  89. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  90. package/package.json +3 -2
  91. package/src/actions/index.ts +0 -8
  92. package/src/inputs/index.ts +9 -0
  93. package/src/{actions/button/__stories__ → inputs/select_group}/select_group.stories.tsx +5 -26
  94. package/src/{actions/button → inputs}/select_group/select_group.tsx +3 -3
  95. package/src/layouts/bar/bar.stories.tsx +61 -0
  96. package/src/layouts/group/group.module.css +8 -0
  97. package/src/layouts/group/group.tsx +23 -0
  98. package/src/layouts/index.ts +2 -0
  99. package/src/overlay/frame/frame.tsx +34 -51
  100. package/src/overlay/popper/__stories__/element_popper.stories.tsx +1 -1
  101. package/src/stacks/box/box.tsx +10 -16
  102. package/src/stacks/box/detect_resize_bounds.ts +84 -0
  103. package/src/stacks/box/resize_handlers.ts +27 -15
  104. package/src/stacks/box/start_resize_handle.tsx +6 -3
  105. package/src/stacks/box/types.ts +23 -25
  106. package/src/surfaces/alert/alert.tsx +0 -2
  107. package/src/surfaces/confirm/confirm.tsx +24 -9
  108. package/src/surfaces/modal/__stories__/modal.stories.tsx +70 -3
  109. package/src/surfaces/modal/modal.tsx +11 -2
  110. package/src/surfaces/window/window.stories.tsx +64 -8
  111. package/src/surfaces/window/window.tsx +6 -9
  112. package/src/themes/stories/button_showcase.tsx +19 -51
  113. package/src/themes/stylesheets/reset.css +3 -3
  114. package/src/themes/themes/ergo/ergo_theme.css +30 -4
  115. package/dist/actions/button/select_group/select_group.d.ts.map +0 -1
  116. package/dist/actions/button/select_group/select_group.js.map +0 -1
  117. package/dist/actions/button/select_group/single_select_group.d.ts.map +0 -1
  118. package/dist/actions/button/select_group/single_select_group.js.map +0 -1
  119. /package/dist/{actions/button → inputs}/select_group/single_select_group.d.ts +0 -0
  120. /package/dist/{actions/button → inputs}/select_group/single_select_group.js +0 -0
  121. /package/src/{actions/button → inputs}/select_group/select_group.module.css +0 -0
  122. /package/src/{actions/button → inputs}/select_group/single_select_group.tsx +0 -0
@@ -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 a } from "./color_input/color_picker.js";
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 M } from "./date_picker/date_picker_presenter.js";
12
- import { Input as d } from "./input/input.js";
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 O } from "./mask_input/character.js";
16
- import { ConstantCharacter as L } from "./mask_input/constant_character.js";
17
- import { KeyCaptureInput as v } from "./mask_input/key_capture_input.js";
18
- import { LanguageCharacter as G } from "./mask_input/language_character.js";
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 xr, defaultCountries as fr } from "./phone_number_input/countries_phone_information.js";
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 Mr } from "./switch/switch.js";
38
- import { Textarea as dr } from "./textarea/textarea.js";
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
- O as Character,
46
+ N as Character,
45
47
  o as Checkbox,
46
48
  p as ColorInput,
47
- a as ColorPicker,
49
+ x as ColorPicker,
48
50
  f as ComboBox,
49
- L as ConstantCharacter,
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
- M as DatePickerPresenter,
57
- d as Input,
58
+ S as DatePickerPresenter,
59
+ b as Input,
58
60
  Br as InputGroup,
59
- v as KeyCaptureInput,
60
- G as LanguageCharacter,
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
- Mr as Switch,
78
- dr as Textarea,
81
+ Sr as Switch,
82
+ br as Textarea,
79
83
  Ar as UnitInput,
80
- xr as countriesPhoneInformation,
84
+ ar as countriesPhoneInformation,
81
85
  fr as defaultCountries,
82
86
  or as makeAvailableOptions,
83
87
  tr as makeValuesAsOptions
@@ -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 n, jsx as r, Fragment as c } from "react/jsx-runtime";
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 A({
14
+ function v({
17
15
  values: o,
18
16
  disabled: s,
19
- onRemove: p
17
+ onRemove: l
20
18
  }) {
21
- const t = o.map((i, l) => /* @__PURE__ */ n(
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
- p(i);
36
+ l(i);
39
37
  },
40
38
  children: /* @__PURE__ */ r(a, { size: "xs" })
41
39
  }
42
40
  )
43
41
  ]
44
42
  },
45
- l
43
+ n
46
44
  ));
47
45
  return t.length === 0 ? null : /* @__PURE__ */ r(c, { children: t });
48
46
  }
49
47
  export {
50
- A as MultiselectInlineValues
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":";;;;;;;;;;;;;;;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;"}
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 B({
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
- B as MultiselectValues
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":";;;;;;;;;;;;;;;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;"}
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 eo = F(function({ onChange: e, value: t = "", className: a, ...h }, g) {
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
- eo as PhoneNumberInputAdapter
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":";;;;;;;;;;;;;;;;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;"}
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 eo({
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: p,
24
+ phoneBook: s,
27
25
  setValue: r,
28
26
  setCountry: b,
29
27
  ariaPhoneBookButtonLabel: I,
30
- sipAddress: s,
31
- setSipAddress: m,
32
- focusNumberInput: c,
28
+ sipAddress: p,
29
+ setSipAddress: c,
30
+ focusNumberInput: m,
33
31
  setFocusNumberInput: a
34
- } = y(), C = p.length > 0;
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" && (m(s), a(!0), r(""), b(o || "US"));
47
+ o !== "SIP" && (c(p), a(!0), r(""), b(o || "US"));
50
48
  }
51
49
  function v(o) {
52
- m(o), r(`sip:${o}`);
50
+ c(o), r(`sip:${o}`);
53
51
  }
54
52
  return E(() => {
55
53
  const o = i.current;
56
- o == null || !c || requestAnimationFrame(() => {
54
+ o == null || !m || requestAnimationFrame(() => {
57
55
  o.value.length > 0 ? o.select() : o.focus();
58
56
  });
59
- }, [c]), /* @__PURE__ */ f(z, { children: [
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: s,
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: p
106
+ children: s
109
107
  }
110
108
  )
111
109
  ] });
112
110
  }
113
111
  export {
114
- eo as SipInput
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":";;;;;;;;;;;;;;;;AAwBO,SAASA,GAAS;AAAA,EACvB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,WAAAC;AAAA,EACA,aAAAC;AACF,GAAkB;AAChB,QAAMC,IAAWC,EAAM,OAAyB,IAAI,GAC9C,CAACC,GAAkBC,CAAmB,IAC1CF,EAAM,SAAmC,IAAI,GACzCG,IAAkBF,KAAoB,MAEtC;AAAA,IACJ,WAAWG;AAAA,IACX,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,qBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAgBT,EAAiB,SAAS;AAEhD,WAASU,EAAgBC,GAAwC;AAC/D,IACEb,EADEC,IACkB,OAEAY,EAAE,aAFE;AAAA,EAI5B;AAEA,WAASC,IAAiB;AACxB,IAAAd,EAAoB,IAAI;AAAA,EAC1B;AAEA,WAASe,EAA4BC,GAAe;AAClD,IAAAF,EAAA,GACAL,EAAoB,EAAI,GACxBN,EAASa,CAAK;AAAA,EAChB;AAEA,QAAMC,IACJzB,GAAW,IAAI,CAAA0B,OAAY;AAAA,IACzB,OAAOA;AAAA,IACP,OAAOA;AAAA,EAAA,EACP,KAAK,CAAA;AAET,WAASC,EAAcC,GAAsB;AAC3C,IAAIA,MAAgB,UAClBb,EAAcD,CAAU,GACxBG,EAAoB,EAAI,GACxBN,EAAS,EAAE,GACXC,EAAYgB,KAA+B,IAAI;AAAA,EAEnD;AAEA,WAASC,EAAeL,GAAe;AACrC,IAAAT,EAAcS,CAAK,GACnBb,EAAS,OAAOa,CAAK,EAAE;AAAA,EACzB;AAEA,SAAAM,EAAgB,MAAM;AACpB,UAAMC,IAAQ1B,EAAS;AAEvB,IAAI0B,KAAS,QAAQ,CAACf,KAItB,sBAAsB,MAAM;AAC1B,MAAIe,EAAM,MAAM,SAAS,IACvBA,EAAM,OAAA,IAENA,EAAM,MAAA;AAAA,IAEV,CAAC;AAAA,EACH,GAAG,CAACf,CAAgB,CAAC,GAGnB,gBAAAgB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAUT;AAAA,UACV,SAAAF;AAAA,UACA,UAAA1B;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF,gBAAAoC;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKhC;AAAA,UACL,OAAOS;AAAA,UACP,UAAAf;AAAA,UACA,UAAU8B;AAAA,UACV,MAAA5B;AAAA,UACA,cAAYC;AAAA,UACZ,WAAAC;AAAA,UACA,aAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDe,KACC,gBAAAgB;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,UAAAvC;AAAA,UACA,WAAWwC,EAAK,wBAAwB,6BAA6B;AAAA,UACrE,cAAY1B;AAAA,UACZ,SAASO;AAAA,UACT,MAAK;AAAA,UAEL,UAAA,gBAAAe,EAACK,GAAA,EAAa,MAAK,KAAA,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B,GAEJ;AAAA,IACA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,MAAMhC;AAAA,QACN,eAAeF;AAAA,QACf,gBAAgBgB;AAAA,QAChB,SAASD;AAAA,QACT,OAAM;AAAA,QACN,qBAAoB;AAAA,QACpB,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,gBAAe;AAAA,QAEd,UAAAZ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
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 he = F.forwardRef(function({
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
- he as Select
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":"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"}
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 '../../../stacks/types/as.js';
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 "../../../stacks/h_stack.js";
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 "../button/button.js";
6
- import '../../../select_group.css';const x = "_select-group_c24986f", y = "_select-group-option_28f4dfd", b = "_select-group-divider_b5b865b", a = { "select-group": x, "select-group-option": y, "select-group-divider": b }, C = n.forwardRef(function({ children: o, value: c, className: u, onChange: d, disabled: t = !1, ...f }, m) {
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 rt({
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
- rt as SuggestionList
293
+ ot as SuggestionList
296
294
  };
297
295
  //# sourceMappingURL=suggestion_list.js.map