playbook_ui 14.15.0.pre.alpha.play1757pbcontenttag6677 → 14.15.0.pre.alpha.play1854reacthookmultilvlselect6572

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d3b09cf4dcb9bb13c084c15022539b7390a5c50b49e2eef08603c6a5d8099b80
-  data.tar.gz: 64b92f0ad8a75486a88540e52218a72dd2e39172f47ecacc8d94327fabb34f3a
+  metadata.gz: 490e06dd4cafd132cf385ecbb9c648ba507870bc063cbcd04f3c079be70dad6e
+  data.tar.gz: 5bdf49498aca37b53ca14af0895ad20676e22bebdb97d988c8f2e9f9ed8e300a
 SHA512:
-  metadata.gz: fea61c0e6f748ec4a7d99d048079940c434da58eb3bc79a680f2fef3608c7682d41da321a649dfe48ed16e5d9e1300e97aefeccad85de6687017bed93384018b
-  data.tar.gz: 70608858b0ae5fdd07b0ab1b9300b46d8384c74428c92c8dfbd657827398353a1aa35696a8737be542eba0b4147d310fad6be1efb750e3802ef20b6bc8c2b61c
+  metadata.gz: 8b7ba9cdef8ac50cb46523b4f9f12273639fcfc389641803959b5a231633346336ca90bea21e72601528b80a3122fffb22865f5542b5c41a23c3b8ddc01a3e23
+  data.tar.gz: 3d2a14ba0096a4cf98b164ffa456168834219f9d087b22d3067939237d021e7f9726238c4e51319f63c9a63645cff456a54aa12a4b0da703117b9c9da20e7e8b

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -161,13 +161,6 @@
         }
       }
     }
-    td {
-      [class^=pb_text_input_kit] .text_input_wrapper input {
-        padding: 0 $space_xxs;
-        font-size: 14px;
-        text-align: right;
-      }
-    }
   }
 
   .table-header-cells-active:first-child {

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

@@ -36,5 +36,4 @@ examples:
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
-  - advanced_table_inline_editing: Inline Cell Editing
+  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)

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

@@ -20,5 +20,4 @@ export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
-export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
-export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
+export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -25,7 +25,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -24,7 +24,7 @@
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -49,7 +49,7 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
-          borderRadius="xs"
+          borderRadius="lg"
           htmlType={htmlType}
           link={link}
           newWindow={newWindow}

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -4,7 +4,7 @@
                                   new_window:object.new_window,
                                   target: object.target,
                                   dark: object.dark,
-                                  border_radius: "xs" }) do %>
+                                  border_radius: "lg" }) do %>
   <%= pb_rails("icon", props: { icon: object.icon,
                                 fixed_width: true,
                                 dark: object.dark,

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -473,18 +473,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                     ))
                   : null}
 
-                {!returnAllSelected
-                  ? defaultReturn.map((item) => (
-                      <input
-                          disabled={disabled}
-                          key={item.id} 
-                          name={`${name}[]`}
-                          type="hidden"
-                          value={item.id}
-                      />
-                    ))
-                  : null}
-
                 {returnAllSelected &&
                 returnedArray.length !== 0 &&
                 inputDisplay === "pills"

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md

@@ -1 +1 @@
-You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.
+You can pass `react-hook-form` props to the Typeahead kit. Check your console to see the full data selected from this example.

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -40,7 +40,7 @@ module Playbook
           treeData: tree_data,
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
-          inputName: input_name,
+          input_name: input_name,
           variant: variant,
           pillColor: pill_color,
           wrapped: wrapped,

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -23,7 +23,6 @@ type PhoneNumberInputProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
-  hiddenInputs?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   initialCountry?: string,
@@ -73,7 +72,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     dark = false,
     data = {},
     disabled = false,
-    hiddenInputs = false,
     htmlOptions = {},
     id = "",
     initialCountry = "",
@@ -245,10 +243,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       countrySearch: false,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
-      hiddenInput: hiddenInputs ? () => ({
-        phone: `${name}_full`,
-        country: `${name}_country_code`,
-      }) : null,
     })
 
     itiRef.current = telInputInit;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb

