playbook_ui 13.11.1 → 13.12.0.pre.alpha.PLAY880cardkithighlightzindex1655

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

@@ -10,3 +10,9 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
+
+  swift:
+  - multiple_users_default_swift: Default
+  - multiple_users_reverse_swift: Reverse
+  - multiple_users_size_swift: Small
+  - multiple_users_props_swift: ""

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-default](https://github.com/powerhome/playbook/assets/92755007/180e1275-3eb6-4b28-b1ef-bdde45ab3c2e)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser, size: .default)
+  PBMultipleUsersStacked(users: twoUsers, size: .default)
+  PBMultipleUsersStacked(users: multipleUsers, size: .default)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md

@@ -0,0 +1,5 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Users** | `[PBUser]` | Sets the user's avatars |  |  |
+| **Size** | `Size` | Changes the size of the avatars | `.small` | `.default` `.small` `.xSmall` |

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-small](https://github.com/powerhome/playbook/assets/92755007/277fd685-6302-462e-a02a-18a8fcb57715)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser)
+  PBMultipleUsersStacked(users: twoUsers)
+  PBMultipleUsersStacked(users: multipleUsers)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-xsmall](https://github.com/powerhome/playbook/assets/92755007/4f31976f-a41b-4923-9230-5015f6ad75f8)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+ HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser, size: .xSmall)
+  PBMultipleUsersStacked(users: twoUsers, size: .xSmall)
+  PBMultipleUsersStacked(users: multipleUsers, size: .xSmall)
+}
+
+```

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

@@ -6,3 +6,9 @@ examples:
 
   react:
   - multiple_users_stacked_default: Default
+
+  swift: 
+  - multiple_users_stacked_default_swift: Default
+  - multiple_users_stacked_small_swift: Small
+  - multiple_users_stacked_xsmall_swift: xSmall
+  - multiple_users_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children_swift.md

@@ -0,0 +1,14 @@
+
+![section-separator-children](https://github.com/powerhome/playbook/assets/92755007/acd6a8eb-d034-4efd-b2e6-afabe739e678)
+
+```swift
+
+PBSectionSeparator(variant: .dashed) {
+  PBCard(alignment: .center, borderRadius: BorderRadius.rounded, padding: Spacing.xxSmall, width: 70) {
+    Text("Today")
+      .pbFont(.caption)
+      .frame(maxWidth: .infinity, alignment: .center)
+  }
+}
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed_swift.md

