playbook_ui 12.18.0.pre.alpha.PLAY785typeaheadts632 → 12.18.0.pre.alpha.play786multilevelselectimprovements613

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ebfd5fbf4ef024e0e8d72e0571709edfb8738488a45893fe4cb0ae7ffb43910a
-  data.tar.gz: 8dcb7aea81f460389a352c31d6d78ba8ef9525b6220c83979e0865aa2a4a6f38
+  metadata.gz: aec7f79fe2db81a272cf0057d094de657cf8e37d670cc5cf19317a7db77784a4
+  data.tar.gz: 3710f7209973f12d8659fe8cc7f1c02a4b96f79e21b88f977401fd32502b1728
 SHA512:
-  metadata.gz: 0b7e9a390686d87fff0212071df2a3a44a468266e28e3d8ab24f968a15775edd01132a74839b3af58e71add8eb6884a3c02999f6198110e75fbfbf5f2bbf7519
-  data.tar.gz: 228b4952c368979aacac5e591c5b2b1c91339a6bae8b1731fef3872a7f5f6833d9763d7743772b86f83ccd3f902154355f1a1f662fd41624af4a0989575ca45c
+  metadata.gz: 8d43d3936e4b6bc1f8a4d89685ea0c23d9c093c20d76d875e542e4d6845837d6e7876cf55e1c242c4603fa121854687c2b8d2e9f26f27d0ced474e4acfacf6fb
+  data.tar.gz: df3d944e460533d996e15d569f69212c400c901000656a220478e173bbf1ae71c02985c1733e6fa659bf4aecce25ccbc0a8dca084423463f31c76d3fa00635ce

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -36,10 +36,9 @@
       vertical-align: top;
       width: 0.6em;
       top: 10px;
-      transform: rotate(135deg);
       font-size: 0.5em;
 
-      transform: rotate(-45deg);
+      transform: rotate(45deg);
       top: 12px;
     }
 

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -42,17 +42,25 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const updatedData = formattedData.map((item: any) => {
       if (item.id === currentNode._id) {
         if (currentNode.checked) {
-          checkIt(item, selectedItems, setSelectedItems);
+          checkIt(item, selectedItems, setSelectedItems, false);
         } else {
-          unCheckIt(item, selectedItems, setSelectedItems);
+          unCheckIt(item, selectedItems, setSelectedItems, false);
         }
       } else if (item.children) {
         const foundItem = findItemById(item.children, currentNode._id);
         if (foundItem) {
           if (currentNode.checked) {
-            checkIt(foundItem, selectedItems, setSelectedItems);
+            checkIt(foundItem, selectedItems, setSelectedItems, false);
+            if (currentNode._parent) {
+              const parent = findItemById(formattedData, currentNode._parent);
+              parent.expanded = true;
+            }
           } else {
-            unCheckIt(foundItem, selectedItems, setSelectedItems);
+            unCheckIt(foundItem, selectedItems, setSelectedItems, false);
+            if (currentNode._parent) {
+              const parent = findItemById(formattedData, currentNode._parent);
+              parent.expanded = true;
+            }
           }
         }
       }
@@ -92,17 +100,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         treeData={formattedData}
         onChange={(
           // @ts-ignore
-          selectedNodes: { [key: string]: any }[], 
+          selectedNodes: { [key: string]: any }[],
           currentNode: { [key: string]: any }[]
         ) => {
           setCheckedData(currentNode);
           onSelect(currentNode);
+
         }}
         id={id}
         {...props}
       />
     );
-  }, [formattedData]);
+  }, [formattedData])
 
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>

data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts

@@ -19,19 +19,20 @@ export const findItemById = (
 export const checkIt = (
   foundItem: { [key: string]: any },
   selectedItems: any[],
-  setSelectedItems: Function
+  setSelectedItems: Function,
+  expand: boolean
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = true;
-  foundItem.expanded = true;
+  foundItem.expanded = expand;
   selectedItems.push(foundItem);
 
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      checkIt(x, selectedItems, setSelectedItems);
+      checkIt(x, selectedItems, setSelectedItems, expand);
     });
   }
 
