playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.revert4453PBNTR933reactdraggablebugdragbtwnexamples7854

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -55,7 +55,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const sideHighlightClass =
     sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
-  
+
   const [isCollapsed, setIsCollapsed] = useCollapsible(true);
 
   const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
@@ -83,14 +83,14 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
       target instanceof SVGElement &&
       (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
 
-        if (clickedCell || isIconClick) { 
+        if (clickedCell || (clickedCell && isIconClick)) {
       setIsCollapsed(!isCollapsed);
       }
     } else {
       setIsCollapsed(!isCollapsed);
     }
   };
-    
+
   return (
     <>
       {collapsible ? (
@@ -116,7 +116,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
                   tag="td"
               >
                 <tr/>
-                <Collapsible.Content 
+                <Collapsible.Content
                     className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
                     dark={dark}
                     margin="none"
@@ -149,7 +149,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
                   tag="td"
               >
                 <tr/>
-                <Collapsible.Content 
+                <Collapsible.Content
                     className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
                     dark={dark}
                     margin="none"

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -71,7 +71,8 @@
     }
     &.error {
       .text_input_wrapper {
-        input,
+        // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
+        input:not(.iti__search-input),
         .text_input {
           border-color: $error_dark;
         }
@@ -102,7 +103,8 @@
       [class*="pb_body_kit"] {
         margin-top: $space_xs / 2;
       }
-      input,
+      // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
+      input:not(.iti__search-input),
       .text_input {
         border-color: $error;
       }

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -4,7 +4,7 @@
     border: true,
     icon: "user"
   },
-  error: "Please enter a valid email address",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please enter a valid email address"),
   label: "Email Address",
   placeholder: "Enter email address",
   type: "email"

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb

@@ -1 +1,5 @@
-<%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " This field has an error!"),
+  label: "Label",
+  rows: 4
+}) %>

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

@@ -29,6 +29,7 @@ import { GenericObject, Noop } from '../types'
  * @prop {boolean} async - whether Typeahead should fetch data from
  * a remote location to populate the options
  * @prop {string} label - the text for the optional typeahead input label
+ * @prop {boolean} preserveSearchInput - whether to preserve the input value when the field loses focus
  */
 
 type TypeaheadProps = {
@@ -54,6 +55,7 @@ type TypeaheadProps = {
   optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
+  preserveSearchInput?: boolean,
 } & GlobalProps
 
 export type SelectValueType = {
@@ -93,8 +95,44 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   optionsByContext = {},
   searchContextSelector,
   clearOnContextChange = false,
+  preserveSearchInput = false, // Default to false to maintain backward compatibility
   ...props
 }: TypeaheadProps) => {
+  // State to manage the input value when preserveSearchInput is true
+  const [inputValue, setInputValue] = useState("")
+
+  // If preserveSearchInput is true, we need to control the input value
+  const handleInputChange = preserveSearchInput
+    ? (newValue: string, actionMeta: {action: string}) => {
+        // Only update the input value for certain actions
+        if (actionMeta.action === 'input-change') {
+          setInputValue(newValue)
+        } else if (actionMeta.action === 'menu-close' && !props.value) {
+          // Don't clear the input when the menu closes without a selection
+          // unless the component is controlled and has a value
+        } else if (actionMeta.action === 'set-value') {
+          // When an option is selected, clear the input
+          setInputValue('')
+        }
+
+        // If the original onInputChange was provided, call it too
+        if (props.onInputChange) {
+          return props.onInputChange(newValue, actionMeta)
+        }
+        return newValue
+      }
+    : props.onInputChange
+
+  // Handle blur events if we're preserving input
+  const handleBlur = preserveSearchInput
+    ? (event: React.FocusEvent<HTMLInputElement>) => {
+        // Do not clear input on blur - the value is preserved in our state
+        if (props.onBlur) {
+          props.onBlur(event)
+        }
+      }
+    : props.onBlur
+
   const selectProps = {
     cacheOptions: true,
     components: {
@@ -124,11 +162,29 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onMultiValueClick: (_option: SelectValueType): any => undefined,
     pillColor: pillColor,
+    ...(preserveSearchInput ? { inputValue } : {}),
+    onInputChange: handleInputChange,
+    onBlur: handleBlur,
     ...props,
   }
 
   const [contextValue, setContextValue] = useState("")
 
+  // Add listener for clearing
+  useEffect(() => {
+    const handleClear = () => {
+      if (preserveSearchInput) {
+        setInputValue('')
+      }
+    }
+
+    document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, handleClear)
+
+    return () => {
+      document.removeEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, handleClear)
+    }
+  }, [selectProps.id, preserveSearchInput])
+
   useEffect(() => {
     if (searchContextSelector) {
       const searchContextElement = document.getElementById(searchContextSelector)
@@ -137,7 +193,12 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       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 (clearOnContextChange) {
+          document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
+          if (preserveSearchInput) {
+            setInputValue('')
+          }
+        }
       }
 
       if (searchContextElement) searchContextElement.addEventListener('change', handleContextChange)
@@ -146,7 +207,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
         if (searchContextElement) searchContextElement.removeEventListener('change', handleContextChange)
       }
     }
