playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.movemarkdown668

data/app/pb_kits/playbook/pb_table/styles/_variables.scss

@@ -0,0 +1,26 @@
+@import "../../tokens/spacing";
+@import "../../tokens/typography";
+
+//--------- PADDING ---------//
+
+// Cell padding between cells
+$cell-gutter: $space-xs;
+
+// First & last cell padding
+$cell-pad-endcap: $space-lg;
+
+// Vertical cell padding
+$cell-pad-sm: $space-xs;
+$cell-pad-md: $space-sm;
+$cell-pad-lg: $space-lg;
+
+$cell-pad-list: (
+  table-sm: $cell-pad-sm,
+  table-md: $cell-pad-md,
+  table-lg: $cell-pad-lg
+);
+
+//--------- CONTENT ---------//
+
+$default-header-size: $font-smaller;
+$default-font-size: $font-small;

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -0,0 +1,16 @@
+[class^=pb_table] {
+  &.vertical-border {
+    td,
+    th {
+      border-right: 1px solid $border_light !important;
+    }
+
+    @media screen and (min-width: $screen-xs-min) {
+      tr:hover {
+        td:last-child {
+          border-right-color: darken($border_light, 10%) !important;
+        }
+      }
+    }
+  }
+}

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

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
@@ -19,6 +17,7 @@ import Placeholder from './components/Placeholder'
 import ValueContainer from './components/ValueContainer'
 
 import { noop, buildDataProps } from '../utilities/props'
+import { Noop } from '../types'
 
 /**
  * @typedef {object} Props
@@ -33,16 +32,28 @@ type TypeaheadProps = {
   components?: object,
   createable?: boolean,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   error?: string,
   id?: string,
   label?: string,
-  loadOptions?: string,
+  loadOptions?: string | Noop,
   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
@@ -67,7 +78,7 @@ const Typeahead = ({
       Control,
       ClearIndicator,
       IndicatorsContainer,
-      IndicatorSeparator: null,
+      IndicatorSeparator: null as null,
       MenuList,
       MultiValue,
       Option,
@@ -85,8 +96,9 @@ const Typeahead = ({
     isSearchable: true,
     name,
     multiKit: '',
-    onCreateOption: null,
+    onCreateOption: null as null,
     plusIcon: false,
+    onMultiValueClick: (_option: SelectValueType) => { },
     ...props,
   }
 
@@ -96,7 +108,7 @@ const Typeahead = ({
       : (async ? AsyncSelect : Select)
   )
 
-  const handleOnChange = (_data, { action, option, removedValue }) => {
+  const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
     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 })
@@ -123,13 +135,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

@@ -0,0 +1,18 @@
+import React, { useEffect } from 'react'
+import { components } from 'react-select'
+
+const ClearContainer = (props: any) => {
+  const { selectProps, clearValue } = props
+  useEffect(() => {
+    document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
+  }, [true])
+
+  return (
+    <components.ClearIndicator
+      className="clear_indicator"
+      {...props}
+    />
+  )
+}
+
+export default ClearContainer

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

@@ -0,0 +1,28 @@
+import React from 'react'
+import { components } from 'react-select'
+
+import Flex from '../../pb_flex/_flex'
+import TextInput from '../../pb_text_input/_text_input'
+
+type Props = {
+  selectProps: any,
+}
+
+const TypeaheadControl = (props: Props) => (
+  <div className="pb_typeahead_wrapper">
+    <TextInput
+      dark={props.selectProps.dark}
+      error={props.selectProps.error}
+      label={props.selectProps.label}
+    >
+      <Flex>
+        <components.Control
+          className="text_input"
+          {...props}
+        />
+      </Flex>
+    </TextInput>
+  </div>
+)
+
+export default TypeaheadControl

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

@@ -0,0 +1,11 @@
+import React from 'react'
+import { components } from 'react-select'
+
+const IndicatorsContainer = (props: any) => (
+  <components.IndicatorsContainer
+    className="text_input_indicators"
+    {...props}
+  />
+)
+
+export default IndicatorsContainer

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import { components } from 'react-select'
+
+const MenuList = (props: any) => (
+  <components.MenuList {...props}>
+    {props.children}
+  </components.MenuList>
+)
+
+export default MenuList

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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,37 @@
+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/components/Placeholder.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { components } from 'react-select'
+
+import Flex from '../../pb_flex/_flex'
+import Icon from '../../pb_icon/_icon'
+
+const Placeholder = (props: any) => (
+  <>
+    <Flex
+      align="center"
+      className="placeholder"
+    >
+      <components.IndicatorsContainer
+        {...props}
+      />
+      {props.selectProps.plusIcon &&
+        <Icon
+          className="typeahead-plus-icon"
+          icon="plus"
+        />
+      }
+    </Flex>
+  </>
+)
+
+export default Placeholder

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

@@ -0,0 +1,11 @@
+import React from 'react'
+import { components } from 'react-select'
+
+const ValueContainer = (props: any) => (
+  <components.ValueContainer
+    className="text_input_value_container"
+    {...props}
+  />
+)
+
+export default ValueContainer

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

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

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

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

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

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

data/app/pb_kits/playbook/utilities/_positioning.scss

@@ -48,3 +48,17 @@
 .z_index_10 {
   z-index: 1000;
 }
+
+$zIndex_values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+    
+@each $size, $size_value in $breakpoints_grid {
+  @each $zIndex_value in $zIndex_values {
+      $min_size: map-get($size_value, "min");
+      $max_size: map-get($size_value, "max");
+      .z_index_#{$size}_#{$zIndex_value} {
+        @include break_on($min_size, $max_size) {
+          z-index: #{$zIndex_value * 100} !important;
+        }
+      }
+  }
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -113,9 +113,11 @@ type Shadow = {
 
 type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
 
+type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
+type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
-  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
-}
+  zIndex?: ZIndexType,
+} | ZIndexResponsiveType
 
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
@@ -178,9 +180,19 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${maxWidth } ` : ''
     return css
   },
-  zIndexProps: ({ zIndex }: ZIndex) => {
+  zIndexProps: (zIndex: ZIndex) => {
     let css = ''
-    css += zIndex ? `z_index_${zIndex } ` : ''
+    Object.entries(zIndex).forEach((zIndexEntry) => {
+      if (zIndexEntry[0] == "zIndex") {
+        if (typeof zIndexEntry[1] == "number") {
+          css += `z_index_${zIndexEntry[1]} `
+        } else if (typeof zIndexEntry[1] == "object") {
+          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
+            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
+          })
+        }
+      }
+    })
     return css
   },
   shadowProps: ({ shadow }: Shadow) => {