playbook_ui 14.15.0.pre.rc.3 → 14.15.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68ebeb6b2f4b515c08bf2dd769eb60a513ef6cde846b288d0f10bab8803d7043
-  data.tar.gz: a76ce30f5f97d13c0034df663fcd7c04fcd3b6eb39a2c7cdb009e62ce2d346d4
+  metadata.gz: a671aef2ddd39a78ec98fcb4073566d8d8c07c887e206ef6e83c6bea4bbeae07
+  data.tar.gz: 79a8b005d92dfb2a80c0908349254e76a931f8e366abccbdd079bcf3b57725bd
 SHA512:
-  metadata.gz: 84af923e5d28d3ebe143c5559e1d3967d5e531adfd5cc1be67d2ed9008be88cc6ce211efc8e785f1f4725cfdba5ca3666f76c8bc6706b04141631d6e7e18c289
-  data.tar.gz: 75897a73b719c2bd7ee1581e6fce74ad0d0aea1e68d270cc74404e30612920f41c90a3bf620fab8cf5cc40d847345ccefff6b90ef222b6c0bc54d11477089efb
+  metadata.gz: 9e1497589d4831e05816145ea26dd5f174b94d035cdfd46ec112f973ad6ffa860821535adced274c664a81dcd356b14876a11f5162a6bb6d1a0a2fda12038799
+  data.tar.gz: 985f3701953d47a71657c909d63303cfe60413b0a374bafc96f611fbb477b4262ab4b5011c16c31e124ca05581a66af587c7d6d15b5e99997f2efd2cd43d5ad0

data/app/pb_kits/playbook/pb_overlay/_overlay.scss

@@ -69,4 +69,17 @@ $overlay_colors: (
     pointer-events: none;
     z-index: 1;
   }
