playbook_ui 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -4,12 +4,14 @@
 import React, { useState } from 'react'
 import { components } from 'react-select'
 
-import Avatar from '../../pb_avatar/_avatar'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Avatar,
+  Body,
+  Flex,
+  FlexItem,
+  Title,
+  Typeahead,
+} from 'playbook-ui'
 
 const USERS = [
   {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Windows', value: '#FFA500' },

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *
@@ -47,7 +49,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You added the user: "${value.label}"`)
+    alert(`You removed the user: "${value.label}"`)
   }
 
   return (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *
@@ -54,7 +56,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You added the user: "${value.label}"`)
+    alert(`You removed the user: "${value.label}"`)
   }
 
   return (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Windows', value: '#FFA500' },

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml

@@ -12,13 +12,9 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
-    - typeahead_dynamic_options: Dynamic Options
-    - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
-    - typeahead_disabled: Disabled
 
   react:
     - typeahead_default: Default
-    - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)
@@ -33,4 +29,3 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
-    - typeahead_disabled: Disabled

data/app/pb_kits/playbook/pb_typeahead/docs/index.js

@@ -13,5 +13,3 @@ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_lis
 export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
-export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
-export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'

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

@@ -20,34 +20,6 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.searchInput.addEventListener('focus', () => this.debouncedSearch())
     this.searchInput.addEventListener('input', () => this.debouncedSearch())
     this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
