playbook_ui 15.1.0.pre.alpha.multipleusersstackedscss11047 → 15.1.0.pre.alpha.play252710946

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3357be552d2d97d78a0b5c06c4b55134e7aa060b8a73a4cfa77f7685b3c3535d
-  data.tar.gz: c193db4e1166324aed46b3aa82207d0c72c6de47a100940a176a2743bbcc40a9
+  metadata.gz: 1356285c2892298ab0d74134116ab03ac8559495657fddba5c09715c495b8f8b
+  data.tar.gz: e780800f41ea2ca322b7cfb5e15b1e0b8ca1b58ff949e196771987b45a659b79
 SHA512:
-  metadata.gz: c522b63ef909ec5d224f123873ada1d90595a1437774f5bf5fc26e71181853d4022143062c706b87dfba324f59c554203d5987efa90c5319cf9c8890ad9cab52
-  data.tar.gz: 1ca144b57c65625a162efa758cfc43605aaa5eeee75fa44ab1f346b46805383636c1307a83269c45a0701955e9dbae1da6f6d109d974f4823d2eb90873fd63e6
+  metadata.gz: '0930a43f3351acff7849b6eee6c89b565d5454d59a7b81aa4e6b08571d353203c9d47894c4c1cbeb1c3f17d0106fcbe1e7f77a6958cc176ce5f1a2143393aef6'
+  data.tar.gz: ae3b1306ae43c73b5a86f949cccd21cead3e2c74b81f59caee59f80b8b53509fe791ef4bc54000580526f29d82f77cf82e11eccf23f69d8173ac8174b675fd2e

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -146,6 +146,8 @@ export function useTableState({
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
+    if (!pagination) return {};
+
     return {
       getPaginationRowModel: getPaginationRowModel(),
       paginateExpandedRows: false,

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -19,10 +19,6 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
-  label {
-    display: block !important;
-  }
-
   &:focus,
   :focus-within {
     div.cal_icon_wrapper,

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb

@@ -3,12 +3,12 @@
 <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
 
 
-<%= pb_rails("dialog", props: {
-    id:"dialog-stacked-default",
+<%= pb_rails("dialog", props: { 
+    id:"dialog-stacked-default", 
     status: "default",
-    size: "sm",
-    title: "Are you sure?",
-    text: "Text explaining why there is an alert",
+    size: "sm", 
+    title: "Are you sure?", 
+    text: "Text explaining why there is an alert", 
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -18,12 +18,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: {
-    id:"dialog-stacked-caution",
+<%= pb_rails("dialog", props: { 
+    id:"dialog-stacked-caution", 
     status: "caution",
-    size: "sm",
-    title: "Are you sure?",
-    text: "This is the action you will be taking",
+    size: "sm", 
+    title: "Are you sure?", 
+    text: "This is the action you will be taking", 
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -33,16 +33,16 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: {
-    id:"dialog-stacked-delete",
+<%= pb_rails("dialog", props: { 
+    id:"dialog-stacked-delete", 
     status: "delete",
-    size: "sm",
-    title: "Delete",
-    text: "You are about to delete ...",
+    size: "sm", 
+    title: "Delete", 
+    text: "You are about to delete ...", 
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -51,7 +51,7 @@ const DialogStackedAlert = () => {
   return (
     <div>
     <Flex
-        rowGap="xs"
+        rowGap="xs" 
         wrap
     >
       <Button
@@ -93,7 +93,6 @@ const DialogStackedAlert = () => {
           <Button
               fullWidth
               onClick={dialog.toggle}
-              variant= {dialog.status == "delete" ? "danger" : "primary"}
           >
             {dialog.buttonOneText}
           </Button>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb

@@ -8,12 +8,12 @@
 <%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
 <% end %>
 
-<%= pb_rails("dialog", props: {
-    id:"dialog-status-default",
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-default", 
     status: "default",
-    size: "status_size",
-    title: "Are you sure?",
-    text: "Text explaining why there is an alert",
+    size: "status_size", 
+    title: "Are you sure?", 
+    text: "Text explaining why there is an alert", 
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -23,12 +23,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: {
-    id:"dialog-status-info",
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-info", 
     status: "info",
-    size: "status_size",
-    title: "Information",
-    text: "Text explaining why there is an alert",
+    size: "status_size", 
+    title: "Information", 
+    text: "Text explaining why there is an alert", 
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -37,12 +37,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: {
-    id:"dialog-status-caution",
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-caution", 
     status: "caution",
-    size: "status_size",
-    title: "Are you Sure?",
-    text: "This is the action you will be taking",
+    size: "status_size", 
+    title: "Are you Sure?", 
+    text: "This is the action you will be taking", 
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -52,27 +52,27 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: {
-    id:"dialog-status-delete",
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-delete", 
     status: "delete",
-    size: "status_size",
-    title: "Delete",
-    text: "You are about to delete ...",
+    size: "status_size", 
+    title: "Delete", 
+    text: "You are about to delete ...", 
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
+            <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
         <% end %>
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: {
-    id:"dialog-status-error",
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-error", 
     status: "error",
-    size: "status_size",
-    title: "Error Message",
-    text: "Text explaining the error",
+    size: "status_size", 
+    title: "Error Message", 
+    text: "Text explaining the error", 
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -81,12 +81,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: {
-    id:"dialog-status-success",
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-success", 
     status: "success",
-    size: "status_size",
-    title: "Success!",
-    text: "Text explaining what is successful",
+    size: "status_size", 
+    title: "Success!", 
+    text: "Text explaining what is successful", 
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -83,8 +83,8 @@ const DialogStatus = () => {
 
   return (
     <div>
-      <Flex
-          rowGap="xs"
+      <Flex 
+          rowGap="xs" 
           wrap
       >
         <Button
@@ -117,7 +117,7 @@ const DialogStatus = () => {
         >
           {"Success Status"}
         </Button>
-        <Button
+        <Button 
             marginRight="md"
             onClick={toggleErrorAlert}
         >
@@ -152,7 +152,6 @@ const DialogStatus = () => {
                   <Button
                       onClick={dialog.toggle}
                       paddingRight="xl"
-                      variant={dialog.status == "delete" ? "danger" : "primary"}
                   >
                   {dialog.buttonOneText}
                   </Button>

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

@@ -21,6 +21,15 @@
   ]
 %>
 
+<%
+  example_typeahead_options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
 <% treeData = [{
     label: "Power Home Remodeling",
     value: "Power Home Remodeling",
@@ -88,7 +97,9 @@
 }] %>
 
 <%= 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.typeahead :example_typeahead_validation_rails, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>  
+  <%= form.typeahead :example_typeahead_validation, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
+  <%= form.typeahead :example_typeahead_validation_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= 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.email_field :example_email_field_validation, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -89,18 +89,7 @@ $positions: (
   }
 }
 
-.pb_multiple_users_stacked_kit,
-.pb_multiple_users_stacked_kit_single,
-.pb_multiple_users_stacked_kit_bubble,
-.pb_multiple_users_stacked_kit_single_bubble,
-.pb_multiple_users_stacked_kit_bubble_size_sm,
-.pb_multiple_users_stacked_kit_bubble_size_md,
-.pb_multiple_users_stacked_kit_bubble_size_lg,
-.pb_multiple_users_stacked_kit_bubble_size_xl,
-.pb_multiple_users_stacked_kit_single_bubble_size_sm,
-.pb_multiple_users_stacked_kit_single_bubble_size_md,
-.pb_multiple_users_stacked_kit_single_bubble_size_lg,
-.pb_multiple_users_stacked_kit_single_bubble_size_xl {
+[class^=pb_multiple_users_stacked_kit] {
   $container_size: map-get($avatar-sizes, "xs");
   $bubble_container_size: map-get($avatar-sizes, "sm");
   $overlap: -15px;
@@ -114,8 +103,7 @@ $positions: (
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
-  .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
-  .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
+  [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
     @include avatar-size($stacked_size);
     &.dark {
       .avatar_wrapper {
@@ -129,17 +117,10 @@ $positions: (
       }
     }
   }
-  &.pb_multiple_users_stacked_kit_single .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_sm .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_md .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_lg .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_xl .pb_multiple_users_stacked_item {
+  &[class*=_single] .pb_multiple_users_stacked_item {
     @include avatar-size(28px);
   }
-  .pb_avatar_kit_size_xs.second_item,
-  .pb_avatar_kit_size_md.second_item, 
-  .pb_badge_kit_primary_rounded.second_item {
+  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
     @include position((bottom: 0, right: 0));
     z-index: 2;
     background: tint($primary, 90%);
@@ -162,8 +143,7 @@ $positions: (
 
   // Iterate over each size to adjust the bubble container only when class contains "_bubble_"
   @each $size_name, $size_value in $avatar-sizes {
-      &.pb_multiple_users_stacked_kit_bubble_size_#{$size_name},
-      &.pb_multiple_users_stacked_kit_single_bubble_size_#{$size_name} {
+      &[class*=_bubble_][class*=_size_#{$size_name}] {
         // Set bubble container size based on the class
         $bubble_container_size: $size_value;
         $container_size: $size_value;
@@ -181,8 +161,7 @@ $positions: (
           background-color: $card_dark;
         }
   
-        .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
-        .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
+        [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
           @include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
   
           &.dark {
@@ -196,8 +175,7 @@ $positions: (
           }
         }
   
-        .pb_avatar_kit_size_xs,
-        .pb_avatar_kit_size_md {
+        [class^=pb_avatar_kit] {
           // First Item
           &.first_item {
             @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
@@ -257,13 +235,8 @@ $positions: (
           }
         }
         
-        &.pb_multiple_users_stacked_kit_single_bubble,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_sm,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_md,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_lg,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_xl {
-          .pb_avatar_kit_size_xs.first_item,
-          .pb_avatar_kit_size_md.first_item {
+        &[class*=_single_bubble] {
+          [class^=pb_avatar_kit].first_item {
             @include position((top: 0, left: 0));
             @include avatar-size($bubble_container_size);
           }

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

@@ -140,14 +140,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     formattedValue = value
   }
 
-  const errorId = error ? `${id}-error` : undefined
-
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
-        aria-describedby={errorId}
-        aria-invalid={!!error}
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
@@ -206,20 +202,16 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label && (
-        <label htmlFor={id}>
-          <Caption className="pb_text_input_kit_label" 
-              text={label} 
-          />
-        </label>
-      )}
+      {label &&
+        <Caption
+            className="pb_text_input_kit_label"
+            text={label}
+        />
+      }
       <div className={`${addOnCss} text_input_wrapper`}>
         {render}
 
         {error && <Body
-            aria={{ atomic: "true", live: "polite" }}
-            htmlOptions={{ role: "alert" }}
-            id={errorId}
             status="negative"
             text={error}
             variant={null}

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

@@ -9,27 +9,23 @@
 
 <%= pb_rails("text_input", props: {
   label: "Last Name",
-  placeholder: "Enter last name",
-  id: "last-name"
+  placeholder: "Enter last name"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Phone Number",
     type: "phone",
-    placeholder: "Enter phone number",
-    id: "phone"
+    placeholder: "Enter phone number"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Email Address",
     type: "email",
-    placeholder: "Enter email address",
-    id: "email"
+    placeholder: "Enter email address"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Zip Code",
     type: "number",
-    placeholder: "Enter zip code",
-    id: "zip"
+    placeholder: "Enter zip code"
 }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -38,7 +38,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="last-name"
           label="Last Name"
           name="lastName"
           onChange={handleOnChangeFormField}
@@ -47,7 +46,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="phone"
           label="Phone Number"
           name="phone"
           onChange={handleOnChangeFormField}
@@ -57,7 +55,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="email"
           label="Email Address"
           name="email"
           onChange={handleOnChangeFormField}
@@ -67,7 +64,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="zip"
           label="Zip Code"
           name="zip"
           onChange={handleOnChangeFormField}
@@ -88,7 +84,6 @@ const TextInputDefault = (props) => {
       <br />
 
       <TextInput
-          id="first-name"
           label="First Name"
           onChange={handleOnChangeFirstName}
           placeholder="Enter first name"

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,8 +1,6 @@
 <%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
-  <label for="<%= object.input_options[:id] || object.id %>" >
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
-  </label>
   <% end %>
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
@@ -17,7 +15,7 @@
     <% else %>
       <%= input_tag %>
     <% end %>
-    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }}) if object.error %>
+    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>
 

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -64,16 +64,10 @@ module Playbook
         "#{object.id}-sanitized" if id.present?
       end
 
-      def error_id
-        "#{id}-error" if error.present?
-      end
-
     private
 
       def all_input_options
         {
-          'aria-describedby': error.present? ? error_id : nil,
-          'aria-invalid': error.present?,
           autocomplete: autocomplete == true ? nil : (autocomplete.presence || "off"),
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,

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

@@ -53,6 +53,8 @@ type TypeaheadProps = {
   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 }>>
+  required?: boolean,
+  validation?: { message: string },
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
   preserveSearchInput?: boolean,
@@ -94,12 +96,16 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   onChange,
   optionsByContext = {},
   searchContextSelector,
+  required = false,
+  validation,
   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("")
+  // State to track if form has been submitted to control validation display for react rendered rails kit
+  const [formSubmitted, setFormSubmitted] = useState(false)
 
   // If preserveSearchInput is true, we need to control the input value
   const handleInputChange = preserveSearchInput
@@ -135,6 +141,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const selectProps = {
     cacheOptions: true,
+    required,
     components: {
       Control,
       ClearIndicator,
@@ -170,6 +177,27 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const [contextValue, setContextValue] = useState("")
 
+  // Add listener for form validation to track when validation should be shown (needed for react rendered rails kit)
+  useEffect(() => {
+    const handleInvalid = (event: Event) => {
+      const target = event.target as HTMLInputElement
+      const typeaheadContainer = target.closest('[data-pb-react-component="Typeahead"]')
+
+      if (typeaheadContainer) {
+        // Check if this invalid event is specifically for our typeahead by comparing names so we do not have to require ids
+        const invalidInputName = target.name || target.getAttribute('name')
+        if (invalidInputName === name) {
+          setFormSubmitted(true)
+        }
+      }
+    }
+    document.addEventListener('invalid', handleInvalid, true)
+    
+    return () => {
+      document.removeEventListener('invalid', handleInvalid, true)
+    }
+  }, [name])
+
   // Add listener for clearing
   useEffect(() => {
     const handleClear = () => {
@@ -230,6 +258,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       }
     }
 
+    // Reset form submitted state when a selection is made (this is all for react rendered rails kit)
+    if (action === 'select-option') {
+      setFormSubmitted(false)
+    }
+
     // If a value is selected and we're preserving input on blur, clear the input
     if (action === 'select-option' && preserveSearchInput) {
       setInputValue('')
@@ -268,6 +301,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const inlineClass = selectProps.inline ? 'inline' : null
 
+  const shouldShowValidationError = required && 
+                                   formSubmitted
+
+  const errorDisplay = error || (shouldShowValidationError ? validation?.message || "Please fill out this field." : "")
+
   return (
     <div
         {...dataProps}
@@ -276,7 +314,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     >
       <Tag
           classNamePrefix="typeahead-kit-select"
-          error={error}
+          error={errorDisplay}
           isDisabled={disabled}
           onChange={handleOnChange}
           {...selectProps}

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -101,6 +101,8 @@ module Playbook
           plusIcon: plus_icon,
           truncate: truncate,
           wrapped: wrapped,
+          required: required,
+          validation: validation,
           searchContextSelector: search_context_selector,
           optionsByContext: options_by_context,
           clearOnContextChange: clear_on_context_change,