playbook_ui 14.14.0.pre.alpha.PBNTR892dialogenhancedelement6476 → 14.14.0.pre.alpha.PBNTR894allowingcurrencyzero6405

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 87dde43f2e80f2fb326bea47771b1b44f66dc0745458a22d6fdc2da372eaf197
-  data.tar.gz: 8434f9863bd44e9ee69f1be53a770e87de0df3002aa69666df787bfd9d2db202
+  metadata.gz: 9405959f28812ce17068b3a42e1c9207630234c73aa817005655afd22d708561
+  data.tar.gz: 0f3dfd8437117adbf036fe2e692265a6506e99b3755f69eef8a858715661e241
 SHA512:
-  metadata.gz: fffef961e834a62003bc28a6ce270f916e63d6e27c306db563b4a3f7a6054dd1f8161cc76799a9056b0efabbebf65943748eca172da7a984697a903027779b62
-  data.tar.gz: 3cf6e726483df0b00d9436cb81d4c243e54f95c5be40ce39245a01793f6c266ad34f9e416282ce08991536b78e0c6cf9999e2466ee8c1840b549f348e65e78fc
+  metadata.gz: d8075de7716d49fc0be0bda75d1be63bdaa3f9a07a8da9df1a3260d1327a8f43d1ebd948ec491c0aedf1404c971f157d6fa6b9d5bdafb79354f5cece6b2e01bd
+  data.tar.gz: 8b499830a6806d063e75e4e18f82f564dff2e1453f06a9834970ae4bbea6f8f3956c79676d4223faf8bf428675f8a852b26e283625d3eb1156ae98a181670ec7

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,8 +1,4 @@
-<div
-    class="pb_dialog_wrapper_rails <%= object.full_height_style %>"
-    data-pb-dialog-wrapper="true"
-    data-overlay-click= <%= object.overlay_close %>
->
+<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
     <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
@@ -37,3 +33,8 @@
             <%= content %>
     <% end %>
 </div>
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => dialogHelper())
+    window.addEventListener("turbo:frame-load", () => dialogHelper())
+<% end %>

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -1,5 +1,3 @@
-// Three places in Nitro depend on this function inside the window scope.
-// Because of this, we will keep this file until we remove this dependency from Nitro.
 const dialogHelper = () => {
   const openTrigger = document.querySelectorAll("[data-open-dialog]");
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");

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

@@ -69,17 +69,4 @@ $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,7 +11,6 @@ export type OverlayChildrenProps = {
     dynamic?: boolean,
     position: string,
     size: string,
-    scrollBarNone?: boolean,
 }
 
 type OverlayProps = {
@@ -24,8 +23,6 @@ type OverlayProps = {
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
-    scrollBarNone?: boolean,
-    
 }
 
 const Overlay = (props: OverlayProps) => {
@@ -39,12 +36,11 @@ 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'), { 'overlay-hide-scrollbar': scrollBarNone }, globalProps(props), className )
+    const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)
 
@@ -72,14 +68,12 @@ 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/example.yml

@@ -4,11 +4,9 @@ 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,4 +2,3 @@ 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,11 +10,9 @@ 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", hide_scroll_bar_class)
+        generate_classname("pb_overlay")
       end
 
       def position
@@ -116,10 +114,6 @@ 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,15 +64,3 @@ 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_text_input/inputMask.ts

@@ -17,7 +17,7 @@ const formatCurrencyDefaultValue = (value: string): string => {
 
     // Parse the numeric value as a float to handle decimals
     const dollars = parseFloat(numericValue)
-    if (isNaN(dollars) || dollars === 0) return ''
+    if (isNaN(dollars)) return ''
 
     // Format as currency
     return new Intl.NumberFormat('en-US', {
@@ -30,10 +30,9 @@ const formatCurrencyDefaultValue = (value: string): string => {
 const formatCurrency = (value: string): string => {
     const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
 
-    if (!numericValue) return ''
+    if (!numericValue || numericValue === "00") return ''
 
     const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2))
-    if (dollars === 0) return ''
 
     return new Intl.NumberFormat('en-US', {
         style: 'currency',

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

@@ -1,4 +1,4 @@
-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'
@@ -45,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 = {
@@ -85,9 +81,6 @@ const Typeahead = ({
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
-  optionsByContext = {},
-  searchContextSelector,
-  clearOnContextChange = false,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -122,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/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,12 +44,6 @@ 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"
@@ -64,10 +58,7 @@ 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
 
@@ -94,9 +85,6 @@ 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?