-  }, [searchContextSelector])
+  }, [searchContextSelector, clearOnContextChange, selectProps.id, preserveSearchInput])
 
   const contextArray = optionsByContext[contextValue]
   if (Array.isArray(contextArray) && contextArray.length > 0) {
@@ -168,7 +229,12 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
         onChange(_data)
       }
     }
-    
+
+    // If a value is selected and we're preserving input on blur, clear the input
+    if (action === 'select-option' && preserveSearchInput) {
+      setInputValue('')
+    }
+
     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 })
@@ -181,6 +247,10 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     if (action === 'clear') {
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-clear`)
       document.dispatchEvent(multiValueClearEvent)
+      // If preserving input on blur, also clear input on explicit clear
+      if (preserveSearchInput) {
+        setInputValue('')
+      }
     }
   }
 

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

@@ -8,7 +8,14 @@
 
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
+<%= pb_rails("typeahead", props: {
+  id: "typeahead-error-example",
+  options: options,
+  error: "Please make a valid selection",
+  label: "Products",
+  name: :foo,
+  is_multi: false
+}) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>

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

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadPreserveInput = (props) => {
+  return (
+    <Typeahead
+        label="Colors"
+        options={options}
+        preserveSearchInput
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadPreserveInput

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

@@ -0,0 +1 @@
+By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserveSearchInput` prop in order to prevent text from being cleared when the field loses focus

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

@@ -34,3 +34,4 @@ examples:
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
     - typeahead_disabled: Disabled
+    - typeahead_preserve_input: Preserve Search Input

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

@@ -15,3 +15,4 @@ export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_colo
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
+export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -19,6 +19,7 @@ type UserProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
+  avatarGrayscale?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   name?: string,
@@ -41,6 +42,7 @@ const User = (props: UserProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
+    avatarGrayscale = false,
     htmlOptions = {},
     id,
     name,
@@ -145,6 +147,7 @@ const User = (props: UserProps): React.ReactElement => {
     >
       { avatarPresent &&
         <Avatar
+            grayscale={avatarGrayscale}
             imageUrl={avatarUrl}
             name={name}
             size={size}

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("user", props: {
+  name: "Anna Black",
+  title: "Remodeling Consultant",
+  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+  avatar_grayscale: true,
+}) %>

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import User from '../../pb_user/_user'
+
+const UserGrayscale = (props) => {
+  return (
+    <User
+        avatarGrayscale
+        avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        name="Anna Black"
+        title="Remodeling Consultant"
+        {...props}
+    />
+  )
+}
+
+export default UserGrayscale

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

@@ -10,6 +10,7 @@ examples:
   - user_subtitle: Subtitle
   - user_block_content_subtitle_rails: Block Content Subtitle
   - user_font_options: Font Options
+  - user_grayscale: Grayscale Avatar
 
   react:
   - user_default: Default
@@ -21,6 +22,7 @@ examples:
   - user_subtitle: Subtitle
   - user_block_content_subtitle_react: Block Content Subtitle
   - user_font_options: Font Options
+  - user_grayscale: Grayscale Avatar
 
   swift:
   - user_horizontal_swift: Horizontal

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

@@ -7,3 +7,4 @@ export { default as UserVerticalSize } from './_user_vertical_size.jsx'
 export { default as UserSubtitle } from './_user_subtitle.jsx'
 export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
 export { default as UserFontOptions } from './_user_font_options.jsx'
+export { default as UserGrayscale } from './_user_grayscale.jsx'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -3,7 +3,8 @@
     <%= pb_rails("avatar", props: {
       name: object.name,
       size: object.avatar_size,
-      image_url: object.avatar_url
+      image_url: object.avatar_url,
+      grayscale: object.avatar_grayscale,
     }) %>
   <% end %>
   <%= content_tag(:div, class: "content_wrapper") do %>

data/app/pb_kits/playbook/pb_user/user.rb

@@ -8,6 +8,7 @@ module Playbook
                    default: "left"
       prop :avatar, type: Playbook::Props::Boolean,
                     default: false
+      prop :avatar_grayscale, type: Playbook::Props::Boolean, default: false
       prop :avatar_url
       prop :bold, type: Playbook::Props::Boolean, default: true
       prop :name