playbook_ui 13.32.0 → 13.33.0.pre.alpha.PBNTR405dropdownformfixesrails3311

Sign up to get free protection for your applications and to get access to all the features.
Files changed (92) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +4 -0
  3. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +1 -1
  4. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +12 -7
  5. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +10 -0
  6. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +31 -0
  7. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +10 -0
  8. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +31 -0
  9. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +4 -0
  10. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -1
  11. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +9 -5
  12. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +11 -0
  13. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +1 -1
  14. data/app/pb_kits/playbook/pb_dropdown/index.js +74 -17
  15. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +108 -5
  16. data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +53 -0
  17. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +11 -2
  18. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb +5 -1
  19. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx +1 -0
  20. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb +2 -0
  21. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx +2 -0
  22. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb +4 -1
  23. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx +3 -2
  24. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb +2 -0
  25. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx +2 -0
  26. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
  27. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +5 -1
  28. data/app/pb_kits/playbook/pb_icon/_icon.scss +210 -1
  29. data/app/pb_kits/playbook/pb_icon/_icon.tsx +100 -41
  30. data/app/pb_kits/playbook/pb_icon/icon.rb +33 -19
  31. data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +2 -2
  32. data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb +48 -0
  33. data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.md +3 -0
  34. data/app/pb_kits/playbook/pb_nav/docs/example.yml +1 -0
  35. data/app/pb_kits/playbook/pb_nav/index.js +43 -0
  36. data/app/pb_kits/playbook/pb_nav/nav.rb +9 -0
  37. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +1 -1
  38. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +1 -1
  39. data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +11 -2
  40. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.html.erb +1 -0
  41. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +1 -1
  42. data/app/pb_kits/playbook/pb_star_rating/index.js +50 -0
  43. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +25 -5
  44. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +6 -0
  45. data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
  46. data/app/pb_kits/playbook/pb_table/index.ts +4 -4
  47. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +1 -1
  48. data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +1 -1
  49. data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -1
  50. data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -1
  51. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -1
  52. data/app/pb_kits/playbook/pb_table/table.test.js +2 -0
  53. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
  54. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
  55. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +45 -27
  56. data/app/pb_kits/playbook/pb_textarea/index.tsx +3 -3
  57. data/app/pb_kits/playbook/pb_time/_time.tsx +3 -3
  58. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
  59. data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
  60. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
  61. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +10 -10
  62. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
  63. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +2 -2
  64. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +1 -2
  65. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +2 -0
  66. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -3
  67. data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx +4 -4
  68. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +11 -7
  69. data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx +8 -3
  70. data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx +6 -1
  71. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +18 -19
  72. data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx +6 -6
  73. data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx +6 -6
  74. data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx +3 -3
  75. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +2 -0
  76. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +22 -57
  77. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +2 -2
  78. data/app/pb_kits/playbook/pb_typeahead/index.ts +31 -31
  79. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  80. data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +6 -6
  81. data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +236 -235
  82. data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +1 -1
  83. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +68 -63
  84. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +2 -2
  85. data/app/pb_kits/playbook/playbook-rails.js +6 -0
  86. data/dist/menu.yml +1 -1
  87. data/dist/playbook-rails.js +7 -7
  88. data/lib/playbook/forms/builder/star_rating_field.rb +14 -0
  89. data/lib/playbook/forms/builder.rb +1 -0
  90. data/lib/playbook/version.rb +2 -2
  91. metadata +16 -6
  92. data/app/pb_kits/playbook/pb_icon/icon_aliases.json +0 -39