@@ -41,19 +42,21 @@ export const checkIt = (
 export const unCheckIt = (
   foundItem: { [key: string]: any },
   selectedItems: any,
-  setSelectedItems: any
+  setSelectedItems: any,
+  expand: boolean
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = false;
+  foundItem.expanded = false;
   const newSelectedItems = selectedItems.filter(
     (item: any) => item.id !== foundItem.id
   );
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      unCheckIt(x, selectedItems, setSelectedItems);
+      unCheckIt(x, selectedItems, setSelectedItems, expand);
     });
   }
   setSelectedItems([...newSelectedItems]);

data/app/pb_kits/playbook/pb_table/index.ts

@@ -11,12 +11,8 @@ export default class PbTable extends PbEnhancedElement {
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      let headers: string[] = [];
-      [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-        let colSpan = header.colSpan
-        for (let i = 0; i < colSpan; i++) {
-          headers.push(header.textContent.replace(/\r?\n|\r/, ''));
-        }
+      var headers = [].map.call(table.querySelectorAll('th'), (header: Element) => {
+        return header.textContent.replace(/\r?\n|\r/, '')
       });
 
       // for each row in tbody

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -6,7 +6,7 @@ import {
   offset, 
   Placement, 
   safePolygon, 
-  shift,
+  shift, 
   useFloating, 
   useHover, 
   useInteractions,
@@ -17,6 +17,9 @@ import { GlobalProps, globalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildDataProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
 
+
+
+
 type TooltipProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
@@ -26,8 +29,8 @@ type TooltipProps = {
   icon?: string,
   interaction?: boolean,
   placement?: Placement,
-  position?: "absolute" | "fixed";
   text: string,
+  zIndex?: Pick<GlobalProps, "ZIndex">,
 } & GlobalProps
 
 const Tooltip = (props: TooltipProps): React.ReactElement => {
@@ -40,7 +43,6 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     icon = null,
     interaction = false,
     placement: preferredPlacement = "top",
-    position = "absolute",
     text,
     zIndex,
     ...rest
@@ -48,26 +50,24 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
 
   const dataProps: { [key: string]: any } = buildDataProps(data)
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
-  
+
   const css = classnames(
     globalProps({...rest}),
     className,
   )
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
-
-
   const {
+
     context,
     floating,
-    middlewareData: { arrow: { x: arrowX, y: arrowY } = {},  },
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
     placement,
     reference,
     strategy,
     x,
     y,
   } = useFloating({
-    strategy: position,
     middleware: [
       arrow({
         element: arrowRef,
@@ -87,7 +87,6 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     placement: preferredPlacement
   })
 
-
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -143,7 +142,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
               className="arrow_bg"
               ref={arrowRef}
               style={{
-                position: "absolute",
+                position: strategy,
                 left: arrowX != null ? `${arrowX}px` : "",
                 top: arrowY != null ? `${arrowY}px` : "",
                 [staticSide]: "-5px",
@@ -155,4 +154,4 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
   )
 }
 
-export default Tooltip
+export default Tooltip

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -65,32 +65,3 @@ test("closes on mouseleave", async () => {
 
   cleanup();
 });
-
-test("has default position absolute", async () => {
-  render(<TooltipTest />);
-
-  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
-  await waitFor(() => {
-    expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "absolute"});
-    cleanup();
-  })
-
-  cleanup();
-});
-
-test("has position fixed", async () => {
-  render(
-    <Tooltip
-        data={{ testid: "fixed-position-test" }}
-        position="fixed"
-    />
-  );
-
-  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
-  await waitFor(() => {
-    expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "fixed"});
-    cleanup();
-  })
-
-  cleanup();
-});

data/app/pb_kits/playbook/pb_typeahead/{_typeahead.tsx → _typeahead.jsx}

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
@@ -17,7 +19,6 @@ import Placeholder from './components/Placeholder'
 import ValueContainer from './components/ValueContainer'
 
 import { noop, buildDataProps } from '../utilities/props'
-import { Noop } from '../types'
 
 /**
  * @typedef {object} Props
@@ -32,28 +33,16 @@ type TypeaheadProps = {
   components?: object,
   createable?: boolean,
   dark?: boolean,
-  data?: { [key: string]: string },
+  data?: object,
   error?: string,
   id?: string,
   label?: string,
-  loadOptions?: string | Noop,
+  loadOptions?: string,
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
 }
 
-export type SelectValueType = {
-  label: string,
-  value: string,
-  imageUrl?: string,
-}
-
-type TagOnChangeValues = {
-  action?: string,
-  option?: SelectValueType,
-  removedValue?: string,
-}
-
 /**
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
@@ -78,7 +67,7 @@ const Typeahead = ({
       Control,
       ClearIndicator,
       IndicatorsContainer,
-      IndicatorSeparator: null as null,
+      IndicatorSeparator: null,
       MenuList,
       MultiValue,
       Option,
@@ -96,9 +85,8 @@ const Typeahead = ({
     isSearchable: true,
     name,
     multiKit: '',
-    onCreateOption: null as null,
+    onCreateOption: null,
     plusIcon: false,
-    onMultiValueClick: (_option: SelectValueType) => { },
     ...props,
   }
 
@@ -108,7 +96,7 @@ const Typeahead = ({
       : (async ? AsyncSelect : Select)
   )
 
-  const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
+  const handleOnChange = (_data, { action, option, removedValue }) => {
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -135,13 +123,13 @@ const Typeahead = ({
 
   return (
     <div {...dataProps}
-      className={classnames(classes, inlineClass)}
+        className={classnames(classes, inlineClass)}
     >
       <Tag
-        classNamePrefix="typeahead-kit-select"
-        error={error}
-        onChange={handleOnChange}
-        {...selectProps}
+          classNamePrefix="typeahead-kit-select"
+          error={error}
+          onChange={handleOnChange}
+          {...selectProps}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_typeahead/components/{ClearIndicator.tsx → ClearIndicator.jsx}

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
@@ -9,8 +11,8 @@ const ClearContainer = (props: any) => {
 
   return (
     <components.ClearIndicator
-      className="clear_indicator"
-      {...props}
+        className="clear_indicator"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/{Control.tsx → Control.jsx}

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import { components } from 'react-select'
 
@@ -11,14 +13,14 @@ type Props = {
 const TypeaheadControl = (props: Props) => (
   <div className="pb_typeahead_wrapper">
     <TextInput
-      dark={props.selectProps.dark}
-      error={props.selectProps.error}
-      label={props.selectProps.label}
+        dark={props.selectProps.dark}
+        error={props.selectProps.error}
+        label={props.selectProps.label}
     >
       <Flex>
         <components.Control
-          className="text_input"
-          {...props}
+            className="text_input"
+            {...props}
         />
       </Flex>
     </TextInput>

data/app/pb_kits/playbook/pb_typeahead/components/{IndicatorsContainer.tsx → IndicatorsContainer.jsx}

@@ -1,10 +1,12 @@
+/* @flow */
+
 import React from 'react'
 import { components } from 'react-select'
 
 const IndicatorsContainer = (props: any) => (
   <components.IndicatorsContainer
-    className="text_input_indicators"
-    {...props}
+      className="text_input_indicators"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/components/{MenuList.tsx → MenuList.jsx}

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import { components } from 'react-select'
 

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -0,0 +1,62 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+import Badge from '../../pb_badge/_badge'
+import FormPill from '../../pb_form_pill/_form_pill'
+
+type Props = {
+  data: object,
+  multiValueTemplate: any,
+  removeProps: any,
+  selectProps: any,
+}
+
+const MultiValue = (props: Props) => {
+  const { removeProps } = props
+  const { imageUrl, label } = props.data
+  const { multiKit } = props.selectProps
+
+  const formPillProps = {
+    marginRight: 'xs',
+    name: label,
+  }
+
+  if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
+
+  return (
+    <components.MultiValueContainer
+        className="text_input_multivalue_container"
+        {...props}
+    >
+      <If condition={multiKit === 'badge'}>
+        <Badge
+            closeProps={removeProps}
+            removeIcon
+            text={label}
+            variant="primary"
+        />
+        <Else />
+        <If condition={imageUrl}>
+          <FormPill
+              avatarUrl={imageUrl}
+              closeProps={removeProps}
+              marginRight="xs"
+              name={label}
+              size={multiKit === 'smallPill' ? 'small' : ''}
+          />
+          <Else />
+          <FormPill
+              closeProps={removeProps}
+              marginRight="xs"
+              size={multiKit === 'smallPill' ? 'small' : ''}
+              text={label}
+          />
+        </If>
+      </If>
+    </components.MultiValueContainer>
+  )
+}
+
+export default MultiValue

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx

@@ -0,0 +1,39 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+import User from '../../pb_user/_user'
+
+const Option = (props: any) => {
+  const {
+    imageUrl,
+  } = props.data
+  const { valueComponent } = props.selectProps
+
+  return (
+    <components.Option {...props}>
+      <div>
+        <Choose>
+          <When condition={!valueComponent && imageUrl}>
+            <User
+                align="left"
+                avatarUrl={imageUrl}
+                dark={props.selectProps.dark}
+                name={props.label}
+                orientation="horizontal"
+            />
+          </When>
+          <When condition={valueComponent}>
+            { valueComponent(props.data) }
+          </When>
+          <Otherwise>
+            {props.label}
+          </Otherwise>
+        </Choose>
+      </div>
+    </components.Option>
+  )
+}
+
+export default Option

data/app/pb_kits/playbook/pb_typeahead/components/{Placeholder.tsx → Placeholder.jsx}

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import { components } from 'react-select'
 
@@ -7,18 +9,18 @@ import Icon from '../../pb_icon/_icon'
 const Placeholder = (props: any) => (
   <>
     <Flex
-      align="center"
-      className="placeholder"
+        align="center"
+        className="placeholder"
     >
       <components.IndicatorsContainer
-        {...props}
+          {...props}
       />
-      {props.selectProps.plusIcon &&
+      <If condition={props.selectProps.plusIcon}>
         <Icon
-          className="typeahead-plus-icon"
-          icon="plus"
+            className="typeahead-plus-icon"
+            icon="plus"
         />
-      }
+      </If>
     </Flex>
   </>
 )

data/app/pb_kits/playbook/pb_typeahead/components/{ValueContainer.tsx → ValueContainer.jsx}

@@ -1,10 +1,12 @@
+/* @flow */
+
 import React from 'react'
 import { components } from 'react-select'
 
-const ValueContainer = (props: any) => (
+const ValueContainer = (props: Props) => (
   <components.ValueContainer
-    className="text_input_value_container"
-    {...props}
+      className="text_input_value_container"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/{index.ts → index.js}

@@ -2,26 +2,18 @@ import PbEnhancedElement from '../pb_enhanced_element'
 import { debounce } from 'lodash'
 
 export default class PbTypeahead extends PbEnhancedElement {
-  _searchInput: HTMLInputElement
-  _resultsElement: HTMLElement
-  _debouncedSearch: Function
-  _resultsLoadingIndicator: HTMLElement
-  _resultOptionTemplate: HTMLElement
-  _resultsOptionCache: Map<string, Array<DocumentFragment>>
-  _searchContext: string
-
   static get selector() {
     return '[data-pb-typeahead-kit]'
   }
 
   connect() {
-    this.element.addEventListener('keydown', (event: KeyboardEvent) => this.handleKeydown(event))
+    this.element.addEventListener('keydown', (event) => this.handleKeydown(event))
     this.searchInput.addEventListener('focus', () => this.debouncedSearch())
     this.searchInput.addEventListener('input', () => this.debouncedSearch())
-    this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
+    this.resultsElement.addEventListener('click', (event) => this.optionSelected(event))
   }
 
-  handleKeydown(event: KeyboardEvent) {
+  handleKeydown(event) {
     if (event.key === 'ArrowUp') {
       event.preventDefault()
       this.focusPreviousOption()
@@ -32,7 +24,7 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   search() {
-    if (this.searchTerm.length < parseInt(this.searchTermMinimumLength)) return this.clearResults()
+    if (this.searchTerm.length < this.searchTermMinimumLength) return this.clearResults()
 
     this.toggleResultsLoadingIndicator(true)
     this.showResults()
@@ -42,17 +34,17 @@ export default class PbTypeahead extends PbEnhancedElement {
     const search = {
       searchingFor: searchTerm,
       searchingContext: searchContext,
-      setResults: (results: Array<DocumentFragment>) => {
+      setResults: (results) => {
         this.resultsCacheUpdate(searchTerm, searchContext, results)
       },
     }
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
   }
 
-  resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
+  resultsCacheUpdate(searchTerm, searchContext, results) {
     const searchTermAndContext = this.cacheKeyFor(searchTerm, searchContext)
     if (this.resultsOptionCache.has(searchTermAndContext)) this.resultsOptionCache.delete(searchTermAndContext)
-    if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys().next().value)
+    if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys[0])
 
     this.resultsOptionCache.set(searchTermAndContext, results)
     this.showResults()
@@ -65,7 +57,7 @@ export default class PbTypeahead extends PbEnhancedElement {
   get debouncedSearch() {
     return this._debouncedSearch = (
       this._debouncedSearch ||
-      debounce(this.search, parseInt(this.searchDebounceTimeout)).bind(this)
+        debounce(this.search, this.searchDebounceTimeout).bind(this)
     )
   }
 
@@ -78,12 +70,12 @@ export default class PbTypeahead extends PbEnhancedElement {
       this.resultsElement.appendChild(this.newResultOption(result.cloneNode(true)))
     }
     for (const result of this.resultsElement.querySelectorAll('[data-result-option-item]')) {
-      result.addEventListener('mousedown', (event: MouseEvent) => this.optionSelected(event))
+      result.addEventListener('mousedown', (event) => this.optionSelected(event))
     }
   }
 
-  optionSelected(event: MouseEvent) {
-    const resultOption = (event.target as Element).closest('[data-result-option-item]')
+  optionSelected(event) {
+    const resultOption = event.target.closest('[data-result-option-item]')
     if (!resultOption) return
 
     this.resultsCacheClear()
@@ -97,8 +89,8 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.resultsElement.innerHTML = ''
   }
 
-  newResultOption(content: DocumentFragment) {
-    const resultOption = (this.resultOptionTemplate as HTMLTemplateElement).content.cloneNode(true) as Element
+  newResultOption(content) {
+    const resultOption = this.resultOptionTemplate.content.cloneNode(true)
     resultOption.querySelector('slot[name="content"]').replaceWith(content)
     return resultOption
   }
@@ -108,9 +100,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     const previousIndex = currentIndex - 1
     const previousOptionItem = (
       this.resultOptionItems[previousIndex] ||
-      this.resultOptionItems[this.resultOptionItems.length - 1]
-    );
-    (previousOptionItem as HTMLElement).focus()
+        this.resultOptionItems[this.resultOptionItems.length - 1]
+    )
+    previousOptionItem.focus()
   }
 
   focusNextOption() {
@@ -118,9 +110,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     const nextIndex = currentIndex + 1
     const nextOptionItem = (
       this.resultOptionItems[nextIndex] ||
-      this.resultOptionItems[0]
-    );
-    (nextOptionItem as HTMLElement).focus()
+        this.resultOptionItems[0]
+    )
+    nextOptionItem.focus()
   }
 
   get resultOptionItems() {
@@ -142,11 +134,11 @@ export default class PbTypeahead extends PbEnhancedElement {
   get searchContext() {
     if (this._searchContext) return this._searchContext
 
-    const selector = (this.element as HTMLElement).dataset.searchContextValueSelector
-    if (selector) return ((
+    const selector = this.element.dataset.searchContextValueSelector
+    if (selector) return (
       this.element.parentNode.querySelector(selector) ||
-      this.element.closest(selector)
-    ) as HTMLInputElement).value
+        this.element.closest(selector)
+    ).value
 
     return null
   }
@@ -159,7 +151,7 @@ export default class PbTypeahead extends PbEnhancedElement {
     return this.cacheKeyFor(this.searchTerm, this.searchContext)
   }
 
-  cacheKeyFor(searchTerm: string, searchContext: string) {
+  cacheKeyFor(searchTerm, searchContext) {
     return [searchTerm, JSON.stringify(searchContext)].join()
   }
 
@@ -168,11 +160,11 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   get searchTermMinimumLength() {
-    return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchTermMinimumLength
+    return this.element.dataset.pbTypeaheadKitSearchTermMinimumLength
   }
 
   get searchDebounceTimeout() {
-    return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchDebounceTimeout
+    return this.element.dataset.pbTypeaheadKitSearchDebounceTimeout
   }
 
   get resultsElement() {
@@ -200,9 +192,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     )
   }
 
-  toggleResultsLoadingIndicator(visible: boolean) {
-    var visibilityProperty = '0'
-    if (visible) visibilityProperty = '1'
+  toggleResultsLoadingIndicator(visible) {
+    var visibilityProperty = 0
+    if (visible) visibilityProperty = 1
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
 }

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -18,7 +18,7 @@ type UserProps = {
   data?: {[key: string]: string},
   id?: string,
   name?: string,
-  orientation?: "horizontal" | "vertical",
+  orientation?: "horiztonal" | "vertical",
   size?: "sm" | "md" | "lg",
   subtitle?: string | Array<Node> | Node,
   territory?: string,

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -68,7 +68,7 @@ $background_colors: (
 
 /* Card colors ------------------*/
 $card_light:          $white !default;
-$card_dark:           mix(white, $bg_dark, 10%)  !default;
+$card_dark:           rgba($white, $opacity_1) !default;
 $card_colors: (
   card_light:         $card_light,
   card_dark:          $card_dark
@@ -109,18 +109,16 @@ $focus_input_colors: (
 
 /* Border colors ----------------------*/
 $border_light:        #E4E8F0 !default;
-$border_dark:         mix(white, $bg_dark, 20%) !default;
+$border_dark:         rgba($white, $opacity_1) !default;
 $border_colors: (
   border_light:       $border_light,
   border_dark:        $border_dark
 );
 
 /* Shadow colors ----------------------*/
-$shadow:             rgba(#3C6AAC, $opacity_2) !default;
-$shadow_dark:        $bg_dark !default;
+$shadow:        rgba(#3C6AAC, $opacity_2) !default;
 $shadow_colors: (
   shadow:       $shadow,
-  shadow_dark:       $shadow_dark,
 );
 
 /* Text colors ------------------------*/

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.18.0"
-  VERSION = "12.18.0.pre.alpha.PLAY785typeaheadts632"
+  VERSION = "12.18.0.pre.alpha.play786multilevelselectimprovements613"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.18.0.pre.alpha.PLAY785typeaheadts632
+  version: 12.18.0.pre.alpha.play786multilevelselectimprovements613
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-09 00:00:00.000000000 Z
+date: 2023-05-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2248,17 +2248,17 @@ files:
 - app/pb_kits/playbook/pb_treemap_chart/docs/index.js
 - app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
 - app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
+- app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
 - app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx
-- app/pb_kits/playbook/pb_typeahead/_typeahead.tsx
-- app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx
-- app/pb_kits/playbook/pb_typeahead/components/Control.tsx
-- app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx
-- app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx
-- app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx
-- app/pb_kits/playbook/pb_typeahead/components/Option.tsx
-- app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx
-- app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx
+- app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
+- app/pb_kits/playbook/pb_typeahead/components/Control.jsx
+- app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
+- app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
+- app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx
+- app/pb_kits/playbook/pb_typeahead/components/Option.jsx
+- app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx
+- app/pb_kits/playbook/pb_typeahead/components/ValueContainer.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_description.md
 - app/pb_kits/playbook/pb_typeahead/docs/_footer.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx
@@ -2289,10 +2289,9 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md
 - app/pb_kits/playbook/pb_typeahead/docs/example.yml
 - app/pb_kits/playbook/pb_typeahead/docs/index.js
-- app/pb_kits/playbook/pb_typeahead/index.ts
+- app/pb_kits/playbook/pb_typeahead/index.js
 - app/pb_kits/playbook/pb_typeahead/typeahead.html.erb
 - app/pb_kits/playbook/pb_typeahead/typeahead.rb
-- app/pb_kits/playbook/pb_typeahead/types.d.ts
 - app/pb_kits/playbook/pb_user/_user.scss
 - app/pb_kits/playbook/pb_user/_user.tsx
 - app/pb_kits/playbook/pb_user/docs/_description.md

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import { components } from 'react-select'
-
-import Badge from '../../pb_badge/_badge'
-import FormPill from '../../pb_form_pill/_form_pill'
-import { SelectValueType } from '../_typeahead'
-
-type Props = {
-  data: SelectValueType,
-  multiValueTemplate: any,
-  removeProps: any,
-  selectProps: any,
-}
-
-const MultiValue = (props: Props) => {
-  const { removeProps } = props
-  const { imageUrl, label } = props.data
-  const { multiKit } = props.selectProps
-
-  const formPillProps = {
-    marginRight: 'xs',
-    name: label,
-    avatarUrl: '',
-  }
-
-  if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
-
-  return (
-    <components.MultiValueContainer
-      className="text_input_multivalue_container"
-      {...props}
-    >
-      {multiKit === 'badge' &&
-        <Badge
-          closeProps={removeProps}
-          removeIcon
-          text={label}
-          variant="primary"
-        />
-      }
-
-      {multiKit !== 'badge' && imageUrl &&
-        <FormPill
-          avatarUrl={imageUrl}
-          closeProps={removeProps}
-          marginRight="xs"
-          name={label}
-          size={multiKit === 'smallPill' ? 'small' : ''}
-          text=''
-        />
-      }
-
-      {multiKit !== 'badge' && !imageUrl &&
-        <FormPill
-          closeProps={removeProps}
-          marginRight="xs"
-          name=''
-          size={multiKit === 'smallPill' ? 'small' : ''}
-          text={label}
-        />
-      }
-    </components.MultiValueContainer>
-  )
-}
-
-export default MultiValue

data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { components } from 'react-select'
-
-import User from '../../pb_user/_user'
-
-const Option = (props: any) => {
-  const {
-    imageUrl,
-  } = props.data
-  const { valueComponent } = props.selectProps
-
-  return (
-    <components.Option {...props}>
-      <>
-        {!valueComponent && imageUrl &&
-          <User
-            align="left"
-            avatarUrl={imageUrl}
-            dark={props.selectProps.dark}
-            name={props.label}
-            orientation="horizontal"
-          />
-        }
-
-        {valueComponent &&
-          valueComponent(props.data)
-        }
-
-        {!valueComponent && !imageUrl &&
-          props.label
-        }
-      </>
-    </components.Option>
-  )
-}
-
-export default Option

data/app/pb_kits/playbook/pb_typeahead/types.d.ts

@@ -1,2 +0,0 @@
-declare module 'react-select'
-declare module 'react-select/*'