[RANGR-1048] Add Custom No Options Text (#539)

**What does this PR do?** 
[RANGR-1048] Add Custom No Options Text

### Checklist
- [x] **LABELS** - Add a label: `breaking`, `bug`, `improvement`,
`documentation`, or `enhancement`. See
[Labels](https://github.com/powerhome/playbook-apple/labels) for
descriptions.
- [x] **RELEASES** - Add the appropriate label: `Ready for Testing` /
`Ready for Release`
- [x] **TESTING** - Have you tested your story?

---------

Co-authored-by: Ísis <[email protected]>

Author: RachelRadford21

PlaybookShowcase/PlaybookShowcase/Components/Typeahead/TypeaheadCatalog.swift

@@ -18,23 +18,36 @@ public struct TypeaheadCatalog: View {
 
   private var assetsUsers = Mocks.assetesMultipleUsers
   @State private var searchTextUsers: String = ""
-  @State private var selectedUsers: [PBTypeahead.Option] = [Mocks.assetesMultipleUsers[0], Mocks.assetesMultipleUsers[1]]
+  @State private var selectedUsers: [PBTypeahead.Option] = [
+    Mocks.assetesMultipleUsers[0],
+    Mocks.assetesMultipleUsers[1]
+  ]
   @FocusState private var isFocusedUsers
 
   @State private var searchTextDeselectedUsers: String = ""
-  @State private var selectedUsersDeselected: [PBTypeahead.Option] = [Mocks.assetesMultipleUsers[0], Mocks.assetesMultipleUsers[1]]
+  @State private var selectedUsersDeselected: [PBTypeahead.Option] = [
+    Mocks.assetesMultipleUsers[0],
+    Mocks.assetesMultipleUsers[1]
+  ]
   @State private var deselectedUsers: [PBTypeahead.Option] = []
   @FocusState private var isFocusedDeselectedUsers
 
   @State private var searchTextHeight: String = ""
-  @State private var selectedHeight: [PBTypeahead.Option] = [Mocks.assetesMultipleUsers[3], Mocks.assetesMultipleUsers[2]]
+  @State private var selectedHeight: [PBTypeahead.Option] = [
+    Mocks.assetesMultipleUsers[3],
+    Mocks.assetesMultipleUsers[2]
+  ]
   @FocusState private var isFocusedHeight
 
   private var assetsSection: [PBTypeahead.OptionType] = Mocks.assetsSectionUsers
   @State private var searchTextSections: String = ""
   @State private var selectedSections: [PBTypeahead.Option] = []
   @FocusState private var isFocusedSection
 
+  @State private var searchTextNoOptions: String = ""
+  @State private var selectedNoOptions: [PBTypeahead.Option] = []
+  @FocusState private var isFocusedNoOptions
+
   @State private var presentDialog: Bool = false
   private var popoverManager = PopoverManager.shared
 
@@ -48,6 +61,7 @@ public struct TypeaheadCatalog: View {
       #endif
       PBDoc(title: "Height Adjusted Dropdown", spacing: Spacing.small) { heightAdjusted }
       PBDoc(title: "Sections", spacing: Spacing.small) { sections }
+      PBDoc(title: "No Options", spacing: Spacing.small) { noOptions }
         .padding(.bottom, 500)
     }
     .scrollDismissesKeyboard(.immediately)
@@ -136,6 +150,40 @@ extension TypeaheadCatalog {
     )
   }
 
+  var noOptions: some View {
+    PBTypeahead(
+      id: 5,
+      title: "Users",
+      placeholder: "type the name of a user",
+      searchText: $searchTextNoOptions,
+      options: assetsUsers,
+      selection: .multiple(variant: .pill),
+      isFocused: $isFocusedNoOptions,
+      selectedOptions: $selectedNoOptions,
+      noOptionsView: {
+        customNoOptionsText
+      }
+    )
+  }
+
+  var customNoOptionsText: some View {
+    #if os(macOS)
+    HStack(spacing: Spacing.none) {
+      Text("No results found. Review user name for accuracy or ")
+      PBButton(variant: .link, title: "add user name.")
+    }
+    .frame(maxWidth: .infinity, alignment: .center)
+    .pbFont(.detail(false), color: .text(.light))
+    #elseif os(iOS)
+    VStack {
+      Text("No results found. Review user name for accuracy or ")
+      PBButton(variant: .link, title: "add user name.")
+    }
+    .fixedSize(horizontal: true, vertical: false)
+    .pbFont(.detail(false), color: .text(.light))
+    #endif
+  }
+
   var dialog: some View {
     PBButton(title: "Simple") {
       DialogCatalog.disableAnimation()
@@ -144,9 +192,9 @@ extension TypeaheadCatalog {
     .presentationMode(isPresented: $presentDialog) {
       DialogView(isPresented: $presentDialog)
         .popoverHandler(id: 6)
-#if os(macOS)
+      #if os(macOS)
         .frame(minWidth: 500, minHeight: 390)
-#endif
+      #endif
     }
   }
 

Sources/Playbook/Components/Typeahead/PBTypeahead+View.swift

@@ -101,7 +101,7 @@ public extension PBTypeahead {
   var emptyView: some View {
     HStack {
       Spacer()
-      Text(viewModel.noOptionsText)
+        noOptionsView()
         .pbFont(.body, color: .text(.light))
       Spacer()
     }

Sources/Playbook/Components/Typeahead/PBTypeahead.swift

@@ -29,6 +29,7 @@ public struct PBTypeahead: View {
   @Binding internal var deselectedOptions: [PBTypeahead.Option]
   @Binding internal var searchText: String
   @FocusState.Binding internal var isFocused: Bool
+  var noOptionsView: () -> AnyView?
 
   #if os(macOS)
   @StateObject private var keyboardHandler = TypeaheadKeyboardHandler()
@@ -49,7 +50,11 @@ public struct PBTypeahead: View {
     deselectedOptions: Binding<[PBTypeahead.Option]> = .constant([]),
     clearAction: (() -> Void)? = nil,
     disableFiltering: Bool = false,
-    disableKeyboardHandler: Bool = false
+    disableKeyboardHandler: Bool = false,
+    @ViewBuilder noOptionsView: @escaping () -> some View = {
+         Text("No Options")
+           .pbFont(.body, color: .text(.light))
+       }
   ) {
     self.id = id
     self.title = title
@@ -70,6 +75,7 @@ public struct PBTypeahead: View {
     ))
     self._deselectedOptions = deselectedOptions
     self.disableKeyboardHandler = disableKeyboardHandler
+    self.noOptionsView = { AnyView(noOptionsView()) }
   }
 
   public var body: some View {