playbook_ui 14.16.0.pre.rc.0 → 14.16.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 29999d280f49fac0febbbb14cf22004a252aab3387af1d39edafca4cc2e0852c
-  data.tar.gz: 0e8f106c77c37528bef3310388435c63917090e93642dd5cf1b586eb2afea3b7
+  metadata.gz: 408cff49bb1a860fa5e13e4f3b2cbbb1fade96335721b0da125445509e65985f
+  data.tar.gz: 3fa1f1bd792a316d5754ebbf30dd68093cb9620155a5c0c95a56d79449e9ef09
 SHA512:
-  metadata.gz: 95ec7db3153f2fea683909fc058a3f6ad1a0cd84dbb3954d5545234a98ac56e1614735a70e2ab3e47200010bde3055b005ced52e2ca996a7540d3cba854a3ee5
-  data.tar.gz: 909e9c77563d5a963b919c774bdc40ff892a1c462156229a10190305ec96e118110ab6a23e54fa54d4190f72f548290edc7ec60cd5a03ca3ff03bfa5d1512e1e
+  metadata.gz: b5ef34e782ea21f845646ce545e0a5b724de93037c86c1150eafb4e27e09f9a2d35d1f738128dd865b47c62d8d32422c29f1973ded6fa0afd553a46bebe4a2d6
+  data.tar.gz: 7061aea824206762a1515325f50d488fa72415d2b29cccd32366cc24b01b9f09187169c73a59391c9c29fe440d7171d3bf9eadf635f1268c20bb2de66cc15dc4

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'))
+  const filteredItems = items.filter(item => !item.includes('min-width') && !item.includes('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 max_width_240px overflow_handling");
+    expect(kit).toHaveClass("pb_popover_body p_sm 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) || 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_tooltip/docs/_tooltip_icon_rails.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+<% end %>

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

@@ -4,6 +4,7 @@ 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} from 'react'
+import React, { useState, useEffect, forwardRef} from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
@@ -49,6 +49,7 @@ 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,
@@ -71,8 +72,7 @@ type TagOnChangeValues = {
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
-
-const Typeahead = ({
+const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   async,
   className,
   components = {},
@@ -83,9 +83,11 @@ const Typeahead = ({
   getOptionValue,
   htmlOptions = {},
   id,
+  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
+  onChange,
   optionsByContext = {},
   searchContextSelector,
   clearOnContextChange = false,
@@ -156,6 +158,15 @@ const Typeahead = ({
   )
 
   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 })
@@ -199,10 +210,11 @@ const Typeahead = ({
       />
     </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_react_hook.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { Typeahead, Title } from 'playbook-ui'
+import { useForm } from 'react-hook-form'
+
+const languages = [
+  { label: 'JavaScript', value: '1995', category: 'Web Development' },
+  { label: 'Python', value: '1991', category: 'General Purpose' },
+  { label: 'Java', value: '1995', category: 'Enterprise' },
+  { label: 'C++', value: '1985', category: 'Systems Programming' },
+  { label: 'Go', value: '2009', category: 'Systems Programming' },
+  { label: 'Rust', value: '2010', category: 'Systems Programming' },
+  { label: 'Swift', value: '2014', category: 'Mobile Development' },
+  { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
+  { label: 'Ruby', value: '1995', category: 'General Purpose' },
+  { label: 'PHP', value: '1995', category: 'Web Development' },
+]
+
+const colors = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadReactHook = (props) => {
+  const { register, watch } = useForm()
+
+  const selectedLanguages = watch('languages')
+  const selectedColor = watch('color')
+
+  return (
+    <>
+      <Typeahead
+          isMulti
+          label="Multi Select Languages"
+          multiKit="language"
+          options={languages}
+          {...props}
+          {...register('languages')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Languages' 
+      />
+      {selectedLanguages && selectedLanguages.map(language => (
+        <p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
+      ))}
+
+      <Typeahead
+          label="Colors"
+          marginTop="lg"
+          options={colors}
+          {...props}
+          {...register('color')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Color' 
+      />
+      <p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
+    </>
+  )
+}
+
+export default TypeaheadReactHook

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

@@ -0,0 +1 @@
+You can pass `react-hook-form` props to the Typeahead kit.

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 removed the user: "${value.label}"`)
+    alert(`You added 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 removed the user: "${value.label}"`)
+    alert(`You added the user: "${value.label}"`)
   }
 
   return (

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

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