playbook_ui 12.18.0.pre.alpha.PLAY785typeaheadts608 → 12.18.0.pre.alpha.play786multilevelselectimprovements627

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 78d2755a123ca0414a32cc2b2478f058f5b4fa57f431a34deded1a42618236a0
4
- data.tar.gz: 3845495b122b5c728092f04bddc3f56d967951dff2cc270c3477dd73f9dc6643
3
+ metadata.gz: 71565d1e911bd318cffad56ff64e34bab539bc740f5138b68d1f1896c1a6808e
4
+ data.tar.gz: '0278d976d8320ee5013b5cc1cb9ae03349ba1948317c315624291a4ef1c9c93a'
5
5
  SHA512:
6
- metadata.gz: 26a7ab5c67dc6b6fabfbe2ce30db19a419f25e305e4ccadd4ea73e29e4e0f46b544db0569d52e94897aee2e732231d050af975902057a2bdea6ac38c5376d798
7
- data.tar.gz: 4e0ddb8732d7c7d7dcf2126d95d8a3aaf032e17b9c3b397a48e46a39e838721194848de455afa8583cc09b1415fadf670178bb931c4e0bb82ee635c31fb89999
6
+ metadata.gz: 01c0a50b86ab971669772bfffb39f010929ca496ded033027592aac11de73efb74f40a13b24705a379bba1e81df2b0e4a863415ab1c51b281a1b313a967cd216
7
+ data.tar.gz: e0703c831017c9f2adb8b05f0eeb61a934142e52beca288c37fa3ee08d6268a6db7198e146e2efb743238a5a5245b7bd54b1a5e0f2c5c7518eb63a8fed94e114
@@ -36,10 +36,9 @@
36
36
  vertical-align: top;
37
37
  width: 0.6em;
38
38
  top: 10px;
39
- transform: rotate(135deg);
40
39
  font-size: 0.5em;
41
40
 
42
- transform: rotate(-45deg);
41
+ transform: rotate(45deg);
43
42
  top: 12px;
44
43
  }
45
44
 
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from "react";
2
2
  import classnames from "classnames";
3
3
  import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
4
4
  import { globalProps } from "../utilities/globalProps";
5
- import { findItemById, checkIt, unCheckIt } from "./helper_functions";
5
+ import { findItemById, checkIt, unCheckIt, getParentAndAncestorsIds } from "./helper_functions";
6
6
  import MultiSelectHelper from "./_multi_select_helper";
7
7
 
8
8
  type MultiLevelSelectProps = {
@@ -42,17 +42,31 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
42
42
  const updatedData = formattedData.map((item: any) => {
43
43
  if (item.id === currentNode._id) {
44
44
  if (currentNode.checked) {
45
- checkIt(item, selectedItems, setSelectedItems);
45
+ checkIt(item, selectedItems, setSelectedItems, false);
46
46
  } else {
47
- unCheckIt(item, selectedItems, setSelectedItems);
47
+ unCheckIt(item, selectedItems, setSelectedItems, false);
48
48
  }
49
49
  } else if (item.children) {
50
50
  const foundItem = findItemById(item.children, currentNode._id);
51
51
  if (foundItem) {
52
52
  if (currentNode.checked) {
53
- checkIt(foundItem, selectedItems, setSelectedItems);
53
+ checkIt(foundItem, selectedItems, setSelectedItems, false);
54
+ if (currentNode._parent) {
55
+ const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
56
+ parents.forEach((item:string) => {
57
+ const ancestor = findItemById(formattedData,item)
58
+ ancestor.expanded = true
59
+ });
60
+ }
54
61
  } else {
55
- unCheckIt(foundItem, selectedItems, setSelectedItems);
62
+ unCheckIt(foundItem, selectedItems, setSelectedItems, false);
63
+ if (currentNode._parent) {
64
+ const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
65
+ parents.forEach((item:string) => {
66
+ const ancestor = findItemById(formattedData,item)
67
+ ancestor.expanded = true
68
+ });
69
+ }
56
70
  }
57
71
  }
58
72
  }
@@ -92,17 +106,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
92
106
  treeData={formattedData}
93
107
  onChange={(
94
108
  // @ts-ignore
95
- selectedNodes: { [key: string]: any }[],
109
+ selectedNodes: { [key: string]: any }[],
96
110
  currentNode: { [key: string]: any }[]
97
111
  ) => {
98
112
  setCheckedData(currentNode);
99
113
  onSelect(currentNode);
114
+
100
115
  }}
101
116
  id={id}
102
117
  {...props}
103
118
  />
104
119
  );
105
- }, [formattedData]);
120
+ }, [formattedData])
106
121
 