@@ -52,7 +52,7 @@ const TreemapChart = ({
52
52
  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
53
53
  type = "treemap",
54
54
  ...props
55
- }: TreemapChartProps) => {
55
+ }: TreemapChartProps): React.ReactElement => {
56
56
 
57
57
  const ariaProps = buildAriaProps(aria)
58
58
  const dataProps = buildDataProps(data)
@@ -98,7 +98,6 @@ const TreemapChart = ({
98
98
  const [options, setOptions] = useState({});
99
99
 
100
100
  useEffect(() => {
101
-
102
101
  setOptions(merge(staticOptions, customOptions));
103
102
  }, [chartData]);
104
103
 
@@ -1,3 +1,5 @@
1
+ /* eslint-disable no-console */
2
+
1
3
  import React from 'react';
2
4
  import { render, screen } from '../utilities/test-utils';
3
5
  import TreemapChart from './_treemap_chart';
@@ -42,8 +42,8 @@ type TypeaheadProps = {
42
42
  id?: string,
43
43
  label?: string,
44
44
  loadOptions?: string | Noop,
45
- getOptionLabel?: string | (() => any),
46
- getOptionValue?: string | (() => any),
45
+ getOptionLabel?: string | (() => string),
46
+ getOptionValue?: string | (() => string),
47
47
  name?: string,
48
48
  }
49
49
 
@@ -77,7 +77,7 @@ const Typeahead = ({
77
77
  id,
78
78
  loadOptions = noop,
79
79
  ...props
80
- }: TypeaheadProps) => {
80
+ }: TypeaheadProps): React.ReactElement => {
81
81
  const selectProps = {
82
82
  cacheOptions: true,
83
83
  components: {
@@ -1,16 +1,16 @@
1
1
  import React, { useEffect } from 'react'
2
2
  import { components } from 'react-select'
3
3
 
4
- const ClearContainer = (props: any) => {
4
+ const ClearContainer = (props: any): React.ReactElement => {
5
5
  const { selectProps, clearValue } = props
6
6
  useEffect(() => {
7
7
  document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
8
- }, [true])
8
+ }, [])
9
9
 
10
10
  return (
11
11
  <components.ClearIndicator
12
- className="clear_indicator"
13
- {...props}
12
+ className="clear_indicator"
13
+ {...props}
14
14
  />
15
15
  )
16
16
  }
@@ -5,20 +5,24 @@ import Flex from '../../pb_flex/_flex'
5
5
  import TextInput from '../../pb_text_input/_text_input'
6
6
 
7
7
  type Props = {
8
- selectProps: any,
8
+ selectProps: {
9
+ dark?: boolean,
10
+ label: string,
11
+ error?: string,
12
+ },
9
13
  }
10
14
 
11
- const TypeaheadControl = (props: Props) => (
15
+ const TypeaheadControl = (props: Props): React.ReactElement => (
12
16
  <div className="pb_typeahead_wrapper">
13
17
  <TextInput
14
- dark={props.selectProps.dark}
15
- error={props.selectProps.error}
16
- label={props.selectProps.label}
18
+ dark={props.selectProps.dark}
19
+ error={props.selectProps.error}
20
+ label={props.selectProps.label}
17
21
  >
18
22
  <Flex>
19
23
  <components.Control
20
- className="text_input"
21
- {...props}
24
+ className="text_input"
25
+ {...props}
22
26
  />
23
27
  </Flex>
24
28
  </TextInput>
@@ -1,10 +1,15 @@
1
1
  import React from 'react'
2
2
  import { components } from 'react-select'
3
3
 
4
- const IndicatorsContainer = (props: any) => (
4
+ type IndicatorsContainerProps = {
5
+ children: React.ReactNode,
6
+ }
7
+
8
+
9
+ const IndicatorsContainer = (props: IndicatorsContainerProps): React.ReactElement => (
5
10
  <components.IndicatorsContainer
6
- className="text_input_indicators"
7
- {...props}
11
+ className="text_input_indicators"
12
+ {...props}
8
13
  />
9
14
  )
10
15
 
@@ -1,7 +1,12 @@
1
1
  import React from 'react'
2
2
  import { components } from 'react-select'
3
3
 
4
- const MenuList = (props: any) => {
4
+ type MenuListProps = {
5
+ children: React.ReactNode,
6
+ footer: React.ReactNode,
7
+ }
8
+
9
+ const MenuList = (props: MenuListProps): React.ReactElement => {
5
10
  return (
6
11
  <components.MenuList {...props}>
7
12
  {props.children}
@@ -7,12 +7,11 @@ import { SelectValueType } from '../_typeahead'
7
7
 
8
8
  type Props = {
9
9
  data: SelectValueType,
10
- multiValueTemplate: any,
11
10
  removeProps: any,
12
11
  selectProps: any,
13
12
  }
14
13
 
15
- const MultiValue = (props: Props) => {
14
+ const MultiValue = (props: Props): React.ReactElement => {
16
15
  const { removeProps } = props
17
16
  const { imageUrl, label } = props.data
18
17
  const { multiKit } = props.selectProps
@@ -27,36 +26,36 @@ const MultiValue = (props: Props) => {
27
26
 
28
27
  return (
29
28
  <components.MultiValueContainer
30
- className="text_input_multivalue_container"
31
- {...props}
29
+ className="text_input_multivalue_container"
30
+ {...props}
32
31
  >
33
32
  {multiKit === 'badge' &&
34
33
  <Badge
35
- closeProps={removeProps}
36
- removeIcon
37
- text={label}
38
- variant="primary"
34
+ closeProps={removeProps}
35
+ removeIcon
36
+ text={label}
37
+ variant="primary"
39
38
  />
40
39
  }
41
40
 
42
41
  {multiKit !== 'badge' && imageUrl &&
43
42
  <FormPill
44
- avatarUrl={imageUrl}
45
- closeProps={removeProps}
46
- marginRight="xs"
47
- name={label}
48
- size={multiKit === 'smallPill' ? 'small' : ''}
49
- text=''
43
+ avatarUrl={imageUrl}
44
+ closeProps={removeProps}
45
+ marginRight="xs"
46
+ name={label}
47
+ size={multiKit === 'smallPill' ? 'small' : ''}
48
+ text=''
50
49
  />
51
50
  }
52
51
 
53
52
  {multiKit !== 'badge' && !imageUrl &&
54
53
  <FormPill
55
- closeProps={removeProps}
56
- marginRight="xs"
57
- name=''
58
- size={multiKit === 'smallPill' ? 'small' : ''}
59
- text={label}
54
+ closeProps={removeProps}
55
+ marginRight="xs"
56
+ name=''
57
+ size={multiKit === 'smallPill' ? 'small' : ''}
58
+ text={label}
60
59
  />
61
60
  }
62
61
  </components.MultiValueContainer>
@@ -3,7 +3,7 @@ import { components } from 'react-select'
3
3
 
4
4
  import User from '../../pb_user/_user'
5
5
 
6
- const Option = (props: any) => {
6
+ const Option = (props: any): React.ReactElement => {
7
7
  const {
8
8
  imageUrl,
9
9
  } = props.data
@@ -14,11 +14,11 @@ const Option = (props: any) => {
14
14
  <>
15
15
  {!valueComponent && imageUrl &&
16
16
  <User
17
- align="left"
18
- avatarUrl={imageUrl}
19
- dark={props.selectProps.dark}
20
- name={props.label}
21
- orientation="horizontal"
17
+ align="left"
18
+ avatarUrl={imageUrl}
19
+ dark={props.selectProps.dark}
20
+ name={props.label}
21
+ orientation="horizontal"
22
22
  />
23
23
  }
24
24
 
@@ -4,19 +4,19 @@ import { components } from 'react-select'
4
4
  import Flex from '../../pb_flex/_flex'
5
5
  import Icon from '../../pb_icon/_icon'
6
6
 
7
- const Placeholder = (props: any) => (
7
+ const Placeholder = (props: any): React.ReactElement => (
8
8
  <>
9
9
  <Flex
10
- align="center"
11
- className="placeholder"
10
+ align="center"
11
+ className="placeholder"
12
12
  >
13
13
  <components.IndicatorsContainer
14
- {...props}
14
+ {...props}
15
15
  />
16
16
  {props.selectProps.plusIcon &&
17
17
  <Icon
18
- className="typeahead-plus-icon"
19
- icon="plus"
18
+ className="typeahead-plus-icon"
19
+ icon="plus"
20
20
  />
21
21
  }
22
22
  </Flex>
@@ -1,10 +1,10 @@
1
1
  import React from 'react'
2
2
  import { components } from 'react-select'
3
3
 
4
- const ValueContainer = (props: any) => (
4
+ const ValueContainer = (props: any): React.ReactElement => (
5
5
  <components.ValueContainer
6
- className="text_input_value_container"
7
- {...props}
6
+ className="text_input_value_container"
7
+ {...props}
8
8
  />
9
9
  )
10
10
 
@@ -1,3 +1,5 @@
1
+ /* eslint-disable react/no-multi-comp */
2
+
1
3
  import React, { useState } from 'react'
2
4
 
3
5
  import {
@@ -1,63 +1,28 @@
1
- <%= pb_rails("typeahead", props: {
2
- label: "user",
3
- name: :foo,
4
- data: { typeahead_example: true },
5
- input_options: {
6
- classname: "my-typeahead-class",
7
- data: {
8
- typeahead_testing: "data field test"
9
- },
10
- id: "typeahead-input-id-test",
11
- },
12
- })%>
13
-
14
- <br><br><br>
15
-
16
- <%= pb_rails("card", props: { padding: "xl", data: { typeahead_example_selected_option: true } }) do %>
17
- <%= pb_rails("body") do %>
18
- Use the above input to search for users on Github, and see the results as you type.
19
- <% end %>
20
-
21
- <%= pb_rails("body") do %>
22
- When you make a selection, you will see it appear in the list below
23
- <% end %>
1
+ <%
2
+ options = [
3
+ { label: 'Orange', value: '#FFA500' },
4
+ { label: 'Red', value: '#FF0000' },
5
+ { label: 'Green', value: '#00FF00' },
6
+ { label: 'Blue', value: '#0000FF' },
7
+ ]
8
+ %>
24
9
 
25
- <div data-selected-option></div>
26
- <% end %>
27
-
28
- <template data-typeahead-example-result-option>
29
- <%= pb_rails("user", props: {
30
- name: tag(:slot, name: "name"),
31
- orientation: "horizontal",
32
- align: "left",
33
- avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
34
- avatar: true
35
- }) %>
36
- </template>
10
+ <%= pb_rails("typeahead", props: {
11
+ id: "typeahead-default",
12
+ placeholder: "All Colors",
13
+ options: options,
14
+ label: "Colors",
15
+ name: :foo,
16
+ is_multi: false
17
+ })
18
+ %>
37
19
 
38
20
  <%= javascript_tag defer: "defer" do %>
39
- document.addEventListener("pb-typeahead-kit-search", function(event) {
40
- if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
41
-
42
- fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
43
- .then(response => response.json())
44
- .then((result) => {
45
- const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
46
-
47
- event.detail.setResults((result.items || []).map((user) => {
48
- const wrapper = resultOptionTemplate.content.cloneNode(true)
49
- wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
50
- wrapper.querySelector('img').dataset.src = user.avatar_url
51
- return wrapper
52
- }))
53
- })
21
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
22
+ console.log('Single Option selected')
23
+ console.dir(event.detail)
54
24
  })
55
-
56
-
57
- document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
58
- if (!event.target.dataset.typeaheadExample) return;
59
-
60
- document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
61
- document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = event.detail.selected.innerHTML
25
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
26
+ console.log('All options cleared')
62
27
  })
63
28
  <% end %>
@@ -47,8 +47,6 @@ const promiseOptions = (inputValue) =>
47
47
 
48
48
  const TypeaheadWithPillsAsync = (props) => {
49
49
  const [users, setUsers] = useState([])
50
- const handleOnChange = (value) => setUsers(formatUsers(value))
51
- const formatValue = (users) => formatUsers(users)
52
50
  const formatUsers = (users) => {
53
51
  const results = () => (users.map((user) => {
54
52
  if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -59,6 +57,8 @@ const TypeaheadWithPillsAsync = (props) => {
59
57
  }))
60
58
  return results()
61
59
  }
60
+ const handleOnChange = (value) => setUsers(formatUsers(value))
61
+ const formatValue = (users) => formatUsers(users)
62
62
 
63
63
  return (
64
64
  <>
@@ -4,24 +4,24 @@ import { debounce } from 'lodash'
4
4
  export default class PbTypeahead extends PbEnhancedElement {
5
5
  _searchInput: HTMLInputElement
6
6
  _resultsElement: HTMLElement
7
- _debouncedSearch: Function
7
+ _debouncedSearch: () => void
8
8
  _resultsLoadingIndicator: HTMLElement
9
9
  _resultOptionTemplate: HTMLElement
10
10
  _resultsOptionCache: Map<string, Array<DocumentFragment>>
11
11
  _searchContext: string
12
12
 
13
- static get selector() {
13
+ static get selector(): string {
14
14
  return '[data-pb-typeahead-kit]'
15
15
  }
16
16
 
17
- connect() {
17
+ connect(): void {
18
18
  this.element.addEventListener('keydown', (event: KeyboardEvent) => this.handleKeydown(event))
19
- this.searchInput.addEventListener('focus', () => this.debouncedSearch())
20
- this.searchInput.addEventListener('input', () => this.debouncedSearch())
19
+ this.searchInput.addEventListener('focus', () => this.debouncedSearch)
20
+ this.searchInput.addEventListener('input', () => this.debouncedSearch)
21
21
  this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
22
22
  }
23
23
 
24
- handleKeydown(event: KeyboardEvent) {
24
+ handleKeydown(event: KeyboardEvent): void {
25
25
  if (event.key === 'ArrowUp') {
26
26
  event.preventDefault()
27
27
  this.focusPreviousOption()
@@ -31,7 +31,7 @@ export default class PbTypeahead extends PbEnhancedElement {
31
31
  }
32
32
  }
33
33
 
34
- search() {
34
+ search(): void {
35
35
  if (this.searchTerm.length < parseInt(this.searchTermMinimumLength)) return this.clearResults()
36
36
 
37
37
  this.toggleResultsLoadingIndicator(true)
@@ -49,7 +49,7 @@ export default class PbTypeahead extends PbEnhancedElement {
49
49
  this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
50
50
  }
51
51
 
52
- resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
52
+ resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>): void {
53
53
  const searchTermAndContext = this.cacheKeyFor(searchTerm, searchContext)
54
54
  if (this.resultsOptionCache.has(searchTermAndContext)) this.resultsOptionCache.delete(searchTermAndContext)
55
55
  if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys().next().value)
@@ -58,18 +58,18 @@ export default class PbTypeahead extends PbEnhancedElement {
58
58
  this.showResults()
59
59
  }
60
60
 
61
- resultsCacheClear() {
61
+ resultsCacheClear(): void {
62
62
  this.resultsOptionCache.clear()
63
63
  }
64
64
 
65
- get debouncedSearch() {
65
+ get debouncedSearch(): void {
66
66
  return this._debouncedSearch = (
67
67
  this._debouncedSearch ||
68
68
  debounce(this.search, parseInt(this.searchDebounceTimeout)).bind(this)
69
69
  )
70
70
  }
71
71
 
72
- showResults() {
72
+ showResults(): void {
73
73
  if (!this.resultsOptionCache.has(this.searchTermAndContext)) return
74
74
 
75
75
  this.toggleResultsLoadingIndicator(false)
@@ -82,7 +82,7 @@ export default class PbTypeahead extends PbEnhancedElement {
82
82
  }
83
83
  }
84
84
 
85
- optionSelected(event: MouseEvent) {
85
+ optionSelected(event: MouseEvent): void {
86
86
  const resultOption = (event.target as Element).closest('[data-result-option-item]')
87
87
  if (!resultOption) return
88
88
 
@@ -93,7 +93,7 @@ export default class PbTypeahead extends PbEnhancedElement {
93
93
  this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
94
94
  }
95
95
 
96
- clearResults() {
96
+ clearResults(): void {
97
97
  this.resultsElement.innerHTML = ''
98
98
  }
99
99
 
@@ -103,7 +103,7 @@ export default class PbTypeahead extends PbEnhancedElement {
103
103
  return resultOption
104
104
  }
105
105
 
106
- focusPreviousOption() {
106
+ focusPreviousOption(): void {
107
107
  const currentIndex = this.resultOptionItems.indexOf(this.currentSelectedResultOptionItem)
108
108
  const previousIndex = currentIndex - 1
109
109
  const previousOptionItem = (
@@ -113,7 +113,7 @@ export default class PbTypeahead extends PbEnhancedElement {
113
113
  (previousOptionItem as HTMLElement).focus()
114
114
  }
115
115
 
116
- focusNextOption() {
116
+ focusNextOption(): void {
117
117
  const currentIndex = this.resultOptionItems.indexOf(this.currentSelectedResultOptionItem)
118
118
  const nextIndex = currentIndex + 1
119
119
  const nextOptionItem = (
@@ -123,23 +123,23 @@ export default class PbTypeahead extends PbEnhancedElement {
123
123
  (nextOptionItem as HTMLElement).focus()
124
124
  }
125
125
 
126
- get resultOptionItems() {
126
+ get resultOptionItems(): HTMLElement[] {
127
127
  return Array.from(this.resultsElement.querySelectorAll('[data-result-option-item]'))
128
128
  }
129
129
 
130
- get currentSelectedResultOptionItem() {
130
+ get currentSelectedResultOptionItem(): HTMLElement | null {
131
131
  return document.activeElement.closest('[data-result-option-item]')
132
132
  }
133
133
 
134
- get searchInput() {
134
+ get searchInput(): HTMLInputElement | null {
135
135
  return this._searchInput = (this._searchInput || this.element.querySelector('input[type="search"]'))
136
136
  }
137
137
 
138
- get searchTerm() {
138
+ get searchTerm(): string {
139
139
  return this.searchInput.value
140
140
  }
141
141
 
142
- get searchContext() {
142
+ get searchContext(): string | null {
143
143
  if (this._searchContext) return this._searchContext
144
144
 
145
145
  const selector = (this.element as HTMLElement).dataset.searchContextValueSelector
@@ -151,35 +151,35 @@ export default class PbTypeahead extends PbEnhancedElement {
151
151
  return null
152
152
  }
153
153
 
154
- set searchContext(value) {
154
+ set searchContext(value: string) {
155
155
  this._searchContext = value
156
156
  }
157
157
 
158
- get searchTermAndContext() {
158
+ get searchTermAndContext(): string {
159
159
  return this.cacheKeyFor(this.searchTerm, this.searchContext)
160
160
  }
161
161
 
162
- cacheKeyFor(searchTerm: string, searchContext: string) {
162
+ cacheKeyFor(searchTerm: string, searchContext: string): string {
163
163
  return [searchTerm, JSON.stringify(searchContext)].join()
164
164
  }
165
165
 
166
- searchInputClear() {
166
+ searchInputClear(): void {
167
167
  this.searchInput.value = ''
168
168
  }
169
169
 
170
- get searchTermMinimumLength() {
170
+ get searchTermMinimumLength(): string | undefined {
171
171
  return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchTermMinimumLength
172
172
  }
173
173
 
174
- get searchDebounceTimeout() {
174
+ get searchDebounceTimeout(): string | undefined {
175
175
  return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchDebounceTimeout
176
176
  }
177
177
 
178
- get resultsElement() {
178
+ get resultsElement(): HTMLElement | null {
179
179
  return this._resultsElement = (this._resultsElement || this.element.querySelector('[data-pb-typeahead-kit-results]'))
180
180
  }
181
181
 
182
- get resultOptionTemplate() {
182
+ get resultOptionTemplate(): HTMLElement | null {
183
183
  return this._resultOptionTemplate = (
184
184
  this._resultOptionTemplate ||
185
185
  this.element.querySelector('template[data-pb-typeahead-kit-result-option]')
@@ -193,15 +193,15 @@ export default class PbTypeahead extends PbEnhancedElement {
193
193
  )
194
194
  }
195
195
 
196
- get resultsLoadingIndicator() {
196
+ get resultsLoadingIndicator(): HTMLElement | null {
197
197
  return this._resultsLoadingIndicator = (
198
198
  this._resultsLoadingIndicator ||
199
199
  this.element.querySelector('[data-pb-typeahead-kit-loading-indicator]')
200
200
  )
201
201
  }
202
202
 
203
- toggleResultsLoadingIndicator(visible: boolean) {
204
- var visibilityProperty = '0'
203
+ toggleResultsLoadingIndicator(visible: boolean): void {
204
+ let visibilityProperty = '0'
205
205
  if (visible) visibilityProperty = '1'
206
206
  this.resultsLoadingIndicator.style.opacity = visibilityProperty
207
207
  }
@@ -26,7 +26,7 @@ type UserProps = {
26
26
  title?: string,
27
27
  } & GlobalProps
28
28
 
29
- const User = (props: UserProps) => {
29
+ const User = (props: UserProps): React.ReactElement => {
30
30
  const {
31
31
  align = 'left',
32
32
  aria = {},
@@ -15,7 +15,7 @@ type UserBadgeProps = {
15
15
  size?: "sm" | "md" | "lg",
16
16
  }
17
17
 
18
- const UserBadge = (props: UserBadgeProps) => {
18
+ const UserBadge = (props: UserBadgeProps): React.ReactElement => {
19
19
  const {
20
20
  aria = {},
21
21
  badge = 'million-dollar',
@@ -38,11 +38,11 @@ const UserBadge = (props: UserBadgeProps) => {
38
38
 
39
39
  return (
40
40
  <div
41
- {...ariaProps}
42
- {...dataProps}
43
- {...htmlProps}
44
- className={classes}
45
- id={id}
41
+ {...ariaProps}
42
+ {...dataProps}
43
+ {...htmlProps}
44
+ className={classes}
45
+ id={id}
46
46
  >
47
47
  <div className="pb_user_badge_wrapper">
48
48
  {image}