-
-    if (this.clearOnContextChange && this.searchContextElement) {
-      this.searchContextElement.addEventListener('change', () => {
-        this.searchInputClear()
-        this.resultsCacheClear()
-        this.clearResults()
-      })
-    }
-  }
-
-  get optionsByContext() {
-    return (this.element as HTMLElement).dataset.pbTypeaheadKitOptionsByContext
-      ? JSON.parse((this.element as HTMLElement).dataset.pbTypeaheadKitOptionsByContext)
-      : null
-  }
-
-  get searchContextElement() {
-    const selector = (this.element as HTMLElement).dataset.pbTypeaheadKitSearchContextSelector
-    if (!selector) return null
-
-    const found = this.element.parentNode?.querySelector(`#${selector}`)
-      || this.element.closest(selector)
-
-    return found || null
-  }
-
-  get clearOnContextChange() {
-    return (this.element as HTMLElement).dataset.pbTypeaheadKitClearOnContextChange === 'true'
   }
 
   handleKeydown(event: KeyboardEvent) {
@@ -68,32 +40,14 @@ export default class PbTypeahead extends PbEnhancedElement {
 
     const searchTerm = this.searchTerm
     const searchContext = this.searchContext
-
-    if (this.optionsByContext && Object.keys(this.optionsByContext).length > 0) {
-      const contextArray = this.optionsByContext[searchContext] || []
-
-      const filteredResults = contextArray.filter((obj: { label: string, value: string }) => {
-        return obj.label
-          && obj.label.toLowerCase().includes(searchTerm.toLowerCase())
-      })
-
-       const optionFragments = filteredResults.map((obj: { label: string, value: string }) => {
-      const singleOption = document.createDocumentFragment()
-      singleOption.appendChild(document.createTextNode(obj.label))
-      return singleOption
-    })
-
-      this.resultsCacheUpdate(searchTerm, searchContext, optionFragments)
-    } else {
-      const search = {
-        searchingFor: searchTerm,
-        searchingContext: searchContext,
-        setResults: (results: Array<DocumentFragment>) => {
-          this.resultsCacheUpdate(searchTerm, searchContext, results)
-        },
-      }
-      this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
+    const search = {
+      searchingFor: searchTerm,
+      searchingContext: searchContext,
+      setResults: (results: Array<DocumentFragment>) => {
+        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>) {
@@ -133,15 +87,11 @@ export default class PbTypeahead extends PbEnhancedElement {
     const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
-    const selectedText = resultOption.textContent.trim()
-
     this._validSelection = true
     this.removeValidationError()
 
-    if (this.searchContextElement) this.searchInput.value = selectedText
-
     this.resultsCacheClear()
-    if (!this.searchContextElement) this.searchInputClear()
+    this.searchInputClear()
     this.clearResults()
 
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
@@ -223,9 +173,6 @@ export default class PbTypeahead extends PbEnhancedElement {
       this.element.parentNode.querySelector(selector) ||
       this.element.closest(selector)
     ) as HTMLInputElement).value
-    else if (this.searchContextElement) {
-      return (this.searchContextElement as HTMLInputElement).value
-    }
 
     return null
   }

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -44,16 +44,6 @@ module Playbook
                       default: false
       prop :validation, type: Playbook::Props::HashProp,
                         default: {}
-      prop :wrapped, type: Playbook::Props::Boolean,
-                     default: false
-      prop :clear_on_context_change, type: Playbook::Props::Boolean,
-                                     default: true
-      prop :options_by_context, type: Playbook::Props::HashProp,
-                                default: {}
-      prop :search_context_selector, type: Playbook::Props::String,
-                                     default: nil
-      prop :disabled, type: Playbook::Props::Boolean,
-                      default: false
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -68,15 +58,12 @@ module Playbook
         Hash(values[:data]).merge(
           pb_typeahead_kit: true,
           pb_typeahead_kit_search_term_minimum_length: search_term_minimum_length,
-          pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout,
-          pb_typeahead_kit_clear_on_context_change: clear_on_context_change,
-          pb_typeahead_kit_search_context_selector: search_context_selector,
-          pb_typeahead_kit_options_by_context: options_by_context.to_json
+          pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
         )
       end
 
       def is_react?
-        pills || !is_multi || wrapped
+        pills || !is_multi
       end
 
       def typeahead_react_options
@@ -98,11 +85,6 @@ module Playbook
           placeholder: placeholder,
           plusIcon: plus_icon,
           truncate: truncate,
-          wrapped: wrapped,
-          searchContextSelector: search_context_selector,
-          optionsByContext: options_by_context,
-          clearOnContextChange: clear_on_context_change,
-          disabled: disabled,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?

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

@@ -7,8 +7,6 @@ import { GlobalProps, globalProps } from '../utilities/globalProps'
 import Avatar from '../pb_avatar/_avatar'
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
-import Caption from '../pb_caption/_caption'
-import Detail from '../pb_detail/_detail'
 
 type UserProps = {
   align?: "left" | "center" | "right",
@@ -22,13 +20,11 @@ type UserProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   name?: string,
-  nameStyle?: "title" | "body" | "caption" | "detail"
   orientation?: "horizontal" | "vertical",
   size?: "sm" | "md" | "lg",
   subtitle?: string | Array<Node> | Node,
   territory?: string,
   title?: string,
-  titleStyle?: "title" | "body" | "caption" | "detail",
 } & GlobalProps
 
 const User = (props: UserProps): React.ReactElement => {
@@ -44,13 +40,11 @@ const User = (props: UserProps): React.ReactElement => {
     htmlOptions = {},
     id,
     name,
-    nameStyle = 'title',
     orientation = 'horizontal',
     size = 'sm',
     subtitle,
     territory = '',
     title = '',
-    titleStyle = 'body',
   } = props
 
   const dataProps: {[key: string]: string} = buildDataProps(data)
@@ -64,76 +58,6 @@ const User = (props: UserProps): React.ReactElement => {
   )
 
   const avatarPresent = avatar || avatarUrl
-  const titleText = territory === '' ? title : `${territory} • ${title}`
-
-  const renderNameComponent = () => {
-    switch (nameStyle) {
-      case "title":
-        return (
-          <Title
-              bold={bold}
-              dark={dark}
-              size={size === "lg" ? 3 : 4}
-              text={name}
-          />
-        );
-      case "body":
-        return (
-          <Body
-              dark={dark}
-              text={name}
-          />
-        );
-      case "caption":
-        return (
-          <Caption
-              dark={dark}
-              size={size === "sm" ? "xs" : size}
-              text={name}
-          />
-        );
-      case "detail":
-        return (
-          <Detail
-              dark={dark}
-              text={name}
-          />
-        );
-      default:
-        return null;
-    }
-  };
-
-  const renderTitleComponent = () => {
-    switch (titleStyle) {
-      case "body":
-        return (
-          <Body
-              color="light"
-              dark={dark}
-              text={titleText}
-              variant={null}
-          />
-        );
-      case "caption":
-        return (
-          <Caption
-              dark={dark}
-              size={size === "sm" ? "xs" : size}
-              text={titleText}
-          />
-        );
-      case "detail":
-        return (
-          <Detail
-              dark={dark}
-              text={titleText}
-          />
-        );
-      default:
-        return null;
-    }
-  };
 
   return (
     <div
@@ -152,8 +76,19 @@ const User = (props: UserProps): React.ReactElement => {
         />
       }
       <div className="content_wrapper">
-        {renderNameComponent()}
-        {renderTitleComponent()}
+        <Title
+            bold={bold}
+            dark={dark}
+            size={size == 'lg' ? 3 : 4}
+            text={name}
+        />
+        <Body
+            color="light"
+            dark={dark}
+            variant={null}
+        >
+          {territory === '' ? title : `${territory} • ${title}`}
+        </Body>
         { typeof(subtitle) === 'string' &&
           <Body
               color="light"

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx

@@ -1,10 +1,5 @@
 import React from "react"
-
-import Caption from '../../pb_caption/_caption'
-import Contact from '../../pb_contact/_contact'
-import Flex from '../../pb_flex/_flex'
-import Icon from '../../pb_icon/_icon'
-import User from '../../pb_user/_user'
+import { Caption, Contact, Flex, Icon, User } from "playbook-ui"
 
 const MentorSubtitle = (
   <Flex>

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserLightWeight = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import User from '../../pb_user/_user'
+import { User } from "playbook-ui"
 
 const UserSubtitle = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserTextOnly = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserVerticalSize = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserWithTerritory = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/example.yml

@@ -9,7 +9,6 @@ examples:
   - user_vertical_size: Vertical Size
   - user_subtitle: Subtitle
   - user_block_content_subtitle_rails: Block Content Subtitle
-  - user_font_options: Font Options
 
   react:
   - user_default: Default
@@ -20,7 +19,6 @@ examples:
   - user_vertical_size: Vertical Size
   - user_subtitle: Subtitle
   - user_block_content_subtitle_react: Block Content Subtitle
-  - user_font_options: Font Options
 
   swift:
   - user_horizontal_swift: Horizontal

data/app/pb_kits/playbook/pb_user/docs/index.js

@@ -6,4 +6,3 @@ export { default as UserSize } from './_user_size.jsx'
 export { default as UserVerticalSize } from './_user_vertical_size.jsx'
 export { default as UserSubtitle } from './_user_subtitle.jsx'
 export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
-export { default as UserFontOptions } from './_user_font_options.jsx'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -12,33 +12,12 @@
     }) %>
   <% end %>
   <%= content_tag(:div, class: "content_wrapper") do %>
-    <% case object.name_style %>
-      <% when "title" %>
-        <%= pb_rails("title", props: { text: object.name, size: object.name_size, dark: object.dark, bold: object.bold }) %>
-      <% when "body" %>
-        <%= pb_rails("body", props: { text: object.name, dark: object.dark }) %>
-      <% when "caption" %>
-        <%= pb_rails("caption", props: { text: object.name, dark: object.dark, size: object.name_size }) %>
-      <% when "detail" %>
-        <%= pb_rails("detail", props: { text: object.name, dark: object.dark }) %>
-    <% end %>
-    <% case object.title_style %>
-      <% when "body" %>
-        <%= pb_rails("body", props: {
-          text: "#{object.details}",
-          dark: object.dark,
-          color: "light"
-        }) %>
-      <% when "caption" %>
-        <%= pb_rails("caption", props: {
-          text: "#{object.details}",
-          dark: object.dark,
-          color: "light",
-          size: object.title_size
-        }) %>
-      <% when "detail" %>
-        <%= pb_rails("detail", props: { text: "#{object.details}", dark: object.dark }) %>
-    <% end %>
+    <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark, bold: object.bold }) %>
+    <%= pb_rails("body", props: {
+      text: "#{object.details}",
+      dark: object.dark,
+      color: "light"
+    }) %>
     <% if content %>
       <%= content.presence %>
     <% else %>

data/app/pb_kits/playbook/pb_user/user.rb

@@ -11,9 +11,6 @@ module Playbook
       prop :avatar_url
       prop :bold, type: Playbook::Props::Boolean, default: true
       prop :name
-      prop :name_style, type: Playbook::Props::Enum,
-                        values: %w[title body caption detail],
-                        default: "title"
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
                          default: "horizontal"
@@ -22,9 +19,6 @@ module Playbook
                   default: "sm"
       prop :subtitle
       prop :title
-      prop :title_style, type: Playbook::Props::Enum,
-                         values: %w[body caption detail],
-                         default: "body"
       prop :territory
 
       def classname
@@ -42,18 +36,8 @@ module Playbook
         end
       end
 
-      def name_size
-        if name_style == "caption"
-          size == "sm" ? "xs" : size
-        else
-          size == "lg" ? 3 : 4
-        end
-      end
-
       def title_size
-        if title_style == "caption"
-          size == "sm" ? "xs" : size
-        end
+        size == "lg" ? 3 : 4
       end
 
       def details