107
122
  return (
108
123
  <div {...ariaProps} {...dataProps} className={classes} id={id}>
@@ -19,19 +19,20 @@ export const findItemById = (
19
19
  export const checkIt = (
20
20
  foundItem: { [key: string]: any },
21
21
  selectedItems: any[],
22
- setSelectedItems: Function
22
+ setSelectedItems: Function,
23
+ expand: boolean
23
24
  ) => {
24
25
  if (!foundItem) {
25
26
  return;
26
27
  }
27
28
 
28
29
  foundItem.checked = true;
29
- foundItem.expanded = true;
30
+ foundItem.expanded = expand;
30
31
  selectedItems.push(foundItem);
31
32
 
32
33
  if (foundItem.children) {
33
34
  foundItem.children.map((x: any) => {
34
- checkIt(x, selectedItems, setSelectedItems);
35
+ checkIt(x, selectedItems, setSelectedItems, expand);
35
36
  });
36
37
  }
37
38
 
@@ -41,20 +42,46 @@ export const checkIt = (
41
42
  export const unCheckIt = (
42
43
  foundItem: { [key: string]: any },
43
44
  selectedItems: any,
44
- setSelectedItems: any
45
+ setSelectedItems: any,
46
+ expand: boolean
45
47
  ) => {
46
48
  if (!foundItem) {
47
49
  return;
48
50
  }
49
51
 
50
52
  foundItem.checked = false;
53
+ foundItem.expanded = false;
51
54
  const newSelectedItems = selectedItems.filter(
52
55
  (item: any) => item.id !== foundItem.id
53
56
  );
54
57
  if (foundItem.children) {
55
58
  foundItem.children.map((x: any) => {
56
- unCheckIt(x, selectedItems, setSelectedItems);
59
+ unCheckIt(x, selectedItems, setSelectedItems, expand);
57
60
  });
58
61
  }
59
62
  setSelectedItems([...newSelectedItems]);
60
63
  };
64
+
65
+
66
+ export const getParentAndAncestorsIds = (itemId:string, items:{ [key: string]: string; }[], ancestors:string[] = []):any => {
67
+ for (let i = 0; i < items.length; i++) {
68
+ const item:any = items[i];
69
+ if (item.id === itemId) {
70
+ // item found in current level of items array
71
+ return [...ancestors, item.id];
72
+ }
73
+ if (item.children && item.children.length > 0) {
74
+ // recursively search through children
75
+ const foundAncestors = getParentAndAncestorsIds(
76
+ itemId,
77
+ item.children,
78
+ [...ancestors, item.id]
79
+ );
80
+ if (foundAncestors) {
81
+ return foundAncestors;
82
+ }
83
+ }
84
+ }
85
+ // item not found in this level of items array or its children
86
+ return null;
87
+ }
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
  import Select from 'react-select'
3
5
  import AsyncSelect from 'react-select/async'
@@ -17,7 +19,6 @@ import Placeholder from './components/Placeholder'
17
19
  import ValueContainer from './components/ValueContainer'
18
20
 
19
21
  import { noop, buildDataProps } from '../utilities/props'
20
- import { Noop } from '../types'
21
22
 
22
23
  /**
23
24
  * @typedef {object} Props
@@ -32,28 +33,16 @@ type TypeaheadProps = {
32
33
  components?: object,
33
34
  createable?: boolean,
34
35
  dark?: boolean,
35
- data?: { [key: string]: string },
36
+ data?: object,
36
37
  error?: string,
37
38
  id?: string,
38
39
  label?: string,
39
- loadOptions?: string | Noop,
40
+ loadOptions?: string,
40
41
  getOptionLabel?: string | (() => any),
41
42
  getOptionValue?: string | (() => any),
42
43
  name?: string,
43
44
  }
44
45
 
45
- export type SelectValueType = {
46
- label: string,
47
- value: string,
48
- imageUrl?: string,
49
- }
50
-
51
- type TagOnChangeValues = {
52
- action?: string,
53
- option?: SelectValueType,
54
- removedValue?: string,
55
- }
56
-
57
46
  /**
58
47
  * @constant {React.ReactComponent} Typeahead
59
48
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
@@ -78,6 +67,7 @@ const Typeahead = ({
78
67
  Control,
79
68
  ClearIndicator,
80
69
  IndicatorsContainer,
70
+ IndicatorSeparator: null,
81
71
  MenuList,
82
72
  MultiValue,
83
73
  Option,
@@ -95,8 +85,8 @@ const Typeahead = ({
95
85
  isSearchable: true,
96
86
  name,
97
87
  multiKit: '',
88
+ onCreateOption: null,
98
89
  plusIcon: false,
99
- onMultiValueClick: (_option: SelectValueType) => { },
100
90
  ...props,
101
91
  }
102
92
 
@@ -106,7 +96,7 @@ const Typeahead = ({
106
96
  : (async ? AsyncSelect : Select)
107
97
  )
108
98
 
109
- const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
99
+ const handleOnChange = (_data, { action, option, removedValue }) => {
110
100
  if (action === 'select-option') {
111
101
  if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
112
102
  const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -133,13 +123,13 @@ const Typeahead = ({
133
123
 
134
124
  return (
135
125
  <div {...dataProps}
136
- className={classnames(classes, inlineClass)}
126
+ className={classnames(classes, inlineClass)}
137
127
  >
138
128
  <Tag
139
- classNamePrefix="typeahead-kit-select"
140
- error={error}
141
- onChange={handleOnChange}
142
- {...selectProps}
129
+ classNamePrefix="typeahead-kit-select"
130
+ error={error}
131
+ onChange={handleOnChange}
132
+ {...selectProps}
143
133
  />
144
134
  </div>
145
135
  )
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React, { useEffect } from 'react'
2
4
  import { components } from 'react-select'
3
5
 
@@ -9,8 +11,8 @@ const ClearContainer = (props: any) => {
9
11
 
10
12
  return (
11
13
  <components.ClearIndicator
12
- className="clear_indicator"
13
- {...props}
14
+ className="clear_indicator"
15
+ {...props}
14
16
  />
15
17
  )
16
18
  }
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
  import { components } from 'react-select'
3
5
 
@@ -11,14 +13,14 @@ type Props = {
11
13
  const TypeaheadControl = (props: Props) => (
12
14
  <div className="pb_typeahead_wrapper">
13
15
  <TextInput
14
- dark={props.selectProps.dark}
15
- error={props.selectProps.error}
16
- label={props.selectProps.label}
16
+ dark={props.selectProps.dark}
17
+ error={props.selectProps.error}
18
+ label={props.selectProps.label}
17
19
  >
18
20
  <Flex>
19
21
  <components.Control
20
- className="text_input"
21
- {...props}
22
+ className="text_input"
23
+ {...props}
22
24
  />
23
25
  </Flex>
24
26
  </TextInput>
@@ -1,10 +1,12 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
  import { components } from 'react-select'
3
5
 
4
6
  const IndicatorsContainer = (props: any) => (
5
7
  <components.IndicatorsContainer
6
- className="text_input_indicators"
7
- {...props}
8
+ className="text_input_indicators"
9
+ {...props}
8
10
  />
9
11
  )
10
12
 
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
  import { components } from 'react-select'
3
5
 
@@ -0,0 +1,62 @@
1
+ /* @flow */
2
+
3
+ import React from 'react'
4
+ import { components } from 'react-select'
5
+
6
+ import Badge from '../../pb_badge/_badge'
7
+ import FormPill from '../../pb_form_pill/_form_pill'
8
+
9
+ type Props = {
10
+ data: object,
11
+ multiValueTemplate: any,
12
+ removeProps: any,
13
+ selectProps: any,
14
+ }
15
+
16
+ const MultiValue = (props: Props) => {
17
+ const { removeProps } = props
18
+ const { imageUrl, label } = props.data
19
+ const { multiKit } = props.selectProps
20
+
21
+ const formPillProps = {
22
+ marginRight: 'xs',
23
+ name: label,
24
+ }
25
+
26
+ if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
27
+
28
+ return (
29
+ <components.MultiValueContainer
30
+ className="text_input_multivalue_container"
31
+ {...props}
32
+ >
33
+ <If condition={multiKit === 'badge'}>
34
+ <Badge
35
+ closeProps={removeProps}
36
+ removeIcon
37
+ text={label}
38
+ variant="primary"
39
+ />
40
+ <Else />
41
+ <If condition={imageUrl}>
42
+ <FormPill
43
+ avatarUrl={imageUrl}
44
+ closeProps={removeProps}
45
+ marginRight="xs"
46
+ name={label}
47
+ size={multiKit === 'smallPill' ? 'small' : ''}
48
+ />
49
+ <Else />
50
+ <FormPill
51
+ closeProps={removeProps}
52
+ marginRight="xs"
53
+ size={multiKit === 'smallPill' ? 'small' : ''}
54
+ text={label}
55
+ />
56
+ </If>
57
+ </If>
58
+ </components.MultiValueContainer>
59
+ )
60
+ }
61
+
62
+ export default MultiValue
@@ -0,0 +1,39 @@
1
+ /* @flow */
2
+
3
+ import React from 'react'
4
+ import { components } from 'react-select'
5
+
6
+ import User from '../../pb_user/_user'
7
+
8
+ const Option = (props: any) => {
9
+ const {
10
+ imageUrl,
11
+ } = props.data
12
+ const { valueComponent } = props.selectProps
13
+
14
+ return (
15
+ <components.Option {...props}>
16
+ <div>
17
+ <Choose>
18
+ <When condition={!valueComponent && imageUrl}>
19
+ <User
20
+ align="left"
21
+ avatarUrl={imageUrl}
22
+ dark={props.selectProps.dark}
23
+ name={props.label}
24
+ orientation="horizontal"
25
+ />
26
+ </When>
27
+ <When condition={valueComponent}>
28
+ { valueComponent(props.data) }
29
+ </When>
30
+ <Otherwise>
31
+ {props.label}
32
+ </Otherwise>
33
+ </Choose>
34
+ </div>
35
+ </components.Option>
36
+ )
37
+ }
38
+
39
+ export default Option
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
  import { components } from 'react-select'
3
5
 
@@ -7,18 +9,18 @@ import Icon from '../../pb_icon/_icon'
7
9
  const Placeholder = (props: any) => (
8
10
  <>
9
11
  <Flex
10
- align="center"
11
- className="placeholder"
12
+ align="center"
13
+ className="placeholder"
12
14
  >
13
15
  <components.IndicatorsContainer
14
- {...props}
16
+ {...props}
15
17
  />
16
- {props.selectProps.plusIcon &&
18
+ <If condition={props.selectProps.plusIcon}>
17
19
  <Icon
18
- className="typeahead-plus-icon"
19
- icon="plus"
20
+ className="typeahead-plus-icon"
21
+ icon="plus"
20
22
  />
21
- }
23
+ </If>
22
24
  </Flex>
23
25
  </>
24
26
  )
@@ -1,10 +1,12 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
  import { components } from 'react-select'
3
5
 
4
- const ValueContainer = (props: any) => (
6
+ const ValueContainer = (props: Props) => (
5
7
  <components.ValueContainer
6
- className="text_input_value_container"
7
- {...props}
8
+ className="text_input_value_container"
9
+ {...props}
8
10
  />
9
11
  )
10
12
 
@@ -2,26 +2,18 @@ import PbEnhancedElement from '../pb_enhanced_element'
2
2
  import { debounce } from 'lodash'
3
3
 
4
4
  export default class PbTypeahead extends PbEnhancedElement {
5
- _searchInput: HTMLInputElement
6
- _resultsElement: HTMLElement
7
- _debouncedSearch: Function
8
- _resultsLoadingIndicator: HTMLElement
9
- _resultOptionTemplate: HTMLElement
10
- _resultsOptionCache: Map<string, Array<DocumentFragment>>
11
- _searchContext: string
12
-
13
5
  static get selector() {
14
6
  return '[data-pb-typeahead-kit]'
15
7
  }
16
8
 
17
9
  connect() {
18
- this.element.addEventListener('keydown', (event: KeyboardEvent) => this.handleKeydown(event))
10
+ this.element.addEventListener('keydown', (event) => this.handleKeydown(event))
19
11
  this.searchInput.addEventListener('focus', () => this.debouncedSearch())
20
12
  this.searchInput.addEventListener('input', () => this.debouncedSearch())
21
- this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
13
+ this.resultsElement.addEventListener('click', (event) => this.optionSelected(event))
22
14
  }
23
15
 
24
- handleKeydown(event: KeyboardEvent) {
16
+ handleKeydown(event) {
25
17
  if (event.key === 'ArrowUp') {
26
18
  event.preventDefault()
27
19
  this.focusPreviousOption()
@@ -32,7 +24,7 @@ export default class PbTypeahead extends PbEnhancedElement {
32
24
  }
33
25
 
34
26
  search() {
35
- if (this.searchTerm.length < parseInt(this.searchTermMinimumLength)) return this.clearResults()
27
+ if (this.searchTerm.length < this.searchTermMinimumLength) return this.clearResults()
36
28
 
37
29
  this.toggleResultsLoadingIndicator(true)
38
30
  this.showResults()
@@ -42,17 +34,17 @@ export default class PbTypeahead extends PbEnhancedElement {
42
34
  const search = {
43
35
  searchingFor: searchTerm,
44
36
  searchingContext: searchContext,
45
- setResults: (results: Array<DocumentFragment>) => {
37
+ setResults: (results) => {
46
38
  this.resultsCacheUpdate(searchTerm, searchContext, results)
47
39
  },
48
40
  }
49
41
  this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
50
42
  }
51
43
 
52
- resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
44
+ resultsCacheUpdate(searchTerm, searchContext, results) {
53
45
  const searchTermAndContext = this.cacheKeyFor(searchTerm, searchContext)
54
46
  if (this.resultsOptionCache.has(searchTermAndContext)) this.resultsOptionCache.delete(searchTermAndContext)
55
- if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys().next().value)
47
+ if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys[0])
56
48
 
57
49
  this.resultsOptionCache.set(searchTermAndContext, results)
58
50
  this.showResults()
@@ -65,7 +57,7 @@ export default class PbTypeahead extends PbEnhancedElement {
65
57
  get debouncedSearch() {
66
58
  return this._debouncedSearch = (
67
59
  this._debouncedSearch ||
68
- debounce(this.search, parseInt(this.searchDebounceTimeout)).bind(this)
60
+ debounce(this.search, this.searchDebounceTimeout).bind(this)
69
61
  )
70
62
  }
71
63
 
@@ -78,12 +70,12 @@ export default class PbTypeahead extends PbEnhancedElement {
78
70
  this.resultsElement.appendChild(this.newResultOption(result.cloneNode(true)))
79
71
  }
80
72
  for (const result of this.resultsElement.querySelectorAll('[data-result-option-item]')) {
81
- result.addEventListener('mousedown', (event: MouseEvent) => this.optionSelected(event))
73
+ result.addEventListener('mousedown', (event) => this.optionSelected(event))
82
74
  }
83
75
  }
84
76
 
85
- optionSelected(event: MouseEvent) {
86
- const resultOption = (event.target as Element).closest('[data-result-option-item]')
77
+ optionSelected(event) {
78
+ const resultOption = event.target.closest('[data-result-option-item]')
87
79
  if (!resultOption) return
88
80
 
89
81
  this.resultsCacheClear()
@@ -97,8 +89,8 @@ export default class PbTypeahead extends PbEnhancedElement {
97
89
  this.resultsElement.innerHTML = ''
98
90
  }
99
91
 
100
- newResultOption(content: DocumentFragment) {
101
- const resultOption = (this.resultOptionTemplate as HTMLTemplateElement).content.cloneNode(true) as Element
92
+ newResultOption(content) {
93
+ const resultOption = this.resultOptionTemplate.content.cloneNode(true)
102
94
  resultOption.querySelector('slot[name="content"]').replaceWith(content)
103
95
  return resultOption
104
96
  }
@@ -108,9 +100,9 @@ export default class PbTypeahead extends PbEnhancedElement {
108
100
  const previousIndex = currentIndex - 1
109
101
  const previousOptionItem = (
110
102
  this.resultOptionItems[previousIndex] ||
111
- this.resultOptionItems[this.resultOptionItems.length - 1]
112
- );
113
- (previousOptionItem as HTMLElement).focus()
103
+ this.resultOptionItems[this.resultOptionItems.length - 1]
104
+ )
105
+ previousOptionItem.focus()
114
106
  }
115
107
 
116
108
  focusNextOption() {
@@ -118,9 +110,9 @@ export default class PbTypeahead extends PbEnhancedElement {
118
110
  const nextIndex = currentIndex + 1
119
111
  const nextOptionItem = (
120
112
  this.resultOptionItems[nextIndex] ||
121
- this.resultOptionItems[0]
122
- );
123
- (nextOptionItem as HTMLElement).focus()
113
+ this.resultOptionItems[0]
114
+ )
115
+ nextOptionItem.focus()
124
116
  }
125
117
 
126
118
  get resultOptionItems() {
@@ -142,11 +134,11 @@ export default class PbTypeahead extends PbEnhancedElement {
142
134
  get searchContext() {
143
135
  if (this._searchContext) return this._searchContext
144
136
 
145
- const selector = (this.element as HTMLElement).dataset.searchContextValueSelector
146
- if (selector) return ((
137
+ const selector = this.element.dataset.searchContextValueSelector
138
+ if (selector) return (
147
139
  this.element.parentNode.querySelector(selector) ||
148
- this.element.closest(selector)
149
- ) as HTMLInputElement).value
140
+ this.element.closest(selector)
141
+ ).value
150
142
 
151
143
  return null
152
144
  }
@@ -159,7 +151,7 @@ export default class PbTypeahead extends PbEnhancedElement {
159
151
  return this.cacheKeyFor(this.searchTerm, this.searchContext)
160
152
  }
161
153
 
162
- cacheKeyFor(searchTerm: string, searchContext: string) {
154
+ cacheKeyFor(searchTerm, searchContext) {
163
155
  return [searchTerm, JSON.stringify(searchContext)].join()
164
156
  }
165
157
 
@@ -168,11 +160,11 @@ export default class PbTypeahead extends PbEnhancedElement {
168
160
  }
169
161
 
170
162
  get searchTermMinimumLength() {
171
- return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchTermMinimumLength
163
+ return this.element.dataset.pbTypeaheadKitSearchTermMinimumLength
172
164
  }
173
165
 
174
166
  get searchDebounceTimeout() {
175
- return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchDebounceTimeout
167
+ return this.element.dataset.pbTypeaheadKitSearchDebounceTimeout
176
168
  }
177
169
 
178
170
  get resultsElement() {
@@ -200,9 +192,9 @@ export default class PbTypeahead extends PbEnhancedElement {
200
192
  )
201
193
  }
202
194
 
203
- toggleResultsLoadingIndicator(visible: boolean) {
204
- var visibilityProperty = '0'
205
- if (visible) visibilityProperty = '1'
195
+ toggleResultsLoadingIndicator(visible) {
196
+ var visibilityProperty = 0
197
+ if (visible) visibilityProperty = 1
206
198
  this.resultsLoadingIndicator.style.opacity = visibilityProperty
207
199
  }
208
200
  }
@@ -18,7 +18,7 @@ type UserProps = {
18
18
  data?: {[key: string]: string},
19
19
  id?: string,
20
20
  name?: string,
21
- orientation?: "horizontal" | "vertical",
21
+ orientation?: "horiztonal" | "vertical",
22
22
  size?: "sm" | "md" | "lg",
23
23
  subtitle?: string | Array<Node> | Node,
24
24
  territory?: string,
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.18.0"
5
- VERSION = "12.18.0.pre.alpha.PLAY785typeaheadts608"
5
+ VERSION = "12.18.0.pre.alpha.play786multilevelselectimprovements627"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.18.0.pre.alpha.PLAY785typeaheadts608
4
+ version: 12.18.0.pre.alpha.play786multilevelselectimprovements627
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-05-04 00:00:00.000000000 Z
12
+ date: 2023-05-09 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -2248,17 +2248,17 @@ files:
2248
2248
  - app/pb_kits/playbook/pb_treemap_chart/docs/index.js
2249
2249
  - app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
2250
2250
  - app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
2251
+ - app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
2251
2252
  - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
2252
2253
  - app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx
2253
- - app/pb_kits/playbook/pb_typeahead/_typeahead.tsx
2254
- - app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx
2255
- - app/pb_kits/playbook/pb_typeahead/components/Control.tsx
2256
- - app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx
2257
- - app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx
2258
- - app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx
2259
- - app/pb_kits/playbook/pb_typeahead/components/Option.tsx
2260
- - app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx
2261
- - app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx
2254
+ - app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
2255
+ - app/pb_kits/playbook/pb_typeahead/components/Control.jsx
2256
+ - app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
2257
+ - app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
2258
+ - app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx
2259
+ - app/pb_kits/playbook/pb_typeahead/components/Option.jsx
2260
+ - app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx
2261
+ - app/pb_kits/playbook/pb_typeahead/components/ValueContainer.jsx
2262
2262
  - app/pb_kits/playbook/pb_typeahead/docs/_description.md
2263
2263
  - app/pb_kits/playbook/pb_typeahead/docs/_footer.md
2264
2264
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx
@@ -2289,10 +2289,9 @@ files:
2289
2289
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md
2290
2290
  - app/pb_kits/playbook/pb_typeahead/docs/example.yml
2291
2291
  - app/pb_kits/playbook/pb_typeahead/docs/index.js
2292
- - app/pb_kits/playbook/pb_typeahead/index.ts
2292
+ - app/pb_kits/playbook/pb_typeahead/index.js
2293
2293
  - app/pb_kits/playbook/pb_typeahead/typeahead.html.erb
2294
2294
  - app/pb_kits/playbook/pb_typeahead/typeahead.rb
2295
- - app/pb_kits/playbook/pb_typeahead/types.d.ts
2296
2295
  - app/pb_kits/playbook/pb_user/_user.scss
2297
2296
  - app/pb_kits/playbook/pb_user/_user.tsx
2298
2297
  - app/pb_kits/playbook/pb_user/docs/_description.md
@@ -1,66 +0,0 @@
1
- import React from 'react'
2
- import { components } from 'react-select'
3
-
4
- import Badge from '../../pb_badge/_badge'
5
- import FormPill from '../../pb_form_pill/_form_pill'
6
- import { SelectValueType } from '../_typeahead'
7
-
8
- type Props = {
9
- data: SelectValueType,
10
- multiValueTemplate: any,
11
- removeProps: any,
12
- selectProps: any,
13
- }
14
-
15
- const MultiValue = (props: Props) => {
16
- const { removeProps } = props
17
- const { imageUrl, label } = props.data
18
- const { multiKit } = props.selectProps
19
-
20
- const formPillProps = {
21
- marginRight: 'xs',
22
- name: label,
23
- avatarUrl: '',
24
- }
25
-
26
- if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
27
-
28
- return (
29
- <components.MultiValueContainer
30
- className="text_input_multivalue_container"
31
- {...props}
32
- >
33
- {multiKit === 'badge' &&
34
- <Badge
35
- closeProps={removeProps}
36
- removeIcon
37
- text={label}
38
- variant="primary"
39
- />
40
- }
41
-
42
- {multiKit !== 'badge' && imageUrl &&
43
- <FormPill
44
- avatarUrl={imageUrl}
45
- closeProps={removeProps}
46
- marginRight="xs"
47
- name={label}
48
- size={multiKit === 'smallPill' ? 'small' : ''}
49
- text=''
50
- />
51
- }
52
-
53
- {multiKit !== 'badge' && !imageUrl &&
54
- <FormPill
55
- closeProps={removeProps}
56
- marginRight="xs"
57
- name=''
58
- size={multiKit === 'smallPill' ? 'small' : ''}
59
- text={label}
60
- />
61
- }
62
- </components.MultiValueContainer>
63
- )
64
- }
65
-
66
- export default MultiValue
@@ -1,37 +0,0 @@
1
- import React from 'react'
2
- import { components } from 'react-select'
3
-
4
- import User from '../../pb_user/_user'
5
-
6
- const Option = (props: any) => {
7
- const {
8
- imageUrl,
9
- } = props.data
10
- const { valueComponent } = props.selectProps
11
-
12
- return (
13
- <components.Option {...props}>
14
- <>
15
- {!valueComponent && imageUrl &&
16
- <User
17
- align="left"
18
- avatarUrl={imageUrl}
19
- dark={props.selectProps.dark}
20
- name={props.label}
21
- orientation="horizontal"
22
- />
23
- }
24
-
25
- {valueComponent &&
26
- valueComponent(props.data)
27
- }
28
-
29
- {!valueComponent && !imageUrl &&
30
- props.label
31
- }
32
- </>
33
- </components.Option>
34
- )
35
- }
36
-
37
- export default Option
@@ -1,2 +0,0 @@
1
- declare module 'react-select'
2
- declare module 'react-select/*'