@@ -0,0 +1,7 @@
+![section-separator-dashed](https://github.com/powerhome/playbook/assets/92755007/e4f01870-3d90-4655-9136-5c7565711e1f)
+
+```swift
+
+PBSectionSeparator(variant: .dashed)
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line_swift.md

@@ -0,0 +1,8 @@
+
+![section-separator-default](https://github.com/powerhome/playbook/assets/92755007/2560d5e2-f345-42d2-bad9-2a2e031b3e08)
+
+```swift
+
+PBSectionSeparator()
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **text** | `String` | Adds text to the Section Separator | `nil` |  |
+| **orientation** | `Orientation` | Changes the orientation | `.horizontal` | `.horizontal` `.vertical` |
+| **variant** | `Variant` | Changes the style of the Section Separator | `.card` | `.dashed` `.card` |
+| **dividerOpacity** | `CGFloat` | Adjusts the opacity of the divider | `1` |  |
+| **margin** | `CGFloat` | Adds margin between text and the divider | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_swift.md

@@ -0,0 +1,7 @@
+![section-separator-text](https://github.com/powerhome/playbook/assets/92755007/4b481a7d-d001-43b6-b779-cfdc6fffc15f)
+
+```swift
+
+PBSectionSeparator("Text separator")
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical_swift.md

@@ -0,0 +1,18 @@
+![section-separator-verticle](https://github.com/powerhome/playbook/assets/92755007/21ca54a5-6b8a-459f-91ad-4e9b68258f68)
+
+```swift
+
+let loremIpsum: some View = Text(
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+)
+
+HStack(spacing: Spacing.none) {
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+  PBSectionSeparator(orientation: .vertical)
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+}
+.frame(maxWidth: .infinity)
+.frame(height: 120, alignment: .center)
+.listRowSeparator(.hidden)
+
+```

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

@@ -13,3 +13,11 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+
+  swift:
+  - section_separator_line_swift: Line Separator
+  - section_separator_dashed_swift: Dashed Separator
+  - section_separator_text_swift: Text Separator
+  - section_separator_vertical_swift: Vertical
+  - section_separator_children_swift: Children
+  - section_separator_props_swift: ""

data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb

@@ -39,10 +39,10 @@
         text: "Full Name",
         colspan: 2,
         sort_menu: [
-          { item: "First Name Descending", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
-          { item: "First Name Ascending", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
-          { item: "Last Name Descending", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
-          { item: "Last Name Ascending", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
+          { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
+          { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
+          { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
+          { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {

data/app/pb_kits/playbook/pb_table/styles/_hover.scss

@@ -1,6 +1,7 @@
 @import "../../tokens/opacity";
 
 $transition-speed: 0.2s;
+$border_hover_color_dark: lighten($border_dark, 5%);
 
 [class^=pb_table] {
   &.table-sm,
@@ -15,9 +16,9 @@ $transition-speed: 0.2s;
           td {
             border-top-color: transparent;
             border-top-width: 0;
-            transition: all $transition-speed ease; 
+            transition: all $transition-speed ease;
           }
-          @media (hover:hover) { 
+          @media (hover:hover) {
             td {
               position: relative;
               &:after {
@@ -69,6 +70,29 @@ $transition-speed: 0.2s;
           }
         }
       }
+
+      &.dark  {
+        tbody {
+          tr {
+            @media (hover:hover) {
+              &:hover {
+                box-shadow: 0 2px 10px 0 $shadow_dark;
+                td {
+                  border-top-width: 0;
+                  border-top-color: transparent;
+                  border-color: $border_hover_color_dark !important;
+                  &:after {
+                    transition: background-color $transition-speed ease, height $transition-speed ease;
+                    background-color: $border_hover_color_dark !important;
+                    height: 1px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
     }
   }
 }

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -1,6 +1,6 @@
 @import "../../tokens/screen_sizes";
 
-$table-dark-card-bg: $bg_dark;
+$table-dark-card-bg: $card_dark;
 
 [class^=pb_table] {
   &.table-sm,
@@ -24,7 +24,6 @@ $table-dark-card-bg: $bg_dark;
 
           td {
             border-color: $border_dark !important;
-            border-bottom-width: 0 !important;
             color: $white;
 
             &:before {
@@ -39,21 +38,6 @@ $table-dark-card-bg: $bg_dark;
         }
       }
 
-      &:not(.no-hover) {
-        tbody {
-          tr {
-            @media (hover:hover) {
-              &:hover {
-                td {
-                  border-color: $border_dark !important;
-                  background: $bg_dark;
-                }
-              }
-            }
-          }
-        }
-      }
-
       &.table-card {
         background: $table-dark-card-bg !important;
       }

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -28,15 +28,16 @@
                                       position: object.placement ,
                                       padding: 'none'}) do %>
         <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-          <% object.sort_menu.each_with_index do |item, index| %>
+          <% object.sort_items.each do |sort_item| %>
+            <% item = active_or_first_item(sort_items_for(sort_item)) %>
             <%= pb_rails("nav/item", props: {
               text: item[:item],
-              link: item[:link],
+              link: next_link(sort_item: sort_item),
               highlighted_border: false,
               padding: "xs",
               icon_right: sort_icon(item[:direction], item[:active]),
               active: item[:active],
-              classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
+              classname: "header_nav_item"
             }) %>
           <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -32,20 +32,43 @@ module Playbook
         align.present? ? "align_#{align}" : nil
       end
 
-      def next_link
-        return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
+      def next_link(sort_item: "")
+        sort_menu_for = if sort_item.blank?
+                          sort_menu
+                        else
+                          sort_items_for(sort_item)
+                        end
+
+        return sort_menu_for[0][:link] if sort_menu_for.all? { |item| item[:active] == false }
 
         link = ""
 
-        sort_menu.each_with_index do |item, index|
+        sort_menu_for.each_with_index do |item, index|
           if item[:active] == true
-            next_index = (index + 1) % sort_menu.length
-            link = sort_menu[next_index][:link]
+            next_index = (index + 1) % sort_menu_for.length
+            link = sort_menu_for[next_index][:link]
           end
         end
         link
       end
 
+      def sort_items
+        sort_menu.map { |hash| hash[:item] }.uniq
+      end
+
+      def sort_items_for(sort_item)
+        sort_menu.find_all { |hash| hash[:item] == sort_item }
+      end
+
+      def active_or_first_item(items)
+        active_item = items.find { |hash| hash[:active] == true }
+        if active_item.present?
+          active_item
+        else
+          items[0]
+        end
+      end
+
       def sorting_style?
         sort_menu != [{}]
       end

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md

@@ -0,0 +1,35 @@
+![text-input-add-on](https://github.com/powerhome/playbook/assets/92755007/65a28e6a-9e65-4ca1-af8d-91dae6eac4f5)
+
+```swift
+
+PBTextInput(
+  "ADD ON WITH DEFAULTS",
+  text: $textAddOn,
+  style: .rightIcon(.user, divider: true)
+)
+
+PBTextInput(
+  "RIGHT-ALIGNED ADD ON WITH BORDER",
+  text: $textAddOnRight,
+  style: .rightIcon(.user, divider: true)
+)
+
+PBTextInput(
+  "RIGHT-ALIGNED ADD ON WITH NO BORDER",
+  text: $textAddOnRightNoBorder,
+  style: .rightIcon(.user, divider: false)
+)
+
+PBTextInput(
+  "LEFT-ALIGNED ADD ON WITH NO BORDER",
+  text: $textAddOnLeft,
+  style: .leftIcon(.user, divider: false)
+)
+
+PBTextInput(
+  "LEFT-ALIGNED ADD ON WITH BORDER",
+  text: $textAddOnLeftNoBorder,
+  style: .leftIcon(.user, divider: true)
+)
+
+```

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md

@@ -0,0 +1,29 @@
+![text-input-default](https://github.com/powerhome/playbook/assets/92755007/625a246e-9d5c-42ea-8c6e-7afcf0984c9a)
+
+
+```swift
+
+@State private var textFirstName: String = ""
+@State private var textLastName: String = ""
+@State private var textPhone: String = ""
+
+PBTextInput(
+  "First name",
+  text: $textFirstName,
+  placeholder: "Enter first name"
+)
+
+PBTextInput(
+  "Last name",
+  text: $textLastName,
+  placeholder: "Enter last name"
+)
+
+PBTextInput(
+  "Phone number",
+  text: $textPhone,
+  placeholder: "Enter phone number",
+  keyboardType: .phonePad
+)
+
+```

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md

@@ -0,0 +1,13 @@
+![text-input-disabled](https://github.com/powerhome/playbook/assets/92755007/0e08256e-dd76-4528-b748-826f38bbe6a0)
+
+
+```swift
+
+PBTextInput(
+  "Last name",
+  text: $textDisabled,
+  placeholder: "Enter last name",
+  style: .disabled
+)
+
+```

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md

@@ -0,0 +1,24 @@
+![text-input-error](https://github.com/powerhome/playbook/assets/92755007/7c664f75-1d7a-4a94-bc59-6f845a68ce19)
+
+
+```swift
+
+@State private var textError: String = ""
+@State private var textConfirmError: String = ""
+
+PBTextInput(
+  "Email address",
+  text: $textError,
+  placeholder: "Enter email address",
+  error: (true, "Insert a valid email"),
+  style: .leftIcon(.user, divider: true)
+)
+
+PBTextInput(
+  "Confirm email address",
+  text: $textConfirmError,
+  placeholder: "Confirm email address",
+  style: .leftIcon(.user, divider: true)
+)
+
+```

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md

@@ -0,0 +1,13 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **title** | `String` | Adds a title | `nil` |  |
+| **placeholder** | `String` | Adds placeholder text | `""` |  |
+| **error** | `(Bool, String)` | Changes the style of the Text Input | `nil` |  |
+| **style** | `Style` | Changes the style of the Text Input | `.default` | `.default` `.rightIcon` `.leftIcon` `.inline` `.disabled` |
+| **onChange** | `Bool` | Adds an event handler | `nil` |  |
+| **keyboardType** | `UIKeyboardType` | Speficies the keyboard type (ios only) | `.default` |  |
+| **text** | `String` | Sets the Text Input's text value |  |  |
+| **selected** | `Bool` | Changes the style of the Text Input |  | `true` `false` |
+| **isHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |
+| **isIconHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |

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

@@ -16,3 +16,10 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
+
+  swift:
+    - text_input_default_swift: Default
+    - text_input_error_swift: With Error
+    - text_input_disabled_swift: Disabled
+    - text_input_add_on_swift: Add On
+    - text_input_props_swift: ""

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md

@@ -0,0 +1,27 @@
+![textarea-default](https://github.com/powerhome/playbook/assets/92755007/40eec958-63d7-4840-bf5c-f8d1e34c911a)
+
+```swift
+
+@State var defaultText = ""
+@State var placeholderText = ""
+@State var customText = "Default value text"
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBTextArea(
+    "Label",
+    text: $defaultText
+  )
+
+  PBTextArea(
+    "Label",
+    text: $placeholderText,
+    placeholder: "Placeholder with text"
+  )
+
+  PBTextArea(
+    "Label",
+    text: $customText
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error_swift.md

@@ -0,0 +1,11 @@
+![textarea-error](https://github.com/powerhome/playbook/assets/92755007/6d47a914-ea0b-4fbc-9f2a-6237935a3b4c)
+
+```swift
+
+PBTextArea(
+  "Label",
+  text: $errorText,
+  error: "This field has an error!"
+)
+
+```

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md

@@ -0,0 +1,9 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **characterCount** | `CharacterCount` | Adds a character counter to the Textarea | `.noCount` | `.noCount` `.count` `.maxCharacterCount` `.maxCharacterCountBlock` `.maxCharacterCountError` |
+| **inline** | `Bool` | Changes the style of the Textarea | `false` | `true` `false` |
+| **label** | `String` | Adds a label | `nil` |  |
+| **placeholder** | `String` | Adds placeholder text | `nil` |  |
+| **text** | `String` | Sets the Textarea's text value | `Binding<String>` |  |
+| **error** | `String` | Changes the style of the Textarea | `nil` |  |

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

@@ -15,3 +15,8 @@ examples:
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
+
+  swift:
+  - textarea_default_swift: Default
+  - textarea_error_swift: Textarea w/ Error
+  - textarea_props_swift: ""

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md

@@ -0,0 +1,11 @@
+![toggle-default](https://github.com/powerhome/playbook/assets/92755007/bd99bd01-d577-4455-b1f9-a88b637e8a60)
+
+
+```swift
+
+VStack(spacing: Spacing.small) {
+  PBToggle(checked: true)
+  PBToggle(checked: false)
+}
+
+```

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md

@@ -0,0 +1,10 @@
+![toggle-name](https://github.com/powerhome/playbook/assets/92755007/e45a575c-ab14-4181-a5e8-eb8d1f57ab4d)
+
+```swift
+
+VStack(spacing: Spacing.small) {
+  PBToggle(label: "car", checked: false)
+  PBToggle(label: "bike", checked: false)
+}
+
+```

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md

@@ -0,0 +1,6 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **isHovering** | `Bool` | Changes the style of the Toggle | `false` | `true` `false` |
+| **label** | `String` | Adds a label to the Toggle | `nil` |  |
+| **checked** | `Bool` | Changes the style of the Toggle |  | `true` `false` |

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

@@ -13,3 +13,7 @@ examples:
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
 
+  swift:
+    - toggle_default_swift: Default State
+    - toggle_name_swift: Name and Value
+    - toggle_props_swift: ""

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react"
+import React, { useRef, useState, forwardRef, ForwardedRef } from "react"
 
 import {
   arrow, 
@@ -28,9 +28,10 @@ type TooltipProps = {
   placement?: Placement,
   position?: "absolute" | "fixed";
   text: string,
+  showTooltip?: boolean,
 } & GlobalProps
 
-const Tooltip = (props: TooltipProps): React.ReactElement => {
+const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -42,6 +43,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     placement: preferredPlacement = "top",
     position = "absolute",
     text,
+    showTooltip = true,
     zIndex,
     ...rest
   } = props
@@ -59,10 +61,9 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
 
   const {
     context,
-    floating,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {},  },
     placement,
-    reference,
+    refs,
     strategy,
     x,
     y,
@@ -82,12 +83,16 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     ],
     open,
     onOpenChange(open) {
-      setOpen(open)
+      if(!showTooltip) {
+        return
+      } else {
+        setOpen(open)
+      }
     },
     placement: preferredPlacement
   })
 
-
+      
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -108,7 +113,16 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     <>
       <div
           className={`pb_tooltip_kit ${css}`}
-          ref={reference}
+          ref={(element) => {
+            refs.setReference(element);
+            if (ref) {
+              if (typeof ref === "function") {
+                ref(element);
+              } else if (typeof ref === "object") {
+                ref.current = element;
+              }
+            }
+          }}
           role="tooltip_trigger"
           style={{ display: "inline-flex" }}
           {...ariaProps}
@@ -120,7 +134,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
         <div
             {...getFloatingProps({
               className: `tooltip_tooltip ${placement} visible`,
-              ref: floating,
+              ref: refs.setFloating,
               role: "tooltip",
               style: {
                 position: strategy,
@@ -153,6 +167,8 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
       )}
     </>
   )
-}
+})
+
+Tooltip.displayName = "Tooltip"
 
 export default Tooltip