+  
+  &.overlay-hide-scrollbar {
+    & [class*="overflow_x_auto"],
+    & [class*="overflow_y_auto"],
+    & [class*="overflow_auto"] {
+      &::-webkit-scrollbar {
+        display: none !important;
+      }
+      
+      -ms-overflow-style: none !important;
+      scrollbar-width: none !important;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -11,6 +11,7 @@ export type OverlayChildrenProps = {
     dynamic?: boolean,
     position: string,
     size: string,
+    scrollBarNone?: boolean,
 }
 
 type OverlayProps = {
@@ -23,6 +24,8 @@ type OverlayProps = {
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
+    scrollBarNone?: boolean,
+    
 }
 
 const Overlay = (props: OverlayProps) => {
@@ -36,11 +39,12 @@ const Overlay = (props: OverlayProps) => {
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
+        scrollBarNone = false,
     } = props
 
     const ariaProps = buildAriaProps(aria)
     const dataProps = buildDataProps(data)
-    const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
+    const classes = classnames(buildCss('pb_overlay'), { 'overlay-hide-scrollbar': scrollBarNone }, globalProps(props), className )
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)
 
@@ -68,12 +72,14 @@ const Overlay = (props: OverlayProps) => {
                     children,
                     color,
                     position: getPosition(),
+                    scrollBarNone,
                     size: getSize()
                 }) : OverlayToken({
                     children,
                     color,
                     dynamic: dynamic,
                     position: getPosition(),
+                    scrollBarNone,
                     size: getSize()
                 })
             }

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", scroll_bar_none: true }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
+
+const InlineCardsExample = () => {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            overflowX="auto"
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+}
+
+const OverlayHideScrollBar = () => (
+    <>
+        <Overlay
+            color="card_light"
+            layout={{"x": "xl"}}
+            scrollBarNone
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayHideScrollBar

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md

@@ -0,0 +1 @@
+Pass the `scroll_bar_none` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md

@@ -0,0 +1 @@
+Pass the `scrollBarNone` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.

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

@@ -4,9 +4,11 @@ examples:
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
+  - overlay_hide_scroll_bar: Hide Scroll Bar
 
   rails:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
+  - overlay_hide_scroll_bar: Hide Scroll Bar

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

@@ -2,3 +2,4 @@ export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
+export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -10,9 +10,11 @@ module Playbook
                     default: { "bottom": "full" }
       prop :dynamic, type: Playbook::Props::Boolean,
                      default: false
+      prop :scroll_bar_none, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
-        generate_classname("pb_overlay")
+        generate_classname("pb_overlay", hide_scroll_bar_class)
       end
 
       def position
@@ -114,6 +116,10 @@ module Playbook
         data.merge!("data-overlay-dynamic" => true) if dynamic
         data
       end
+
+      def hide_scroll_bar_class
+        scroll_bar_none ? " overlay-hide-scrollbar" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -64,3 +64,15 @@ test('should render children', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveTextContent(props.children)
 })
+
+test('should add overlay-hide-scrollbar class when scrollBarNone is true', () => {
+    const props = {
+      children,
+      data: { testid: testId },
+      scrollBarNone: true
+    }
+  
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('overlay-hide-scrollbar')
+})

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect} from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
@@ -45,8 +45,12 @@ 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 = {
@@ -81,6 +85,9 @@ const Typeahead = ({
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
+  optionsByContext = {},
+  searchContextSelector,
+  clearOnContextChange = false,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -115,6 +122,32 @@ 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/docs/_typeahead_dynamic_options.html.erb

@@ -0,0 +1,45 @@
+<%= pb_rails("select", props: {
+  id:"color_context_2",
+  label: "Choose a Color",
+  name: "color_name",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  is_multi: false,
+  search_context_selector: "color_context_2",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  id: "typeahead-dynamic-options",
+}) %>
+
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md

@@ -0,0 +1,5 @@
+You can also set up a typeahead to render options dynamically based on input from a select. To achieve this:
+- The typeahead must have a unique `id`
+- Use the `search_context_selector` prop on the typeahead. The value here must match the id of the select so the Typeahead knows where to read the current "context" from.
+- Use `options_by_context` to pass in a hash whose keys match the possible values of your “context” select. Each key maps to an array of { label, value } objects. The typeahead automatically displays only the subset of options matching the current context.
+- Additionally, the optional `clear_on_context_change` prop controls whether the typeahead clears or not when a change happens in the linked select. This prop is set to true by default so that whenever a selection is made in the select, the Typeahead automatically clears its current input/selection.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("select", props: {
+  id:"color_context",
+  label: "Choose a Color",
+  name: "color_name_2",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  search_context_selector: "color_context",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  search_term_minimum_length: 0,
+}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md

@@ -0,0 +1,3 @@
+The dynamic rendering of options for the typeahead can also be achieved with a pure Rails implementation (not react rendered). For this implementation, use all the props as above with the following additions:
+
+- `search_term_minimum_length`: this sets the minimum input in the typeahead needed to display the dropdown. This is set to 3 by default. Set it to 0 for the dropdown to always display when the typeahead is interacted with. 

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

@@ -12,6 +12,8 @@ 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,6 +20,34 @@ 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) {
@@ -40,14 +68,32 @@ export default class PbTypeahead extends PbEnhancedElement {
 
     const searchTerm = this.searchTerm
     const searchContext = this.searchContext
-    const search = {
-      searchingFor: searchTerm,
-      searchingContext: searchContext,
-      setResults: (results: Array<DocumentFragment>) => {
-        this.resultsCacheUpdate(searchTerm, searchContext, results)
-      },
+
+    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 }))
     }
-    this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
   }
 
   resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
@@ -87,11 +133,15 @@ 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()
-    this.searchInputClear()
+    if (!this.searchContextElement) this.searchInputClear()
     this.clearResults()
 
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
@@ -173,6 +223,9 @@ 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,6 +44,12 @@ module Playbook
                       default: false
       prop :validation, type: Playbook::Props::HashProp,
                         default: {}
+      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"
@@ -58,7 +64,10 @@ 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_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
         )
       end
 
@@ -85,6 +94,9 @@ module Playbook
           placeholder: placeholder,
           plusIcon: plus_icon,
           truncate: truncate,
+          searchContextSelector: search_context_selector,
+          optionsByContext: options_by_context,
+          clearOnContextChange: clear_on_context_change,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?