@@ -1,3 +1,3 @@
 <%= pb_rails("phone_number_input", props: {
-    id: "hello",
+    id: "hello"
 }) %>

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

@@ -16,6 +16,4 @@ examples:
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
-  - phone_number_input_format: Format as You Type
-  - phone_number_input_hidden_inputs: Hidden Inputs
-  
+  - phone_number_input_format: Format as You Type

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -23,8 +23,6 @@ module Playbook
                    default: ""
       prop :format_as_you_type, type: Playbook::Props::Boolean,
                                 default: false
-      prop :hidden_inputs, type: Playbook::Props::Boolean,
-                           default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -37,7 +35,6 @@ module Playbook
           disabled: disabled,
           error: error,
           formatAsYouType: format_as_you_type,
-          hiddenInputs: hidden_inputs,
           initialCountry: initial_country,
           label: label,
           name: name,

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -84,7 +84,7 @@ const Popover = (props: PbPopoverProps) => {
   } = props;
 
   const items = globalProps(props).split(' ')
-  const filteredItems = items.filter(item => !item.includes('min-width') && !item.includes('width'))
+  const filteredItems = items.filter(item => !item.includes('min_width'))
   const filteredGlobalProps = filteredItems.join(' ')
   const popoverSpacing =
     filteredGlobalProps.includes("dark") || !filteredGlobalProps

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -181,7 +181,7 @@ const PopoverTestClicktoClose3 = () => {
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body p_sm overflow_handling");
+    expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling");
   });
 
   test("closes Popover on click anywhere", async () => {

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)) return ''
+    if (isNaN(dollars) || dollars === 0) return ''
 
     // Format as currency
     return new Intl.NumberFormat('en-US', {
@@ -30,9 +30,10 @@ const formatCurrencyDefaultValue = (value: string): string => {
 const formatCurrency = (value: string): string => {
     const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
 
-    if (!numericValue || numericValue === "00") return ''
+    if (!numericValue) 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_textarea/textarea.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%
     # convert deprecated prop values
     size = object.size

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -1,2 +1,7 @@
-<%= pb_content_tag(object.tag) do %><%= content.presence || object.text %><% end %>
+<%= content_tag(object.tag,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %><%= content.presence || object.text %><% end %>
     

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria,
+    class: object.classname,
+    **combined_html_options) do %>
   <label class="pb_toggle_wrapper">
     <%= content.presence || object.input %>
     <div class="pb_toggle_control"></div>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_id: "result-1-sample-email-link",
+  tooltip_id: "sample-email-tooltip-result-1",
+  position: "top",
+  dark: true
+}) do %>
+  Send Email
+<% end %>

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

@@ -4,7 +4,6 @@ examples:
   - tooltip_default: Default
   - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
-  - tooltip_icon_rails: Tooltip with Icon
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef} 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'
@@ -49,7 +49,6 @@ type TypeaheadProps = {
   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",
-  onChange?: any,
   optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
@@ -72,7 +71,8 @@ type TagOnChangeValues = {
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
-const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
+
+const Typeahead = ({
   async,
   className,
   components = {},
@@ -83,11 +83,9 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   getOptionValue,
   htmlOptions = {},
   id,
-  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
-  onChange,
   optionsByContext = {},
   searchContextSelector,
   clearOnContextChange = false,
@@ -158,15 +156,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   )
 
   const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
-    if (onChange) {
-      const isReactHookForm = onChange.toString().includes("target")
-      if (isReactHookForm) {
-        onChange({ target: { name, value: _data } })
-      } else {
-        onChange(_data)
-      }
-    }
-    
     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 })
@@ -210,11 +199,10 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       />
     </div>
   )
-})
+}
 
 Object.keys(kitComponents).forEach((k) => {
   (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
 })
 
-Typeahead.displayName = 'Typeahead'
 export default Typeahead

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

@@ -49,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

@@ -56,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/example.yml

@@ -17,7 +17,6 @@ examples:
 
   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)

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

@@ -13,4 +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'