playbook_ui 14.14.0.pre.alpha.PBNTR907reactfilterpopoverpropswidthbug6557 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275

data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb

@@ -1,9 +1,10 @@
 <%= pb_rails("title", props: {
-    margin_bottom: "md"
 })  do %>
     Default Title
 <% end %>
 
+<br/>
+
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx

@@ -6,10 +6,10 @@ const TitleDefault = (props) => {
   return (
     <div>
       <Title
-          marginBottom='md'
           text="Default Title"
           {...props}
       />
+      <br />
       <Title
           size={1}
           tag="h1"

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

@@ -5,7 +5,6 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
-  - title_display_size: Display Size
 
   react:
   - title_default: Default UI
@@ -13,4 +12,3 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
-  - title_display_size: Display Size

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

@@ -3,4 +3,3 @@ export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
 export { default as TitleResponsive } from './_title_responsive.jsx'
 export { default as TitleTruncate } from './_title_truncate.jsx'
-export { default as TitleDisplaySize } from './_title_display_size.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -16,15 +16,12 @@ module Playbook
                      default: nil,
                      deprecated: true
       prop :bold, type: Playbook::Props::Boolean, default: true
-      prop :display_size, type: Playbook::Props::Enum,
-                          values: [nil, "xs", "sm", "md", "lg", "xl", "xxl"],
-                          default: nil
 
       def classname
         if is_size_responsive
           generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
         else
-          generate_classname("pb_title_kit", size, variant, color, is_bold) + generate_display_size
+          generate_classname("pb_title_kit", size, variant, color, is_bold)
         end
       end
 
@@ -32,12 +29,6 @@ module Playbook
         bold ? nil : "thin"
       end
 
-      def generate_display_size
-        return "" if display_size.nil?
-
-        " pb_title_kit_dynamic_#{display_size}"
-      end
-
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end

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

@@ -141,6 +141,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="right"] {
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
+    margin: 0 0 0 $space_sm;
     .arrow {
       left: -18px;
       right: auto;
@@ -155,6 +156,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="bottom"] {
     box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+    margin: $space_sm 0 0 0;
     .arrow {
       top: -18px;
       margin-bottom: 0;
@@ -167,6 +169,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="left"] {
     box-shadow: 8px 0 28px 0 $tooltip_shadow;
+    margin: 0 $space_sm 0 0;
     .arrow {
       margin-bottom: 0;
       right: -18px;

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

@@ -25,18 +25,12 @@ type TooltipProps = {
   children: JSX.Element,
   data?: { [key: string]: string },
   delay?: number | Partial<{open: number; close: number}>,
-  height?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon?: string,
   interaction?: boolean,
-  maxHeight?: string,
-  maxWidth?: string,
-  minHeight?: string,
-  minWidth?: string,
   placement?: Placement,
   position?: "absolute" | "fixed";
   text: string,
-  width: string,
   showTooltip?: boolean,
   forceOpenTooltip?: boolean,
 } & GlobalProps
@@ -48,19 +42,13 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     children,
     data = {},
     delay = 0,
-    height,
     htmlOptions = {},
     icon = null,
     interaction = false,
-    maxHeight,
-    maxWidth,
-    minHeight,
-    minWidth,
     placement: preferredPlacement = "top",
     position = "absolute",
     text,
     showTooltip = true,
-    width,
     zIndex,
     forceOpenTooltip = false,
     ...rest
@@ -127,18 +115,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     top: "bottom",
   }[placement.split("-")[0]]
 
-  const tooltipSizing = () => {
-    return Object.assign(
-      {},
-      height ? { height: height } : {},
-      maxHeight ? { maxHeight: maxHeight } : {},
-      maxWidth ? { maxWidth: maxWidth } : {},
-      minHeight ? { minHeight: minHeight } : {},
-      minWidth ? { minWidth: minWidth } : {},
-      width ? { width: width } : {}
-    );
-};
-
   return (
     <>
       <div
@@ -168,7 +144,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
               ref: refs.setFloating,
               role: "tooltip",
               style: {
-                ...tooltipSizing(),
                 position: strategy,
                 top: y ?? 0,
                 left: x ?? 0,

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

@@ -2,17 +2,15 @@ examples:
 
   rails:
   - tooltip_default: Default
-  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
-  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react:
   - tooltip_default_react: Default
   - tooltip_interaction: Content Interaction
   - tooltip_margin: Margin
-  - tooltip_sizing: Tooltip Sizing
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
   - tooltip_show_tooltip_react: Show Tooltip
+

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

@@ -1,7 +1,6 @@
 export { default as TooltipDefaultReact } from './_tooltip_default_react'
 export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
-export { default as TooltipSizing } from './_tooltip_sizing'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
 export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -11,7 +11,7 @@ const TOOLTIP_TIMEOUT = 250
 
 export default class PbTooltip extends PbEnhancedElement {
   static get selector() {
-    return '[data-pb-tooltip-kit="true"][data-pb-tooltip-interaction="false"]:not([data-pb-tooltip-delay-open]):not([data-pb-tooltip-delay-close])'
+    return '[data-pb-tooltip-kit]'
   }
 
   connect() {
@@ -152,4 +152,4 @@ export default class PbTooltip extends PbEnhancedElement {
   get triggerMethod() {
     return this.element.dataset.pbTooltipTriggerMethod || 'hover'
   }
-}
+}

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -7,10 +7,6 @@ module Playbook
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true
       prop :tooltip_id
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :delay_open
-      prop :delay_close
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :trigger_method, type: Playbook::Props::Enum,
@@ -22,19 +18,15 @@ module Playbook
       end
 
       def data
-        data = Hash(values[:data]).merge(
+        Hash(values[:data]).merge(
           pb_tooltip_kit: true,
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
           pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: trigger_method,
-          pb_tooltip_interaction: interaction
+          pb_tooltip_trigger_method: trigger_method
         )
-        data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
-        data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close
-        data
       end
 
     private

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -1,10 +1,9 @@
-import React, { useState, useEffect} from 'react'
+import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
 import AsyncCreateableSelect from 'react-select/async-creatable'
-import { get, isString, uniqueId } from '../utilities/object'
-
+import { get, isString, uniqueId } from 'lodash'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 
@@ -46,12 +45,8 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => string),
   getOptionValue?: string | (() => string),
   name?: string,
-  options?: Array<{ label: string; value?: string }>,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
-  optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
-  searchContextSelector?: string,
-  clearOnContextChange?: boolean,
 } & GlobalProps
 
 export type SelectValueType = {
@@ -86,9 +81,6 @@ const Typeahead = ({
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
-  optionsByContext = {},
-  searchContextSelector,
-  clearOnContextChange = false,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -123,32 +115,6 @@ const Typeahead = ({
     ...props,
   }
 
-  const [contextValue, setContextValue] = useState("")
-
-  useEffect(() => {
-    if (searchContextSelector) {
-      const searchContextElement = document.getElementById(searchContextSelector)
-
-      setContextValue((searchContextElement as HTMLInputElement)?.value)
-      const handleContextChange = (e: Event) => {
-        const target = e.target as HTMLInputElement;
-        setContextValue(target.value);
-        if (clearOnContextChange) document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
-      }
-
-      if (searchContextElement) searchContextElement.addEventListener('change', handleContextChange)
-
-      return () => {
-        if (searchContextElement) searchContextElement.removeEventListener('change', handleContextChange)
-      }
-    }
-  }, [searchContextSelector])
-
-  const contextArray = optionsByContext[contextValue]
-  if (Array.isArray(contextArray) && contextArray.length > 0) {
-    selectProps.options = contextArray
-  }
-
   const Tag = (
     createable
       ? (async ? AsyncCreateableSelect : CreateableSelect)

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

@@ -8,17 +8,15 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
   multiValueTemplate: any,
-  wrapped?: boolean,
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
   removeProps: any,
   selectProps: any,
 }
 
-
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
+  const { dark, multiKit, pillColor, truncate } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -54,7 +52,6 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
             truncate={truncate}
-            wrapped={wrapped}
             {...props}
         />
       }
@@ -69,7 +66,6 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
             truncate={truncate}
-            wrapped={wrapped}
             {...props}
         />
       }

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

@@ -12,8 +12,6 @@ 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)
 
   react:
     - typeahead_default: Default

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,14 +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
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -66,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
@@ -96,10 +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,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?

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

@@ -1,31 +1,3 @@
 /* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
 
-export const isEmpty = (obj: any) => [Object, Array].includes((obj || {}).constructor) && !Object.entries((obj || {})).length;
-
-export const get = <T, R = any>(obj: T, path: string, defaultValue?: R): R | any => {
-  const travel = (regexp: RegExp): any =>
-    String.prototype.split
-      .call(path, regexp)
-      .filter(Boolean)
-      .reduce((res: any, key: string) => (res !== null && res !== undefined ? res[key] : res), obj)
-  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/)
-  return result === undefined || result === obj ? defaultValue : result
-}
-
-export const isString = (str: unknown): str is string =>
-  str != null && typeof (str as any).valueOf() === "string"
-
-export const uniqueId: (prefix?: string) => string = (() => {
-  let counter = 0
-  return (prefix = '') => `${prefix}${++counter}`
-})()
-
-export const omitBy = (obj: Record<string, any>, predicate: (value: any, key: string) => boolean) => {
-  if (obj === null || typeof obj !== 'object') return {}
-  return Object.keys(obj).reduce((result: Record<string, any>, key: string) => {
-    if (!predicate(obj[key], key)) {
-      result[key] = obj[key];
-    }
-    return result;
-  }, {})
-}
+export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1